Skip to Content
Technical Articles
Author's profile photo Ramkumar Krishnasamy

Digital signatures in SAPUI5 using DocuSign and OpenConnectors

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

 

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

 

  • 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

Assigned Tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Nicolas Cabral
      Nicolas Cabral

      Hi Ramkumar,

      Thanks for the useful blog.

      One question, this Integration service allows me to comunicate SAP with Adobe right?

      Thanks in advance,

      Author's profile photo Ramkumar Krishnasamy
      Ramkumar Krishnasamy
      Blog Post Author

      Hi Nicolas,

       

      Yes, you can communicate with Adobe as well.

       

      Cheers,

      Ram

      Author's profile photo Prabaharan Asokan
      Prabaharan Asokan

      Hi Ramkumar,

      Great blog and thanks for the details.

      It will be great if you can also demonstrate how to get this integrated into SAP using Adobe forms.

       

      Regards

      Prabaharan

      Author's profile photo Former Member
      Former Member

      Hi Ramkumar,

      I can’t find in Open Connectors this API

      /docusign/envelopes/' + envelopId + '/views/recipient',

      maybe API endpoints has been changed,

      could you please help me to find another way to make this works?

       

      Thanks, Riccardo

      Author's profile photo Ramkumar Krishnasamy
      Ramkumar Krishnasamy
      Blog Post Author

      Hi Riccardo,

       

      Yes by default we don’t have an end point for

       

      /docusign/envelopes/' + envelopId + '/views/recipient',

      but we can create one,

      Go to Resources tab and Click Add a new end point,

       

      provide the following details and click save.

       

      Regards,

      Ram

      Author's profile photo Former Member
      Former Member

      Thank you Ramkumar!

       

      It worked 🙂

       

      Riccardo

      Author's profile photo Mariajose Martinez
      Mariajose Martinez

      Hi Ramkumar !

      Could you please share your UI5 project via github? it would be so much easier to understand also the UI5 project.

      Thanks for this awesome blog!

      Author's profile photo DAVIDE BRAMATI
      DAVIDE BRAMATI

      Hello Ramkumar,

      Thank you for the blog, it's very interesting!

      It would be great if you could share the SAPUI5 project.

      Best Regards

      Davide

      Author's profile photo marcos mendes
      marcos mendes

      Hi Rambumar!!!

      Thanks a bunch for the details!!! it's very usefull!

      I would like to know, if is possible to configurate using SAP PO 7.5?

      Do you have any idea how can i do it?

       

      Best Regards

      Marcos Mendes

      Author's profile photo Virendra Kumar Soni
      Virendra Kumar Soni

      HI RamKumar ,

      while calling DocuSign i m getting below  error

      {"requestId":"60124890e4b0ce361c884474","message":"Unable to parse multipart body"}

       

      its working fine SAP open connector but in SAP UI5 project i am getting error.

      Payload:

       

      var templateData = {
      "emailSubject": "Please sign this",
      "emailBlurb": "Please sign...thanks!",
      "templateId": "90aa1a9b-7f79-473c-afff-08d1080ed936",
      "envelopeIdStamping": "false",
      "templateRoles": [{
      "roleName": "Signer1",
      "name": "John Doe",
      "email": "xys@gmail.com",
      "recipientId": "1",
      "tabs": {
      "textTabs": [{
      "tabLabel": "firstName",
      "value": "John"
      }, {
      "tabLabel": "lastName",
      "value": "Doe"
      }, {
      "tabLabel": "phoneNo",
      "value": "22222222"
      }, {
      "tabLabel": "email",
      "value": "xyz@gmail.com"
      }]
      }
      }],
      "status": "sent"
      };

       

       

      Kindly Help

      Author's profile photo Kajal .
      Kajal .

      Hey Ramkumar Krishnasamy!

      Excellent blog!

      Could you please share your UI5 project via github? It would be so much easier to understand also the UI5 project.

      Thankyou!