Digital signature capture - Rishan Solutions

Capturing digital signatures directly within your Power Pages portal allows users to sign forms or documents electronically — useful for contracts, HR forms, consent agreements, and more. Below is a detailed guide to implement this functionality, including integration with Dataverse to store and retrieve the signatures securely.

Step 1: Understand the Objective

We want to:

Embed a signature capture field on a web form
Allow users to draw their signature using a mouse or touchscreen
Save the signature image in Dataverse (as a base64 string or file)
Optionally show the signature later in a read-only format

Step 2: Prerequisites

A Power Pages site
Access to Dataverse
A table (e.g., SignatureForm) where you’ll store the signature
Basic knowledge of JavaScript, HTML, and Liquid for customization

Step 3: Create a Dataverse Table for Storing Signatures

Create a custom table like SignatureForm with the following columns:

Name (Text)
Email (Text)
SignatureImage (Multiline Text or File datatype)

If you want to store the signature as a file (preferred for large or binary data), choose the File datatype.

Step 4: Add a Web Form to Power Pages

Go to Power Pages Studio > Pages > Add New Page or Edit an existing one.

Use the Form component to display the SignatureForm table fields on the page.

Add Name and Email fields, but leave the SignatureImage field hidden from the form (we will use custom HTML for that part).

Step 5: Add Custom Signature Pad HTML

Edit the web page and switch to the HTML component. Paste the following:

<canvas id="signature-pad" width="400" height="200" style="border:1px solid #ccc;"></canvas>
<br/>
<button onclick="clearSignature()">Clear</button>
<input type="hidden" id="signature-data" name="signature-data" />

Step 6: Add Signature Pad Script

Use a popular JavaScript library called Signature Pad. You can load it from CDN:

<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>

<script>
  var canvas = document.getElementById("signature-pad");
  var signaturePad = new SignaturePad(canvas);

  function clearSignature() {
    signaturePad.clear();
  }

  function captureSignature() {
    if (!signaturePad.isEmpty()) {
      var dataURL = signaturePad.toDataURL();
      document.getElementById("signature-data").value = dataURL;
    }
  }
</script>

Step 7: Customize Form Submission

Override the submit button with a JavaScript function that captures the signature and submits it to Dataverse.

You can do this using:

A custom JavaScript-based POST request
Or use Power Automate to push the data (recommended for better integration and error handling)

Step 8: Use Power Automate to Store Signature

Create a Power Automate flow:
- Trigger: When an HTTP request is received
- Actions:
  - Parse JSON from the request (Name, Email, Signature Base64)
  - Create a new row in SignatureForm
  - Store the base64 string into SignatureImage or upload to File column
Copy the HTTP URL from the flow and call it from your portal using JavaScript:

function submitForm() {
  captureSignature();

  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var signatureData = document.getElementById("signature-data").value;

  fetch("YOUR_FLOW_URL", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      name: name,
      email: email,
      signature: signatureData
    })
  }).then(response => {
    alert("Form submitted successfully!");
  });
}

Step 9: Display Signature on a Portal Page

To show the signature later:

<img src="{{record.signatureimage}}" alt="User Signature" style="max-width:400px;" />

Or, if stored as a File, use the download link functionality from Power Pages.

Step 10: Secure Access and Permissions

Make sure:

Table permissions are properly set up for the SignatureForm table
Only authenticated users (or specific Web Roles) can view and submit
Use CAPTCHA or throttling to avoid abuse