Creating Microsoft PowerApps with Adobe Sign
By: Ben Vanderberg
Tags: Microsoft, Powerapps, Mobile, Adobe Products, Low Code

If you have been paying attention to what Microsoft has been doing with their Power platform in recent years, it is quite impressive. Microsoft PowerApps is a set of tools to allow you to easily create low-code apps within a web browser that allow you to use them on web and mobile. These apps also connect with all of the connectors inside of Microsoft Flow.

So often I see the main reason users haven’t adopted electronic document workflows is because it adds a hassle to their process. If an employee has three or four apps they have to use just to get their job done, adding another is just unacceptable, so they will go with what they know… paper. If only there was a way to connect those different systems while also being able to create solutions to make it paperless.

This is where Microsoft PowerApps and integration with Adobe Sign can enable really easy ways to empower workers on tablets, phones, etc. to create easy interactive forms, capture signatures, and connect with all of your different systems of record.

To help you with this, here is a guide of some of the easy ways to connect your PowerApps to Adobe Sign. For this guide, we will be focusing on using Adobe Sign with a Canvas app. This guide assumes already basic knowledge of creating a new PowerApp, but there are some good guides for that here.

What you need

Microsoft PowerApps Canvas app

Adobe Sign

Connecting to Adobe Sign

First, we need to make sure we can connect our app to Adobe Sign. To do this, we need to add a new connector:

In the Ribbon, go to View > Data Sources. Click on + Add data source. Click on New connection. In the list of connections, select Adobe Sign. Click Create. Log into Adobe Sign using your credentials to connect to Adobe Sign. If you do not have one, you can create a trial here (sign up for Enterprise).

Viewing agreements

Get agreements

Now you have a connection to Adobe Sign, let’s see how we can connect to Adobe Sign to get a list of Agreements.

Create a new Gallery using Insert > Gallery from Ribbon. For this example, we are going to use a Vertical Gallery. Select the new Gallery. Rename it AgreementList. In the Properties panel, go to Advanced section. In the Items field, enter:

AdobeSign.GetAllAgreements().userAgreementList

You will now see that the gallery has been populated with a bunch of records.

We can set the fields for each row reference the data pulled from Adobe Sign. In this example, let’s set a field to the name of the agreement.

Select a field in the row, such as the title field. In the Properties panel, go to Advanced section. In the Text field, enter:

ThisItem.name

It should end up looking something like this:

Here are some of the other fields available:

name string

Name of the agreement

string Name of the agreement status string

Status of the agreement

string Status of the agreement agreementId string

Unique agreement ID for the agreement

string Unique agreement ID for the agreement displayDate date

The display date for the agreement

date The display date for the agreement latestVersionId string

A version ID which uniquely identifies the current version of the agreement

string A version ID which uniquely identifies the current version of the agreement displayUserSetInfos array of DisplayUserSetInfo

The most relevant current user set for the agreement. It is typically the next signer if the agreement is from the current user, or the sender if received from another user

You can see a full list of the documentation here:

https://docs.microsoft.com/en-us/connectors/adobesign/

Viewing agreements

If you want to see a PDF preview of an Adobe Sign agreement from within PowerApps, you can use the PDF viewer. In the example, we are going to leverage the AgreementsList gallery in the previous section and use the selected item to view the agreement.

Insert a PDF Viewer from Insert > Controls > PDF Viewer from the Ribbon. Select the new PDF Viewer control. Rename the control to AgreementViewer. In the Properties panel, switch to Advanced. In the Document field, enter the following:

AdobeSign.GetCombinedDocumentV2(AgreementsList.Selected.agreementId)

Just to understand the call we are making, we are calling Adobe Sign API and requesting the combined PDF. To pass the Agreement ID it needs, we pull it from the selected item in the AgreementList gallery.

Sending agreements

Now that we know how to view agreements, let’s get an idea of how we can send an agreement using Adobe Sign from within PowerApps. In order to do this, let’s create a new Screen.

For this next part, we are going to walk through how we can create a Send Screen.

Prepare your screen

To start, add a text field and label for RecipientName, RecipientEmail, and AgreementName. Rename the fields to these names.

You should get something like this:

Send agreements using PowerApps and Flow

In order to send an agreement from PowerApps, you are going to want to create a Microsoft Flow. While you can technically send one directly calling the CreateAgreement actions from the Adobe Sign connector, however using Flow gives you more flexibility to set conditions, add lookups to other systems, and is a more intuitive UI instead of writing code.

There are a number of ways you can send a document for signature:

Using a URL to a document

Using a Library template in Adobe Sign

Uploading a document from a storage location like SharePoint, BOX, etc. and then sending for signature.

In this example, we are going to send an agreement using a document from a library.

