E sign Implementation in Power Pages - Power Platform

                                                                                        

Integrating E-Signatures in Power Pages and Displaying Them in Model-Driven App Forms

Capturing and displaying electronic signatures (e-signatures) within Microsoft Power Pages and Model-Driven Apps improves digital workflows and enhances compliance. This guide walks you through how to implement an e-signature pad in Power Pages and view the signature in both Power Pages and Model-Driven App forms.

---

Overview

We'll cover:

• Setting up a Dataverse field for storing signatures.
• Adding the signature pad to Power Pages forms.
• Capturing and saving e-signatures.
• Displaying the signature in both read-only views and Model-Driven App forms.

---

 Step 1: Create a Field to Store the Signature

In Dataverse:

1. Go to Dataverse > Tables and open the table where you want to store the signature.
2. Add a new field: ( test_fieldlogicalname)
• Data Type: Multiline Text
• Max Length: 20,000 characters
3. Add this field to the form used in Power Pages.

---

 Step 2: Add Signature Pad Library in Power Pages

To capture e-signatures, include the following libraries in your Power Pages form.

Add Libraries:

In XRM Toolbox  > Portal Code Editor:

• Load Items from the left-hand menu
• Go to Web Pages > select the page

·        Add this to the HTML section:

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Use the same above method for single-step or multi-step forms.

---

Step 3: Implement Signature Pad Script

In the JavaScript section in Portal Code Editor, insert the following:

var signaturePad;

function resizeCanvas() {

    let canvas = document.getElementById("SignatureCanvas");

    let ratio = Math.max(window.devicePixelRatio || 1, 1);

    canvas.width = canvas.offsetWidth * ratio;

    canvas.height = canvas.offsetHeight * ratio;

    canvas.getContext("2d").scale(ratio, ratio);

    signaturePad.clear();

}

 

window.addEventListener("resize", resizeCanvas);

 

$(document).ready(function () {

    let signatureTextFieldName = " test_fieldlogicalname ";

 

    let canvas = document.createElement("canvas");

    canvas.id = "SignatureCanvas";

    canvas.style.width = "100%";

    canvas.style.border = "1px solid";

 

    let clearBtn = $("<button>", { text: "Clear", type: "button" }).click(() => {

        signaturePad.clear();

        $("#" + signatureTextFieldName).val("");

    });

 

    let saveBtn = $("<button>", { text: "Save", type: "button" }).click(() => {

        if (!signaturePad.isEmpty()) {

            let dataURL = signaturePad.toDataURL();

            $("#" + signatureTextFieldName).val(dataURL);

        }

    });

 

    let signatureContainer = $("<div>").append(canvas, clearBtn, saveBtn);

    $("#" + signatureTextFieldName).parent().after(signatureContainer).hide();

 

    signaturePad = new SignaturePad(canvas, {

        onEnd: () => $("#" + signatureTextFieldName).val(signaturePad.toDataURL())

    });

 

    resizeCanvas();

});

Replace “signatureTextFieldName = "cdph_requestersignature"; “ with you fields’s logical name

 In power pages it look like the image given below.

---

---

Step 4: View Signatures in Read-Only Power Pages Form

1. Create a read-only basic form in Portal Management Studio
   
   
   
   
   
   
   
2. In the custom JavaScript section(basic form), insert:

$(document).ready(function () {

    let fieldName = " test_fieldlogicalname";

    let img = document.createElement("img");

    img.style.width = "100%";

    img.style.border = "1px solid";

    img.src = $("#" + fieldName).val();

 

    $("#" + fieldName).parent().after(img).hide();

});

---

 Step 5: Display E-Signatures in Model-Driven App Forms

 There are two ways:

1. OOB Component

We can add a component named “Pen input” for the field we created for sign(test_fieldlogicalname) in the form as Multi-Line Text. Then the submitted sign will show here.

2. Create a custom HTML place holder for showing sign:

<!DOCTYPE html>

<html>

<head>

    <script src="ClientGlobalContext.js.aspx" type="text/javascript"></script>

    <script>

        function previewImage(base64Data) {

            var img = document.createElement('img');

            img.src = base64Data;

            document.body.appendChild(img);

        }

 

        function retrieveAndPreviewImage() {

            var fieldName = "test_fieldlogicalname";

            var fieldValue = Xrm.Page.getAttribute(fieldName).getValue();

 

            if (fieldValue) {

                previewImage(fieldValue);

            }

        }

 

        window.onload = retrieveAndPreviewImage;

    </script>

</head>

<body></body>

</html>

Upload the Web Resource:

1. Go to Solutions > Web Resources.
2. Create a new web resource with the HTML file.
3. Save and publish.

Add It to a Form:

1. In the form editor, add a Web Resource control.
2. Select the created HTML file.
3. Place it where the signature should appear.

 Example: