Digital signatures in SAPUI5 using DocuSign and OpenConnectors

[sk_ramkumar]

Digital Signatures in SAPUI5 sounds great, isn't it? By default, DocuSign transactions and workflows are initiated through email. The recipients - known as a remote recipients in this case - use system-generated email links to complete their documents through the DocuSign Website. Using embedded recipients you can let users sign or send documents directly through your UI, avoiding the context-switch to email.

In this tutorial, we will create a simple document in DocuSign and allows users to sign directly through our app by embedding DocuSign platform in SAPUI5 apps for e-Sign.

 

Prerequisites

• SAP Cloud Platform trial tenant


• SAP Cloud Platform Open Connectors trial tenant.


• DocuSign demo account

 

DocuSign API Provider Setup

 

Note: You cannot create an Integrator Key with a regular DocuSign trial account; you must use a developer demo account.

https://account-d.docusign.com/

 

Follow these steps to retrieve your Integrator Key needed to create a DocuSign Connector Instance.

 

1. Logon to DocuSign account.

2.Click your profile in the top right corner and select “Admin”

 



3.Go to “API and Keys” and Click “ADD APP/INTEGRATION KEY”

 



 

4. Add App Name and Click Add. In the next page copy the Integration Key.

5. Please follow the below steps to create DocuSign instance in SAP Cloud.

• 
  
  
  
  • Logon to your SAP Cloud Platform trialand Navigate to the Neo Trial.
  
  
  • From the servicest ab, search and select Open Connectors tile and click on the Go to Service
  
  
  • You would be navigated to SAP Cloud Platform Open Connectors Home or Landing page.
  
  
  • Click on the Connectors tab and search for DocuSign, select the option Authenticate to connect DocuSign.
  
  
  • In the next page, select Authentication Type as “oauth2password”, enter copied Integrator key and your DocuSign Credentials to authenticate the instance.
  
  
  
  

 

 



6. After the authenticated connection to DocuSign application has been created successfully you           would be able to test out the connection from SAP Cloud Platform Open Connectors.

7. Select instances in the menu and click on API Docs.

8. Select “templates”  and click on Try it Out to test the connectivity to third-party applications                 and then click on the Execute Button.

9.  Copy the Authorization token header value and this would be useful in connecting the                        DocuSign API from your Fiori application.

 

Create destination to SAP Cloud Platform Open Connectors

 

• Logon to your SAP Cloud Platform trial and navigate to the Neo Trial.

• Select Destinations tab and then select New Destination to create a new destination to SAP Cloud Platform Open Connectors.

• Enter the destination name say Open Connectors, Enter the URL to SAP Cloud Platform Open Connectors trial tenant

https://api.openconnectors.eu3.ext.hanatrial.ondemand.com/elements/api-v2

 



 

The name of this destination would have to be noted and it would be later used in Fiori application (in neo-app.json) file.

 

Create document template in DocuSign

We have successfully created the DocuSign instance in the SAP Cloud Platform. The next step is to create a template in DocuSign to use in our application.

Please follow the below steps to create a simple template.

1. Log in to DocuSign developer account.

2. Select Manage Templates and Click New to create the template.



3. Enter Role as Signer and Click Next.

 



4. Drag and Drop the Controls in the left side panel to your documents. I have selected Text                    control for my example.



5. Select the Text Field in the document and Enter the value in the Data Label field in the right-              side panel.

Note: This Data Label value is important, as we are going to use this in our UI5 application to              pass the value.



6. Click save and we are good to go.

 

SAPUI5 Application

Embedded Signing - or the Envelope Recipient View - allows users to sign directly through your app or website. When you embed your recipients, you are telling the DocuSign platform your app will generate signing URLs, authenticate your recipients, present the signing request, and re-direct once the transaction is complete.

Embedded signing is two-step process,

Step 1: Send Envelope with Embedded Recipient

Step 2: Generate the Recipient Signing URL

The Payload for Step 1 is,

 

	var templateData = {

				"emailSubject": "DocuSign API DEMO",

				"emailBlurb": "Samplete Template",

				"status": "sent",

				"compositeTemplates": [{

					"serverTemplates": [{

						"sequence": "1",

						"templateId": "your docusign template id"

					}],

					"inlineTemplates": [{

						"sequence": "1",

						"recipients": {

							"signers": [{

								"email": "john@mail.com",

								"name": "John Doe",

								"recipientId": "1",

								"routingOrder": "1",

								"roleName": "Signer",

								"clientUserId": "12345678",

								"tabs": {

									"textTabs": [{

										"tabLabel": "firstName",

										"value": "John"

									}, {

										"tabLabel": "lastName",

										"value": "Doe"

									}, {

										"tabLabel": "phoneNo",

										"value": "22222222"

									}, {

										"tabLabel": "email",

										"value": "john@mail.com"

									}]



								}

							}]

						}

					}]

				}]

			};

jQuery Ajax to get the response from Open Connectors, the -authToken is the one we copied from Open Connectors API Check step.

	var settings = {

				"async": true,

				"crossDomain": true,

				"url": '/docusign/envelopes',

				"method": "POST",

				"data": JSON.stringify(oTemplateData),

				"headers": {

					"Authorization": _authToken,

					"Content-Type": 'multipart/form-data;'

				}

			};

			var deferred = $.Deferred();

			$.ajax(settings).done(function (response) {

				deferred.resolve(response);

			}.bind(this)).fail(function (error) {

				deferred.reject(error);

			}.bind(this));

 

You will get an envelope id in response, use that to generate Recipient Signing URL.

	var data = {

			"authenticationMethod": "None",

			"clientUserId": "12345678",

			"email": "john@mail.com",

			"recipientId": "12345678",

			"returnUrl": returnURL,

			"userName": "John Doe"

			};

			var settings = {

				"async": true,

				"crossDomain": true,

				"url": '/docusign/envelopes/' + envelopId + '/views/recipient',

				"method": "POST",

				"data": JSON.stringify(data),

				"headers": {

					"Content-Type": "application/json",

					"Authorization": _authToken

				}

			};

			var deferred = $.Deferred();

			$.ajax(settings).done(function (response) {

				deferred.resolve(response);

			}.bind(this)).fail(function (error) {

				deferred.reject(error);

			}.bind(this));

			return deferred.promise();

Embed that URL in the HTML control.

	var html = new sap.ui.core.HTML({

	    content: "<iframe width='100%' height='1500px' id='docusign'></iframe>",

		afterRendering: function () {

		var div = document.querySelector("#docusign");

	       div.src = response.url;

	       }

	});

	oForm.addItem(html);

Demo :





 

Now user can sign on the DocuSign interface, once the User click Finish it will redirect to the URL we mentioned in our second Payload.

 

Hope this blog post will help you to integrate DocuSign in your app, let me know if you have any questions.

 

Regards,

Ram