Document Signing with Power Apps: Capture Pen Signatures and Store Them in SharePoint

When building line‑of‑business applications on tablets, capturing a handwritten signature is often a requirement. The Pen Input control in Power Apps provides a natural drawing surface, but styling it as a popup that overlays your contract text can be tricky. In this guide you'll design a custom signature dialog, wire up Accept and Decline buttons, and store the signed image and date in SharePoint using an automated flow.

Example Scenario: The Property Agreement App

A property management firm uses a canvas app to show rental agreements to prospective tenants. The tenant reviews the contract text on a tablet, signs with a stylus, and the app saves the signature image, the contract text, and the date of signing to SharePoint. The app is built from scratch, starting with a blank canvas in Power Apps Studio.

Add a label to display the agreement text: lbl_AgreementText. Set its background to white, and fill it with placeholder text for now. This label will eventually hold the actual contract.

Building the Signature Capture Interface

Instead of letting the pen input float on the screen, we create a modal popup that only appears when the user clicks a “Sign Here” area. This keeps the interface clean.

The Overlay Layer

Insert a label named lbl_Overlay that covers the whole screen. Its sole purpose is to block interaction with the controls behind it while the signature dialog is visible. Set the Fill property to a semi‑transparent grey:

RGBA(149, 149, 149, 0.4)

The White Card Background

On top of the overlay, place a white label named lbl_SignCard. Make it large enough to contain the pen input and the action buttons. This label acts as the card that will pop up.

The Signature Line

Add a thin black label with height set to 2 pixels (name it lbl_SignLine) horizontally across the card. This visual line gives the user a guide for where to sign.

The Pen Input

Insert a Pen Input control and name it pen_Signature. Position it directly over the white card and signature line. To make it appear invisible except for the ink, set the following properties:

Now the user draws directly on the line, and the pen input is essentially see‑through, showing only the black ink strokes.

Accept / Decline Buttons

Below the pen input, place a Check icon with the text “Accept” and a Cancel icon with the text “Decline”. Name them btn_Accept and btn_Decline.

In the OnSelect of btn_Accept, hide the dialog and store the signature:

Set(varShowDialog, false)

For btn_Decline, we also want to clear the signature:

Set(varShowDialog, false);
Reset(pen_Signature)

Make sure every control that belongs to the dialog (overlay, card, line, pen input, buttons) has its Visible property set to varShowDialog. When the app starts or the dialog is closed, they will all disappear.

To open the dialog, set varShowDialog to true where needed – for example, on the OnSelect of the signature preview image.

Displaying the Captured Signature and Date

After the user accepts, we want to show the signature and date below the contract. Insert an Image control named img_SignaturePreview and set its Image property to:

pen_Signature.Image

Set ImagePosition to Fit so it scales down nicely. Place a label above the preview labelled “Customer Signature”.

Next to the preview, add a label called lbl_SignedDate. Its Text property can be:

Today()

Add a “Date” label above it.

Now, when the user taps the signature preview, the dialog can reappear. Set the OnSelect of img_SignaturePreview to Set(varShowDialog, true).

Saving the Signature to SharePoint with Power Automate

Power Apps cannot directly write an image binary to a SharePoint document library, but a Power Automate flow can. We'll create a flow triggered from Power Apps that receives the signature image as base64, saves it as a JPG file in a document library, and then creates a list item with a link to that file along with the contract text and date.

SharePoint Preparation

Create a SharePoint list named Property Documents with these columns:

Next, create a document library called SignedImages. No extra columns needed.

Flow Design

Inside Power Automate, build an instant flow that uses the Power Apps (V2) trigger. Capture the following inputs from the app:

• signatureImageBase64 (string) – the raw base64 string from the pen input.
• contractText (string) – the text of the agreement.
• imageFileName (string) – a file name, e.g., "signature_" & Text(Now(), "yyMMddhhmmss") & ".jpg".

Add a SharePoint – Create file action targeting the SignedImages library. In the File Content field, use the expression:

dataUriToBinary(triggerBody()['signatureImageBase64'])

Set the File Name to the imageFileName parameter.

After the file is created, we need the URL of the new file. Use the SharePoint – Get file action (or directly use the output of the Create file action). Then add a SharePoint – Create item action on the Property Documents list. Map the fields:

• AgreementText → triggerBody()['contractText']
• SignatureLink → the full URL of the created file (output from Create file action, property {FullPath} or WebUrl + ServerRelativeUrl)
• SignedDate → utcNow('yyyy-MM-dd') or pass from app.

Finally, return a response to Power Apps (optional).

Connecting the Flow in Power Apps

Back in Power Apps, add the flow by going to Action > Power Automate and selecting your flow. In the OnSelect of the Submit button (btn_Submit), call the flow:

SaveAgreementSignature.Run(
  {
      signatureImageBase64: pen_Signature.Image,
      contractText: lbl_AgreementText.Text,
      imageFileName: "signature_" & Text(Now(), "yyMMddhhmmss") & ".jpg"
  }
)

The signature image is automatically returned by the Pen Input control as a base64‑encoded string. The flow will decode it, save the file, and record the details.

Security and Performance Considerations

• Base64 size: A signature drawing can produce a large image string. Be mindful of the Power Automate action size limits (around 100 MB per action). Keep the Pen Input’s Height and Width moderate to avoid oversized payloads.
• Permissions: The flow runs under the account of the user who triggered it (or the connection owner). Plan your SharePoint permissions accordingly.
• Delegation: Not an issue here because we are not querying large data sets from Power Apps; the image is passed as a parameter.
• Reset properly: Always call Reset(pen_Signature) when declining or after successful submission to clear the control for the next signing.

Common Mistakes and Troubleshooting

1. The signature line is not visible Make sure the Pen Input’s Fill is set to Transparent. If you accidentally leave it white, the line and card behind it will be hidden.

2. Accept button does nothing Check that varShowDialog is set to false in the button’s OnSelect. Also verify that all dialog controls have Visible = varShowDialog.

3. Signature image doesn’t appear in the preview The Pen Input’s Image property contains data only after the user draws. To avoid showing an empty preview, set the Image control’s Visible property to a formula like !IsBlank(pen_Signature.Image).

4. Flow fails with “invalid base64” Ensure you are passing the raw base64 string from pen_Signature.Image (it includes the data URI prefix like data:image/png;base64,...). The dataUriToBinary expression in Power Automate handles that prefix correctly.

5. Date is blank Double‑check the Text property of the date label. Using Today() returns a date, but if the label expects text, use Text(Today(), "dd/mm/yyyy").

Final Recommendation

The Pen Input control combined with a transparent popup gives you a clean, professional signature capture experience. By outsourcing the file storage to Power Automate, you avoid the limitations of Patch with image data. Adapt the same pattern for any scenario where a user needs to sign documents on a mobile device or tablet: maintenance orders, delivery confirmations, consent forms, and more.

Keep the user interface simple and the flow robust. Always test on the target device with a touch screen to ensure the ink responds smoothly.

References

• Original article inspiration: Capture A Signature With Power Apps Pen Input And Save To SharePoint – Matthew Devaney
• Microsoft Learn: Pen input control in Power Apps
• Microsoft Learn: Create a flow from Power Apps