Add Signatures to HTML and PDFs

takolota · ‎04-18-2024

Ever wanted to let users directly sign a form or PDF in a Power App?

We can directly add a pen input signature image to an HTML display in our Power Apps with some JSON( ) function options. And that means we can pretty simply create HTML forms with dynamic fill-in fields from other parts of our app, sign them, and pass the whole block of filled & signed HTML to a flow to capture everything in a signed PDF file.

Example Set-Up

Example of dynamically filling part of an HTML form HTMLText parameter with references to other parts of an app/data.

Setting up the Pen Input to save the signature image to a variable & register when the Pen Input has been interacted with.

Then setting the Submit button to not be selectable if the Pen Input hasn't been selected at all and setting the screen's OnVisible parameter to reset these signature & selected variables any time the screen opens.

Setting the HTML display & HTMLText parameter to include the signature image directly on the screen using the PenInputSign variable from the preceding steps.

Example HTMLText code used:

"
<!DOCTYPE html>
<html>
<body>
<h1>Confidentiality and Disclosure of Conflict of Interest Certification</h1>
<p>With respect to all proposals submitted in response to request for proposals (RFP) No. " & LookUp(EventsCOI,ID=ThisItem.EventId).NumberRFP & ", the undersigned hereby agrees and certifies to the following:	</p>
<p>
1.	I will adhere to ABC Org's <a href=""https://www.google.com/"">Standards of Business Conduct</a>, in carrying out this evaluation.
<br><br>
2.	I will use the proposal(s) and all information therein, other than information otherwise available without restriction, for evaluation purposes only. I will safeguard the proposal(s) and will not disclose them, or any information contained in them (other than information otherwise available without restriction), except as directed or approved by the Director John Smith of the Global Supply Chain project.
<br><br>
3.	Upon completing the evaluation, I will return all copies of the proposals, and any notes, details, and abstracts thereof, to the project office that initially furnished them to me.
<br><br>
4.	Unless authorized by the Director John Smith of the Global Supply Chain project in advance and in writing I will not—whether before, during, or after the evaluation—contact any prospective offeror, contractor, subcontractor, supplier, or its employees, representatives, or agents concerning any aspect of the proposal.
<br><br>
5.	Project and ABC Org's employees may not ask for or accept (and potential offerors, contractors, subcontractors, suppliers, or their employees, representatives, or agents are prohibited from offering) any money, fee, commission, credit, gift, gratuity, object of value, or compensation to improperly obtain or reward favorable treatment in connection with any evaluation process or award.  I will immediately report any improper request or offer to the Global Supply Chain Director John Smith at jsmith@abc.org.
<br><br>
6.	I reviewed my employment and financial interests, as well as those of my household members. Based on this review, I certify, to the best of my knowledge and belief as of the date indicated below, that either (1) I have no actual or potential conflict of interest, personal or organizational, that could diminish my capacity to perform an impartial and objective evaluation of the proposals, or that might otherwise result in an unfair competitive advantage to one or more prospective offerors, contractors, subcontractors, or suppliers; or (2) I have fully disclosed all such conflicts to the Director of the Global Supply Chain project and will comply fully, subject to termination of my evaluation services, with any instructions by the Director to mitigate, avoid, or neutralize conflicts. I understand that I will also be under a continuing obligation to disclose, and act as instructed concerning, such conflicts discovered at any time prior to the completion of the evaluation.
</p>
<p>
Digital Signature: " & If(DataCardValue6.Value,UserName&" ("&UserEmail&")") & "
<br>
<img width="""&250&""" src="""& PenInputSign &""">
<br>
Printed Name: " & UserName & "
<br>
Title: " & UserTitle & "
<br>
Date: " & Today() & "
</p>
</body>
</html>
"

Setting a flow to run when the Submit button is selected and feeding the entire filled & signed HTML document to the flow as a parameter.

Setting the flow actions to create an HTML file in OneDrive, convert the HTML file to a PDF, attach the PDF to the SharePoint record attachments, then delete the OneDrive HTML file.

By the way, you likely want to go to the Flow details screen, go to the Run Only settings, select a user group that includes all potential app users, & then set the OneDrive actions to occur under your account's connection so the HTML file creation & conversion all happens in your OneDrive & not the users'.

So once you submit in the app, then the attachment should be view-able as a filled & signed PDF.

Here is a full community app sample with a solution package & instructions that includes a more complete app & set of flows for initiating & tracking group signatures on routine documents. It includes automatic notifications requesting signatures from people, the ability to switch requests between different HTML forms / documents, & the ability to have all filled & signed PDF copies automatically saved to any document library folder.

https://powerusers.microsoft.com/t5/Community-App-Samples/Signature-Forms-App/td-p/2732946

Thanks for any feedback,

Reach out on LinkedIn (https://www.linkedin.com/in/kolota/) if you want to hire me to consult or build more custom Microsoft solutions for you.

And subscribe to my YouTube channel for more content (https://youtube.com/@tylerkolota?si=uEGKko1U8D29CJ86).