Pen Input control to be putted into HTML control in PowerApps.

[JuanS]

Good Day,

I would like to use the pen Input controll to capture a signature and then save it to HTML and then to a pdf document. I have already created the screens to capture the information, and in turn save it to PDF, but need to save the Pen Input to the same PDF as well

[CarlosFigueira]

You can now convert a pen input signature to HTML using the new JSON function (not exactly to HTML directly, but to a data URI that can be used in a HTML <img> tag). For example, if you have a HTML template as such:

Set(htmlTemplate, "<h1>Report card</h1>
<p>This is the report card for John Doe</p>
<table border='1'>
    <tr><th>Subject</th><th>T1</th><th>T2</th><th>T3</th><th>T4</th></tr>
    <tr><th>Language</th><th>B-</th><th>A-</th><th>B+</th><th>B</th></tr>
    <tr><th>Math</th><th>A-</th><th>A</th><th>B+</th><th>A-</th></tr>
    <tr><th>Science</th><th>B+</th><th>B</th><th>A-</th><th>C+</th></tr>
</table>
<h2>Signature</h2>
{{Signature placeholder}}
<p>{{Timestamp placeholder}}</p>")

Then you can have add a signature to it by replacing the placeholder with the output from the JSON function inside an img tag:

Set(
    htmlReplaced,
    Substitute(
        Substitute(
            htmlTemplate,
            "{{Timestamp placeholder}}",
            Text(Now(), DateTimeFormat.LongDateTime24)),
        "{{Signature placeholder}}",
        "<img src=" & JSON(PenInput1.Image, JSONFormat.IncludeBinaryData & JSONFormat.IgnoreUnsupportedTypes) & " />"))

You can now conver the HTML in the variable 'htmlReplaced' to PDF, and it should include the signature.

Notice that data URIs are currently not allowed in the HTML Text control, so you may not be able to see the rendered HTML in the app itself, but if you save that text into a HTML file outside of PowerApps and open it in a browser, you will be able to see the signature.

Hope this helps!

[JuanS]

Hi Carlos,

Thank you for this..

One question...

Where do I put the following code

Set(
    htmlReplaced,
    Substitute(
        Substitute(
            htmlTemplate,
            "{{Timestamp placeholder}}",
            Text(Now(), DateTimeFormat.LongDateTime24)),
        "{{Signature placeholder}}",
        "<img src=" & JSON(PenInput1.Image, JSONFormat.IncludeBinaryData & JSONFormat.IgnoreUnsupportedTypes) & " />"))

[CarlosFigueira]

You would have that code in the control that you use for triggering the HTML-to-PDF logic. For example, in a button's OnSelect property.

[JuanS]

Hi Carlos, My code On Select property is as follows:

Set( htmlReplaced, Substitute( Substitute( htmlTemplate, "{{Timestamp placeholder}}", Text(Now(), DateTimeFormat.LongDateTime24)), "{{Signature placeholder}}", "")) & SavePdf.Run(PDFExport.HtmlText, "JC-" & JobCardNo.Text, eMail.Text)

I however get two errors...

1. name isn't valid. This identifier isn't recognized

Location Test .OnSelect

2. The function 'Substitute' has some invalid arguments

Location Test.OnSelect

[CarlosFigueira]

Do you know which identifier is listed as not recognized? If it's 'htmlTemplate', then you will need to define it in your app. For example, you can have this in the OnStart property of your app:

Set(htmlTemplate, "<h1>Report card</h1>
<p>This is the report card for John Doe</p>
<table border='1'>
    <tr><th>Subject</th><th>T1</th><th>T2</th><th>T3</th><th>T4</th></tr>
    <tr><th>Language</th><th>B-</th><th>A-</th><th>B+</th><th>B</th></tr>
    <tr><th>Math</th><th>A-</th><th>A</th><th>B+</th><th>A-</th></tr>
    <tr><th>Science</th><th>B+</th><th>B</th><th>A-</th><th>C+</th></tr>
</table>
<h2>Signature</h2>
{{Signature placeholder}}
<p>{{Timestamp placeholder}}</p>")

[JuanS]

Hi Carlos, I just cannot seem to get this working...

I have the following 

A screen that captures the signature with a submit button

The submit button has the following code

SavePdf.Run( PDFExport_1.HtmlText, "JC-" & JobCardNo.Text, eMail.Text)

The Savepdf is a flow that looks at the HTML Text and two variables ea. Jobcard number and email address The HTMLText is as follows "

"<!doctype html>
<html>
<body>

<TABLE style=border:" & 0 & " px; Solid Black>
<TR>
<TD>

<table style=border:" & 0 & "px; Solid Black>
<tbody>
<tr>
<th> <font color=white> .......................................................... </th>
<th> </th>
</tr>
<tr>
<td align=" & Right & "> <font color=maroon> Jobcard - <font color=blue> " & JobCardNo.Text & "</td>
</tr>
<tr>
<td align=" & Right & "> Date - " & DateLabel.Text & " </td>
</tr>
</tbody>
</table>
</TD>
</TR>
</TABLE>

<h2> Tech Information</h2>
<table border=" & 1 & "; style=border:" & 1 & " px; Solid Black>
<tbody>
<tr>
<th> <font color=maroon> Tech Name </th>
<th> <font color=maroon> Vehicle Registartion </th>
<th> <font color=maroon> Start Km </th>
<th> <font color=maroon> End Km</th>
<th> <font color=maroon> Start Address </th>
<th> <font color=maroon> Start Time </th>
<th> <font color=maroon> End time </th>
</tr>
<tr>
<td> <font color=Blue> " & TechName.Text & "</td>
<td> <font color=Blue> " & VehicleReg.Selected.Vehicle & "</td>
<td> <font color=Blue> " & StartKm.Text & "</td>
<td> <font color=Blue> " & EndKm.Text & "</td>
<td> <font color=Blue> " & StartAddress.Text & "</td>
<td> <font color=Blue> " & TimeLabel.Text & "</td>
<td> <font color=Blue> " & EndTime.Text & "</td>
</tr>
</tbody>

<h2> Client Information</h2>
<table border=" & 1 & "; style=border:" & 1 & " px; Solid Black>
<tbody>
<tr>
<th> <font color=maroon> Firstname </th>
<th> <font color=maroon> Lastname </th>
<th> <font color=maroon> Contact Number </th>
<th> <font color=maroon> eMail Address </th>
<th> <font color=maroon> Client Address </th>
</tr>
<tr>
<td> <font color=Blue> " & Name.Text & "</td>
<td> <font color=Blue> " & Surname.Text & "</td>
<td> <font color=Blue> " & ContactNo.Text & "</td>
<td> <font color=Blue> " & eMail.Text & "</td>
<td> <font color=Blue> " & Address.Text & "</td>
</tr>
</tbody>
</table>

</TABLE>
</TR>
</TD>

</body>
</html>
"

[CarlosFigueira]

The HTML Text is your "template" HTML, on which you'll need to add the signature. Where does it come from? Or in other words, what is PDFExport_1? How is its HTML Text set? And where do you want to add a signature in that HTML (i.e., before the client information table, after it, somewhere else)?

[JuanS]

Hi,

First of all, thank you very much for your assistance. It is highly appreciated.

The app work as follows:

•Capture all info on separate forms

• take the info and build html code to be passed on to flows to create a html file.

•The html code is created in PDFExport_1

• the signature needs to be added to the end of the html page. The last thing in the page

• I then pass the html code to SavePdf, which is my flow process.

Everything works fine... creating the html and conversation to pdf except I cannot for the life of me get that signature inserted in the html.