Integrate eSignature with Power Pages

Use case: A user submits an application via the Power Pages website. We need the User’s electronic signature on the issued card. Our organisation uses DocuSign to digitally sign documents.

Lucky us, Power Pages integrates with DocuSign out-of-the-box!

Before you start, in the documentation, on the video and everywhere they tell you it’s only supported for the standard data model. IT’S NOT TRUE! It works for both.

Otherwise, there are two main references for you to set up the integration:

https://learn.microsoft.com/en-us/power-pages/admin/set-up-docusign-integration

Also, there is a playlist from DocuSign here:

https://dsucustomers.docusign.com/video-playlist-docusign-integrations-microsoft

Now, what’s missing (apart from the doco data model “important message” screw-up)?

The main missing thing for me was understanding what’s inside the Microsoft OOTB integration solution and how it works.

I thought the diagram would fill in my gaps but unfortunately, it didn’t help either.

The main reason it didn’t help was that I didn’t have much knowledge about DocuSign integration until now. How did I fix that?

Let’s make sure we understand the dictionary first!

In DocuSign, an envelope is a digital container used to send documents for electronic signatures. Think of it like a physical envelope that you would use to mail documents, but in a digital format. Here are some key points about DocuSign envelopes:

• Document Container: An envelope can contain one or multiple documents that need to be signed.
• Recipient Information: It holds details about the recipients, including their email addresses and the order in which they need to sign.
• Fields and Tabs: Envelopes include the fields or tabs where recipients need to sign, initial, or provide other information.
• Status Tracking: Envelopes have statuses such as sent, delivered, completed, or voided, allowing you to track the progress of the signing process.
• Audit Trail: Each envelope generates a Certificate of Completion, which provides a full audit history of the transaction.

This system ensures that all necessary documents are securely sent, signed, and tracked efficiently.

In DocuSign, tabs (also known as fields or tags) are interactive elements placed within a document to guide recipients on where to sign, initial, or provide other required information. These tabs ensure that all necessary actions are completed accurately. Here are some common types of tabs:

1. Signature Tabs: Indicate where the recipient needs to sign.
2. Initial Here Tabs: Specify where the recipient should initial.
3. Date Signed Tabs: Automatically populate with the date the document is signed.
4. Text Tabs: Allow recipients to enter text, such as their name or address.
5. Checkbox Tabs: Enable recipients to select options by checking boxes.
6. Radio Button Tabs: Allow recipients to select one option from a group.
7. Number Tabs: Let recipients enter numerical values.
8. Full Name Tabs: Automatically fill with the recipient’s full name.

These tabs help streamline the document signing process by ensuring all necessary information is collected accurately and efficiently.

Now when we learn new words, we can move a bit further.

The last thing before we get to “how it all works together” is the main components, everything, you can find in the Power Pages DocuSign Integration solution installed by the integration setup.

How it works and what are the main parts (high-level)

In DocuSign, we have a template with tabs we choose to create.

These tabs will be populated with the user application data as defined in the mapping we set up for the related template:

I haven’t tried multiple templates. Yet. It can be done, apparently.

On the Power Pages website, a user fills in a multistep application form.

In the last step, the DocuSign document template is displayed to the user with the available action to View and Sign.

The template grid on the Sign Off step is a PCF control.

Also, we have JavaScript on the Sign Off step. There are API calls to DocuSign via the Power Pages API. In case we need to debug/triage something.

The template is configured for the step here:

The user clicks View and Sign.

The Power Automate flow is triggered. The one I highlighted.

An envelope is created, and DocuSign template tabs are updated with the user information from the application. Using the mapping we described above.

If you haven’t created the mapping the Flow will fail. It’s not required but it is.To fix it, remove the empty record from the DocuSign Tabs table.

The envelope gets sent.

The content is displayed to the user via the Embedded Signing URL which is generated by the Flow and returned to Power Pages.

The user signs the document.

The second flow is triggered to update the record status in the Dataverse for the DocuSign Outputs table when the DocuSign envelope status is updated.

As I mentioned, you can find it all in the Power Pages DocuSign Integration solution.

There are 3 tables in the solution:

These are config tables. I had to fix one of the automation by removing a broken record.

It’s good to know you can do this.

We are still investigating the integration. By breaking everything and trying to repair.

I will follow up with another blog post on the same topic as I discover more useful information.

As always, thank you very much to Nick Doelman(https://www.linkedin.com/in/nickdoelman) and a special Thank you to Artur Tkachenko(https://www.linkedin.com/in/artur-tkachenko-ab604399/) for setting it all up and helping me in thinking!

TO BE CONTINUED…

Original Post https://msolenacrm.blog/2024/10/09/integrate-esignature-with-power-pages/