Salesforce DocuSign Step- by-Step Custom Implementation
Hello Friends, my name is Smriti Sharan. I am an avid blogger and YouTuber. I break down complex concepts with fun relatable real-time examples so that learning is fun. Wow!!!
Today I will cover ‘Salesforce DocuSign Step by Step Custom Implementation’. A Topic Never Covered Before!
Topic Covered
- Why do we use custom logic to implement DocuSign?
- Use Cases for DocuSign custom implementation.
- User Journey Diagram for each use case
- Screenshots for Each Use Case
- Code Snippet and Explanation
- FAQs
In the last blog, I covered ‘Salesforce DocuSign Step by Step Implementation’. Standard DocuSign is only limited to Standard Salesforce record pages. If we want to add DocuSign into custom Component like LWC or Aura, then we need to create custom logic for the purpose of e-Signature.
Use Case 1
If I want to e-sign a document attached within a record from Salesforce itself in this scenario for the logged in user, embedded session will be generated to e-sign the document by launching DocuSign from Salesforce. 
Inside Portal if the customer or partner user wants to e-sign the document then this use case is suitable.
Use Case 1 Screenshot
Go to lead record and click on Embedded Signing Button
Click of Button will redirect to e-Signature Document within Salesforce. This functionality is also called Embedded Signing.
Drag and Drop the Signature on to the document. Signature will show based on name of owner of Lead.
Apex Class – EmbeddedSigningController
public class EmbeddedSigningController {
@AuraEnabled
public static String sendEnvelope(String template, String description, Id recordzId) {
Id mySourceId = recordId; // The ID of the initiating Salesforce object
// Create an empty envelope and add a Salesforce Document and embedded signer recipient
// The embedded signer will be the current user with sequence and routing order 1 and role "Signer 1" by default
dfsle.Envelope dsEnvelope = dfsle.EnvelopeService.getEmptyEnvelope(
new dfsle.Entity(mySourceId)) // The initiating Salesforce entity--current SF user (salesperson)
.withDocuments(new List<dfsle.Document> {
dfsle.Document.fromTemplate(dfsle.UUID.parse(template), description)
})
.withRecipients(new List<dfsle.Recipient> {
dfsle.Recipient.newEmbeddedSigner() // An embedded signer
}
);
// Send the envelope.
dsEnvelope = dfsle.EnvelopeService.sendEnvelope(
dsEnvelope, // The envelope to send
true // Send now?
);
// Return string value of DocuSign envelope ID
return String.valueOf(dsEnvelope.docuSignId);
}
@AuraEnabled
public static String getEmbeddedSigningUrl(String envId, String url) {
Url mySigningUrl = dfsle.SigningService.getEmbeddedSigningUrl(
dfsle.UUID.parse(envId), // envId value as a UUID
new URL(url) // url value as a URL
);
// Return string value of Url to controller
return mySigningUrl.toExternalForm();
}
}
LWC Component
embeddedSigningComponent.html
<template>
<div id ='buttonpannel'>
<lightning-button label="Embedded Signing" title="Start embedded signing session" onclick={handleClick}></lightning-button>
</div>
</template>
EmbeddedSigningComponent.js
import { LightningElement, api } from 'lwc';
import sendEnvelope from '@salesforce/apex/EmbeddedSigningController.sendEnvelope';
import getEmbeddedSigningUrl from '@salesforce/apex/EmbeddedSigningController.getEmbeddedSigningUrl';
export default class EmbeddedSigningComponent extends LightningElement {
template = '86d4de55-8568-4738-9950-xxxxxxxxxxxxx';
templateId = '86d4de55-8568-4738-9950-xxxxxxxxxxxx';
description = 'Embedded Signing';
msg;
@api recordId;
handleClick() {
sendEnvelope({template: this.template, description: this.description, recordId: this.recordId})
.then((envelopeId) => (
getEmbeddedSigningUrl({
envId: envelopeId,
url: window.location.href
})
))
.then((signingUrl) => {
window.location.href = signingUrl;
})
.catch((error) => {
console.log('Error:');
console.log(error);
});
}
}
Use Case 2
If I want to send document to an end user (like customer or partner or internal user) over email (email can be attached to
any field to associated object) and the end user will review document over email and send it back after e-signing.
The second use case is more relevant for sending Quotes to end users so that can sign after receiving the document by email.
Use Case 2 Screenshot
Put email in the Lead record to which you want to send the DocuSign Document
Click on ‘Send Envelope’ Button
User will receive email.
Click on Review Document
Drag and Drop E-Signature. Whatever is Lead Name which comes in signature. Like below comes ‘Test145’ as that is lead name
In the lead record. In the File Related List, you will see two documents.
If we click on First Document. This Document is signed Document by user attached to lead record.
The second document attached is ‘Certificate of Completion’ by DocuSign.
Apex Class – SendEnvelope
public class SendEnvelope {
@AuraEnabled
public static String sendEnvelopeMethod(String templateId, String description, Id recordId){
// Create an empty envelope
dfsle.Envelope myEnvelope = dfsle.EnvelopeService.getEmptyEnvelope(
new dfsle.Entity(recordId));
// The initiating Salesforce entity
// We will use a Salesforce contact record as a Recipient here
Lead myLead= [SELECT Id, Name, Email FROM Lead where Id=:recordId];
//use the Recipient.fromSource method to create the Recipient
dfsle.Recipient myRecipient = dfsle.Recipient.fromSource(
myLead.Name, // Recipient name
myLead.Email, // Recipient email
null, // Optional phone number
'Signer 1', // Role Name. Specify the exact role name from template
new dfsle.Entity(myLead.Id)); // Source object for the recipient
// Add a recipient to the envelope
myEnvelope = myEnvelope.withRecipients(new List<dfsle.Recipient> { myRecipient });
// myTemplateId contains the DocuSign Id of the DocuSign Template
//dfsle.UUID myTemplateId = dfsle.UUID.parse(templateId);
// create a new document for the Envelope
dfsle.Document myDocument = dfsle.Document.fromTemplate(
dfsle.UUID.parse(templateId), // Template Id in dfsle.UUID format
'myTemplate'); // Name of the template
//add document to the envelope
myEnvelope = myEnvelope.withDocuments(new List<dfsle.Document> { myDocument });
// Send the envelope
myEnvelope = dfsle.EnvelopeService.sendEnvelope(
myEnvelope, // The envelope to send
true); // True to send the envelope now
// Return string value of DocuSign envelope ID
return String.valueOf(myEnvelope.docuSignId);
}
}
LWC Component
emailSigningComponent.html
<template>
<div id ='buttonpannel'>
<lightning-button label="send Envelope" title="Start Sending Envelope" onclick={sendEnvelope}></lightning-button>
</div>
</template>
emailSigningComponent.js
import { LightningElement, api } from 'lwc';
import sendEnvelopeMethod from '@salesforce/apex/SendEnvelope.sendEnvelopeMethod';
export default class EmailSigningComponent extends LightningElement {
template = '86d4de55-8568-4738-9950-c71d7d938fb3';
templateId = '86d4de55-8568-4738-9950-c71d7d938fb3';
description = 'Embedded Signing';
msg;
@api recordId;
sendEnvelope() {
sendEnvelopeMethod({templateId: this.templateId, description: this.description, recordId: this.recordId})
.then((envelopeId) => {
this.msg='Sucess:';
console.log('Sucess:');
})
.catch((error) => {
console.log('Error:');
this.msg='Error:';
console.log(error);
});
}
}
FAQ
What is Embedded Signing?
Launching DocuSign Session inside Salesforce only so users can sign inside Salesforce itself.
Reference
Embedded Signing with Apex Toolkit
You Can connect with me on:
Subscribe to my YouTube Channel
I really got into this article. I found it to be interesting and loaded with unique points of interest. I like to read material that makes me think. Thank you for writing this great content.