Capture A Signature With Power Apps Pen Input And Save To SharePoint

Power Apps is an excellent tool for making apps where a customer can review information on a tablet and provide their signature with a pen. Adding a pen input control to an app is quite easy, but making it look great and getting the signature image stored in SharePoint is tricky. In this article I will show you how to capture a signature using a custom-built pen input control and save the signature image to SharePoint.

Table Of Contents:
Introduction: The Sales Contracts App
Capturing A Signature With Pen Input
Accept And Decline Buttons
Adding Signature and Date Fields
Building A Flow To Save The Signature To SharePoint
Submitting the Signature To SharePoint From Power Apps
Displaying the Signature Image In Power Apps

Introduction: The Sales Contracts App

The Sales Contracts App is used by the salespeople at a lawn-care company to capture the customer’s electronic signature on a sales contract. After the customer signs the contract on a tablet with a stylus the signature is uploaded to SharePoint along with the signature date and other contract details.

Begin by opening Power Apps Studio and creating a new app from blank. Make a title bar as shown in the image below. Then insert a label called lbl_SalesContract with a white background to show the sales contract text. In this example I have used lorem ipsum text as a placeholder until we get the actual contract’s text.

Capturing A Signature With Pen Input

When the customer is ready to sign the contract a large pen input should pop-up onto the screen to capture their signature. Power Apps has pen input control which can accomplish this but it is not very stylish. I will show you how to make a better looking one.

Begin by inserting a label called lbl_Signature_Clickshield that covers the entire screen. Its purpose is to disable other clickable controls when the pen input is showing. Set the Fill property of the label to a transparent gray color with this code.

RGBA(149, 149, 149, 0.4)

The label will look like this.

Next, place a large, white, rectangle-shaped label with called lbl_Signature_Base on top of lbl_Signature_Clickshield. Make it large enough to hold the pen input control where the customer will sign and leave additional space for accept/decline buttons to dismiss the pop-up.

Insert a black label with a height of 2 pixels called lbl_Signature_Line onto the white rectangle to act as the signature line

Now we place a pen input control directly over top of the white rectangle to capture the customer’s signature. Name the pen input pen_Signature_Customer.

The pen input is hiding our other controls so we must make it transparent by updating the following properties.

BorderThickness: 0
Fill: Transparent
ShowControls: false

By making the pen input’s fill transparent and hiding its borders and controls we can now write a signature on the solid black line. Go ahead and give it a try!

Accept And Decline Buttons

Once the customer makes a signature inside the pen input field they will click a button to accept the agreement or a different button to decline. When this happens the pen input area disappears and the signature will show below the contract along with the current date

Place a Check icon onto the bottom-right area of the pen input along and a label with the word “Accept”. Then create a Cancel icon and label with the word “Reject” and place it to the left of the Accept controls as shown in the image below.

Write this code in the OnSelect property of the Check icon and Accept label to hide the signature area once clicked.

Set(varShowSignature, false)

The OnSelect property code of the Cancel icon and Reject label will also do the same thing as well as clear any signature made by the customer.

Set(varShowSignature, false);
Reset(pen_Signature_Customer);

To make the show/hide buttons work write this code in the Visible property…

varShowSignature

…of all the controls that make up the signature area including the Accept and Decline controls.

Adding Signature and Date Fields

The customer’s signature should appear at the bottom of the contract. Insert two new labels: a small white rectangle to show the signature and another positioned above it with the words “Customer Signature”.

Then place an Image control directly over top of the small white rectangle with this code these properties

Image: pen_Signature_Customer.Image
ImagePosition: ImagePosition.Fill
OnSelect: Set(varShowSignature, true)

If you made a test signature before you hid the pen input it will now appear in the box…

…and when you click on the Customer Signature image it will open the pop-up menu to capture a signature.

To show the date the signature was captured place another small white rectangle beside the signature with this code in the Text property. Create a second label above it with the word “Date” and a transparent background.

Today()

The result will look like this.

Building A Flow To Save The Signature To SharePoint

Upon collecting the customer’s signature the salesperson clicks a Submit button and sends the sales contract data to SharePoint including the signature image. To accommodate this we must open SharePoint a new create a list and a new document library.

Create a new SharePoint called Sales Contracts with the following columns

• DocumentText (multi-line text)
• SignatureImageLink (single-line text)
• SignatureDate (date only)
  

Then create a document library called Contract Signatures. No additional fields are required here beyond the default ones.

Since we cannot save a signature to SharePoint by using the PATCH function we must build a Flow to do it instead. Open Power Automate and create a new flow from instant called Sales Contracts – Save A Signature. Select the Power Apps (V2) trigger and click Create.

Make the Flow shown in the image below. An image and the contract text are captured as inputs in the trigger. Then an image file is created in the SharePoint document library and a contract is subsequently added as an item to the Sales Contracts SharePoint list.

The Sharepoint – Create File step uses this flow expression. The rest should be pretty straight-forward.

triggerBody()['file']['name']

Save the Flow and return to Power Apps.

Submitting the Signature To SharePoint From Power Apps

The final step is to create a Submit button to upload the contract signature and other details to SharePoint when clicked. Insert a new button onto the screen with the text “Submit”.

While selected on the Submit button go to the Power Apps top menu click Action, then click Power Automate. Select the Sales Contract – Save A Signature flow to add it to your app.

Add this code to the OnSelect property of the Submit button to convert the Signature image to Base64 text and pass all of the required parameters into the Flow. (Note: lbl_SalesContract is the label holding the text of the contract).

'SalesContracts-SaveASignature'.Run(
     {
         contentBytes: img_Signature.Image,
         name: Concatenate("signature_", Text(Now(), "yyMMddhhmmss"), ".jpg")
     },
     lbl_ServiceAgreement.Text
 )

Click the submit button to run the Flow and save the signature and contract details to SharePoint.

Displaying the Signature Image In Power Apps

As a final tip I will show you how to to display the signature image in your app after it is saved to SharePoint. To do this, place an Image control on the screen and use this code in the Image property where the ID corresponds to the contract you want to show the signature for.

LookUp('Sales Contracts', ID=1, SignatureImageLink)

The signature will appear in your app like this.

Questions?

If you have any questions or feedback about Capture A Signature With Power Apps Pen Input And Save To SharePoint please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.