Signature Forms App

Ever need to collect & track signed documents from multiple people?

This app demonstrates a set-up where one person can create an event (or grouping), select which document type needs signatures, pre-fill some dynamic inputs (like proposal number or applicant position), add their own signature, & add the emails of each person who needs to sign a copy.

Upon event submission the app creates a new record for each requested signature email & sends a notification to each email with a direct link to their copy to sign. When a requested signature is added & submitted, then the app saves a PDF copy to the app record & to any designated folder in a document library.

Create an event (signatures grouping)

Add event name/date, what folder to additionally save PDF copies to, what form selection/document type, requester signature, recipient emails, and other pre-fill fields

Submit the event & observe where one can track signatures on the right-side of the screen

See the notification with the direct link to the requested signature item

See the requested signature / response details screen that opens up with the pre-filled fields

See where the requester's signature is already on the document & now the recipient has the option to add their digital signature

See how the pen input signature is automatically added directly to the document

On submission the requested signature document with signatures is saved to a PDF where a copy is saved in the document library folder listed for the event & a copy is saved directly in the attachments of the response record.

Set-Up

Go to the bottom of this post & download the SignatureForms_1_0_0_xx.zip file. Go to the Power Apps home page (https://make.powerapps.com/). Select Solutions on the left-side menu, select Import solution, Browse your files & select the SignatureForms_1_0_0_xx.zip file you just downloaded. Then select Next & follow the menu prompts to apply or create the required connections for the solution app & flows.

When you get to the environment variable inputs, open a new browser tab & go to the homepage of the SharePoint site where you want to keep the SharePoint lists related to this application. Copy the site url from that homepage and past it into the SharePointSiteAddress variable. After entering that variable value, select Import.

Once it is imported, find the Signature Forms solution in the list of solutions & click on it to enter the solution. Once in the solution, you should 1st go to edit the Template Signature App Lists flow by clicking the 3 dots next to it & then selecting Edit.

Once in the flow editor, select the Test button and follow the menus to run the flow. 

Once the flow has run and the lists have been created, go back to the tab with the homepage of the site you made them on. Go to Site contents, find & select the SignatureResponses list.

Once at the list, go to the Event column, click the dropdown arrow next to the column name, go to Column settings & select Edit.

Then in the pop-up edit menu, go to More options & under Add additional columns from the source list, check Title, Date, SaveFolderPath, FormSelection, RequesterName, RequesterEmail, & RequesterTitle. Then select Save.

Once that is saved the SharePoint lists for the app should be all set up.

Now select the 3 dots next to Generate Signature PDF flow & go to Details.

On the details screen go to Edit the Run only users.

In the pop-up menu, in the Invite system users or teams search, find a group that contains all the potential users of the app, for example All Users. Then change the OneDrive for Business connector to use a connection from your account, NOT a connection Provided by the run-only user. Select Save. This will allow the flow to use only your OneDrive to create the PDF signature documents instead of using everyone else's.

Also while on this page, make sure the flow is set to On.

After that flow run users set-up, we now need to set the AppURL variable for the other flow so the request signature email notifications include the correct direct links to response records.

Go to the App tab in the solution & on the 3 dots menu on Signature Forms Demo select to Play the app. Once the app starts to load copy the url of the app screen.

Then back in the browser tab with the solution, go to Environment variables, select AppURL, & under current value paste the copied app url. Then save the variable.

Also make sure the Send Sign Request flow is turned On.

After that, go to the Apps solution tab. Select the 3 dots next to the Signature Forms Demo app & select Edit.

Once inside the app editor, go to the Data tab, click Add data, & select Connectors.

Find & select the SharePoint connector. Then select the SharePoint connection you want to use.

A right-side menu should pop up where you can select the site where you created the SharePoint lists with the previous flow. Select that site.

That should then open a list of all the lists on the site. Select the SignatureEvents & SignatureResponses lists you created on the site with the previous flow. Then select Connect.

And now the demo app should be ready for you to explore & use.

App Notes

If you want to understand how a lot of the app works, there are several pieces you may be interested in. Let me note each here.

First, here are the key pieces of the main Events gallery, the Items, All Signed text, & OnSelect properties

Then there is the Event Details screen with the Events form, required fields, SaveFolderPath input, Requester Signature field, Responses gallery, & Submit button.

Notice how the form Item is set by the selection made in the previous Events gallery.
Then the required fields are set by the BorderStyle being set to Solid or to None and the color is set to red. And since the Other Form Fill-Ins may only be required on some Form Selections, their BorderStyle formula also includes whether the field is visible & whether the field is visible is set by the Form Selection.

Next, see the Save Folder Path input. This is how the app can later tell a flow what folder to deposit copies of signed documents to. To get this path when initially creating an event, you or the user can go to the document library with the given folder in it, select the 3 horizontal dots next to the folder, select details, select More details, & then select the Copy icon for the Path. This can then be pasted into the Save Folder Path input on the form.

Next we can go to the Requester Signature input. The base64 text for the signature image created with this input will be saved to a multiline text field on the Events record so all the Signature Response records can reference that base64 singature image to apply the requester's signature image to the HTML near the signature recipient / responder's own signature image indicating that both parties have signed. Then that is how that single HTML document can be passed to a flow to generate a PDF with both parties' signatures. Notice how anytime the Pen Input is selected, it is using the JSON( ) expression with its binary properties to convert the signature image to base 64 & saving the base64 of the signature image to a variable RequesterPenInputSign. Then that RequesterPenInputSign variable is used in the card's Update formula if it is a NewForm / new submission. That is how the signature base64 is saved to the multiline text field.

Next we have the Events Submit button which is a really key part of the app. This is where one finds the logic that saves the Event submission, then for each Recipient Email listed in the RecipientEmails multiline text input, it checks if there is already a Response record created for this recipient for this event & if not then it creates a new Response record for that given email address, linking it to the Event record through a lookup field & through the Event Id number. 

And the way this is set up, if someone forgot to add a recipient when 1st creating the event, they can still come back later, add the recipient email to the RecipientEmails multiline text input, & it will create a new Response record for only that new email address.

Next, see how the right-side Responses gallery lists all the Responses related to this event. And OnSelect will set the appropriate variables & navigate to the Response Details screen so one can view that specific Response record.

Next, note that the Send Sign Request flow is triggered whenever a new Response record is created, so it is triggered whenever the Events Submit button is selected with a new recipient email. This flow takes the app url provided earlier & adds a url parameter with the Response record ID to form a direct link / deep-link going to the exact Response record in the app meant for this recipient.

Notice how the app's StartScreen & OnStart properties are set so if the url includes the Item Id parameter, then it will automatically navigate to the Response Details screen & load the Response record related to that Id.

Alternatively if the link someone selects to get to the app does not include the Item Id parameter, then they will end up on the start screen with the Responses main gallery filtered to just the Response records that required their signatures. And if they select a given gallery item, then the app will set the appropriate Response record & Event record variables so when the app then navigates to the Response Details screen it will load the correct Response record with the correct related Event data.

Once on the Response details screen, notice how the FormHTML input is displaying a different selected form with different fill-in fields depending on the Event record inputs.

Switch(SelectedResponseEvent.FormSelection,

"Conflict Of Interest",
"
<!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. "&SelectedResponseEvent.ProposalNumber&", the undersigned hereby agrees and certifies to the following:	</p>
<p>
1.	I will adhere to ABC Org's <font color=""blue""><a href=""https://www.google.com/"">Standards of Business Conduct</a></font>, in carrying out this 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>
",


"Non-Disclosure",
"
<!DOCTYPE html>
<html>
<body>
<h1>Nondisclosure Agreement</h1>
This Nondisclosure Agreement (the ""Agreement"") is entered into by and between ABC Org with its principal offices at 123 St. Tampa FL 33002 (""Disclosing Party"") and "&UserName&", (""Receiving Party"") for the purpose of preventing the unauthorized use and disclosure of Confidential Information as defined below.
....
....
This Agreement and each party's obligations shall be binding on the representatives, assigns, and successors of such party. Each party has signed this Agreement through its authorized representative.
<br><br>
Disclosing Party
<br>
Digital Signature: "& SelectedResponseEvent.RequesterName & "("&SelectedResponseEvent.RequesterEmail&")" &"<br>
<img width=""250"" src="""& SelectedResponseEvent.RequesterSignatureBase64 &""">
<br>
Title: "& SelectedResponseEvent.RequesterTitle &"
<br>
Dated: "& SelectedResponseEvent.Date &"
<br>
<br>
<br>
Receiving Party
<br>
Digital Signature: " & If(DataCardValue6.Value,UserName&" ("&UserEmail&")") & " <br>
<img width=""250"" src="""& PenInputSign &""">
<br>
Title: " & UserTitle & "
<br>
Dated: " & Today() & "

</body>
</html>
",


"Employment Agreement",
"
<!DOCTYPE html>
<html>
<body>
<h1>Employment Agreement</h1>
<p>This contract, dated on the "&SelectedResponseEvent.Date&", is made between ABC Org and "&UserName&" of "&SelectedResponseEvent.EmployeeState&". This document constitutes an employment agreement between these two parties and is governed by the laws of Florida.<br>
....
....
In witness and agreement whereof, the Employer has executed this contract with due process through the authorization of official company agents and with the consent of the Employee, given here in writing. <br><br>

Employee Digital Signature: " & If(DataCardValue6.Value,UserName&" ("&UserEmail&")") & " <br>
<img width=""250"" src="""& PenInputSign &""">
<br>
Date: "&Today()&"
<br>
<br>
Company Official Digital Signature:	"& SelectedResponseEvent.RequesterName & "("&SelectedResponseEvent.RequesterEmail&")" &"<br>
<img width=""250"" src="""& SelectedResponseEvent.RequesterSignatureBase64 &""">
<br>
Date: "& SelectedResponseEvent.Date &"

</html>
</body>
"

)

Next notice how the Pen Input for the Response signature here has the same logic as the Pen Input on the Events form. Every time the Pen Input is selected it saves the signature image base64 to a variable.

Then in the HTML Text property the logic displays both the saved base64 from the requester signature & the new base64 from the responder's signature in images on the HTML document.

Then there is the submit button which is only in Edit Display Mode if something has been provided in the Pen Input and the Signed input is toggled to Yes.

Then OnSelect of the submit button, it runs the Generate Signature PDF flow before displaying a success message & navigating back to the Responses main gallery (I found if it isn't set to navigate away & come back, then the attachment control doesn't update with the new PDF attachment).

Going over to the Generate Signature PDF flow, we can see those flow parameters used to generate the HTML file in OneDrive & then convert the entire HTML to a PDF with signatures.

Then that PDF file content is added as an attachment to the Responses record. And if there was a SaveFolderPath input for the given Response record, then it uses some expressions to parse out the Site Address & Folder Path from that full folder path so it can deposit a copy of the PDF file content to that folder as well.

And if you would like the output to be a Word .doc file instead of a .pdf file, see this post.

Thanks for any feedback!

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

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