cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
takolota
Multi Super User
2 weeks ago

Add Signatures to HTML and PDFs

takolota_0-1713472675708.png

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.

SignHTML.png

AfterFlowSignPDF.png

 

 

Example Set-Up

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

DynamicFillHTML.png

 

 

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.

PenInputOnSelect.png

SubmitDisplayMode.pngScreenOnVisibleResetVars.png

 

 

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

HTMLSignImgCode.png

 

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.

RunFlowPassHTML.png

 

 

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.

FlowHTMLFileConvertPDF.png

 

FlowAddAttach.png

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'.

OneDriveSetRunOnlyUsers.png

 

 

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

AfterFlowSignDetails.png

 

AfterFlowSignPDF.png

 

 

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).