Go to Actions > Flows in the Ribbon. Click on Create a new flow. Rename the Flow to SendForSignature (or anything you like). Click New step. Search for Adobe Sign. Select in the Actions list Create an agreement from a library template and send for signature. Rename the action to SendAgreement. Click into the Agreement Name field. In the Dynamic Content panel, select Ask in PowerApps. In Document Library Template field, select your desired Library Template. If you haven’t uploaded one, you learn how to here. In the Recipient Email field, in the Dynamics Content panel, click Show more and select Ask in PowerApps.

You can also set a number of other settings by clicking on Show Advanced Options.

Finally, it is a good idea to return the agreement ID back to PowerApps so you can use it for reference with other calls.

Click New step. Search for PowerApps. Select PowerApps. Select Respond to PowerApps. Click Add an output. Click Text. Set the title to AgreementID. In the value, select Agreement ID in the Dynamic Content panel. Click Save.

Your workflow should now look something like this.

Finally, we are going to configure our button to send an agreement.

Select your SendForSignature button. Back in PowerApps, go to Action > Flows in the Ribbon. Select your SendForSignature flow. In the OnSelect property, set it to the following:

Set(AgreementID, SendAgreement.Run(AgreementName.Text, Email.Text).agreementid)

What this is doing is calling the Flow and passing the parameters, which are the value in the AgreementName and Email fields, that were specified in the Flow. The agreement ID is returned from the Flow, which we are storing in the AgreementID variable.

You should now be able to preview your PowerApp, enter your agreement name and email, and click your button to send it for signature. You can test it by checking the email you specify in Recipient Email field to see if you received an email.

Getting signing URL

In some scenarios, you may want to actually create an app which allows you to host a signature. Some scenarios might be areas such as signing release forms, model releases, hiring forms, etc.

Adobe Sign for Microsoft Flow connector and PowerApps does not expose the Get Signing URL API. To do this with your app, we are going to have to make a custom HTTP request.

CAUTION AND DISCLAIMER

Some background and little bit of word of caution: Electronic signatures don’t typically work the same way as your conventional wet signatures. To uniquely identify each signer, Adobe Sign uses an email address for the recipient. When you use the signing URL, you are circumventing the first level of identity verification that is built into Adobe Sign, which is to verify that a person receives an email address. However, the audit report will show that this signature was hosted by which user you set to get the signing URL.

One other thing that you can choose to consider is to utilize one of Adobe Sign’s identity verification methods such as password, phone authentication, Social ID (LinkedIn, etc), Government ID, or other types.

Configuring Microsoft Flow

For this, we are going to extend upon the Microsoft Flow that we created in our previous steps.

Open your SendForSignature Flow. At the top of your Flow after the trigger, add an Initialize variable step. Rename it integrationKey and set the following settings:

- Name of Step: integrationKey

- Name: integrationKey

- Type: String

- Value: Create an integration key here. Like this (including Bearer):

Bearer abcdefg1234 Add another Initialize variable step with the following settings:

- Name of Step: statusCode

- Name: statusCode

- Type: Integer

- Value: 404 Add another Initialize variable step with the following settings:

- Name of Step: signingURL

- Name: signingURL

- Type: String

- Value: Add a new step after SendAgreement which is a Do Until step. Set the Do Until step to be the variable statusCode is not equal to 404. Inside of the Do Until step, add an HTTP action with the following settings:

Name of Step: Get Signing URL

Method: GET

URI: https://secure.na1.echosign.com/api/rest/v6/agreements/{agreementID}/signingUrls

Headers: Authorization: Bearer {integrationKey}



In the call settings above, replace {agreementID} with the Agreement ID value that comes from the SendAgreement step. Put your integration key in the value that you set in your previous variable called integrationKey. Now, create a Set Variable action after the HTTP request with the following settings:

Name: errorCode

Value: Status code from HTTP request. In your Respond to PowerApps step, add a new Output with the type Text. Name the field SigningURL. Click into the value field. In the Dynamic Content panel, switch to Expression and set the following expression:

body('Get_Signing_URL')?['signingUrlSetInfos']?[0]?['signingUrls']?[0]?['esignUrl']

What this will do is it gets the Signing URL from the HTTP request for the first signer.

Your Flow should now look like this:

Update PowerApps run request

Now, as the final step, you need to update in PowerApps.

Select your Send for Signature button. In the OnSelect property, change it to:

Set(AgreementID,SendForSignature_1.Run(AgreementName.Text,RecipientEmail.Text).agreementid);

This is setting a variable called AgreementID to be set based on the result of the Flow.

If you want to set it to send the signer to the signing URL, you can set the button to the following:

Set(Agreement,SendForSignature_1.Run(AgreementName.Text,RecipientEmail.Text)); Set(SigningURL,

Storing signed documents after signature

If you want to store your signed documents in SharePoint or another connector, look no further than the Adobe Sign connectors for Microsoft Flow. Here are some of the common templates.

Based on templates, you can actually add to your Flow the trigger and connector to make it look something like this:

Summary

Microsoft PowerApps and Adobe Sign are a powerful combination to enable you to create real productivity apps for your teams without having to depend on expensive development. Once you get started, the possibilities are endless to how you can make daily tasks much faster!

Resources