DocuSign Custom Button

  • 1
  • Question
  • Updated 3 years ago
  • Answered
We utilize DocuSign for electronic signature of our financial agreements.

We added the External Resource of /apex/dsfs__DocuSign_JavaScript.

We created an in-line snippet with the code below and created a button with the action of Run Skuid Snippet and related it to the created snippet.

Each time I select the button from the preview it throws an error that the ID is not set correctly "SourceID={{Financial__c.Id}}"

Has anyone successfully added a custom Send With DocuSign button to their Skuid page? 
Any suggestions on how to properly merge fields into this code?  

The snippet code is listed below.

//********* Option Declarations (Do not modify )*********// var RC = '';var RSL='';var RSRO='';var RROS='';var CCRM='';var CCTM='';var CCNM='';var CRCL=''; var CRL='';var OCO='';var DST='';var LA='';var CEM='';var CES='';var STB='1';var SSB='1';var SES='';var SEM='';var SRS='';var SCS ='';var RES=''; 
//*************************************************// 

var CEM="This is the Email Body."; 
var CES='This is the Email Subject; 
var DST = 'FC718430-C654-49B9-A3CF-92ADC1BCAF28'; 
var CRL = 'FirstName~{{Financial__cForm_Signer_First_Name__c}};LastName~{{Financial__cForm_Signer_Last_Name__c}};Email~{{Financial__cForm_Signer_Email__c}};Role~Customer;RoutingOrder~1'; 

//********* Page Callout (Do not modify) *********// 
window.location.href ="/apex/dsfs__DocuSign_CreateEnvelope?DSEID=0&SourceID={{Financial__c.Id}}&RC="+RC+"&RSL="+RSL+"&RSRO="+RSRO+"&RROS="+RROS+"&CCRM="+CCRM+"&CCTM="+CCTM+"&CRCL="+CRCL+"&CRL="+CRL+"&OCO="+OCO+"&DST="+DST+"&CCNM="+CCNM+"&LA="+LA+"&CEM="+CEM+"&CES="+CES+"&SRS="+SRS+"&STB="+STB+"&SSB="+SSB+"&SES="+SES+"&SEM="+SEM+"&SRS="+SRS+"&SCS="+SCS+"&RES="+RES;
//*******************************************//
Photo of Chad

Chad

  • 210 Points 100 badge 2x thumb

Posted 3 years ago

  • 1
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
You can't really use the {{VARIABLE}} syntax inside of a snippet, you have to get a reference to a specific row. Once you have a reference to the row, you can access the fields using row.API_Name__c. Your snippet should probably look more like this:

var params = arguments[0],
    $ = skuid.$;
//********* Option Declarations (Do not modify )*********//  var RC = '';var RSL='';var RSRO='';var RROS='';var CCRM='';var CCTM='';var CCNM='';var CRCL=''; var CRL='';var OCO='';var DST='';var LA='';var CEM='';var CES='';var STB='1';var SSB='1';var SES='';var SEM='';var SRS='';var SCS ='';var RES=''; 
//*************************************************// 
var CEM="This is the Email Body."; 
var CES='This is the Email Subject; 
var DST = 'FC718430-C654-49B9-A3CF-92ADC1BCAF28';
var row = params.row || params.model.getFirstRow();
var CRL = 'FirstName~' + row.Financial__cForm_Signer_First_Name__c + ';LastName~' + row.Financial__cForm_Signer_Last_Name__c + ';Email~' + row.Financial__cForm_Signer_Email__c + ';Role~Customer;RoutingOrder~1'; 
//********* Page Callout (Do not modify) *********// 
window.location.href ="/apex/dsfs__DocuSign_CreateEnvelope?DSEID=0&SourceID=" + row.Financial__c.Id + "&RC="+RC+"&RSL="+RSL+"&RSRO="+RSRO+"&RROS="+RROS+"&CCRM="+CCRM+"&CCTM="+CCTM+"&CRCL="+CRCL+"&CRL="+CRL+"&OCO="+OCO+"&DST="+DST+"&CCNM="+CCNM+"&LA="+LA+"&CEM="+CEM+"&CES="+CES+"&SRS="+SRS+"&STB="+STB+"&SSB="+SSB+"&SES="+SES+"&SEM="+SEM+"&SRS="+SRS+"&SCS="+SCS+"&RES="+RES;
(Edited)
Photo of Chad

Chad

  • 210 Points 100 badge 2x thumb
Thanks so much Moshe! Good start..

I'm sorry I'm such a novice with this, but now that I have added this code to the snippet it does nothing on click. (No page load, no redirect)

The code:

var params = arguments[0],   
$ = skuid.$;
//********* Option Declarations (Do not modify )*********// 
var RC = '';var RSL='';var RSRO='';var RROS='';var CCRM='';var CCTM='';var CCNM='';var CRCL=''; var CRL='';var OCO='';var DST='';var LA='';var CEM='';var CES='';var STB='1';var SSB='1';var SES='';var SEM='';var SRS='';var SCS ='';var RES=''; 
//*************************************************// 
var CEM="This is the Email Body."; 
var CES='This is the Email Subject'; 
var DST = 'FC718430-C654-49B9-A3CF-92ADC1BCAF28';
var row = params.row || params.model.getFirstRow();
var CRL = 'FirstName~' + row.Financial__c.Form_Signer_First_Name__c + ';LastName~' + row.Financial__c.Form_Signer_Last_Name__c + ';Email~' + row.Financial__cForm_Signer_Email__c + ';Role~Customer;RoutingOrder~1'; 
//********* Page Callout (Do not modify) *********// 
window.location.href ="/apex/dsfs__DocuSign_CreateEnvelope?DSEID=0&SourceID=" + row.Financial__c.Id + "&RC="+RC+"&RSL="+RSL+"&RSRO="+RSRO+"&RROS="+RROS+"&CCRM="+CCRM+"&CCTM="+CCTM+"&CRCL="+CRCL+"&CRL="+CRL+"&OCO="+OCO+"&DST="+DST+"&CCNM="+CCNM+"&LA="+LA+"&CEM="+CEM+"&CES="+CES+"&SRS="+SRS+"&STB="+STB+"&SSB="+SSB+"&SES="+SES+"&SEM="+SEM+"&SRS="+SRS+"&SCS="+SCS+"&RES="+RES;
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
OK that's fine. The console will be your friend here... try Ctrl + Shift + J in chrome, see what errors you have in the Javascript console and paste them here. 

Without any knowledge of you're page or objects, I can only assume what field names are correct. I have a hunch that Financial__c should be replaced with Financial__r, so try this:

var params = arguments[0],    
$ = skuid.$;
//********* Option Declarations (Do not modify )*********// 
var RC = '';var RSL='';var RSRO='';var RROS='';var CCRM='';var CCTM='';var CCNM='';var CRCL=''; var CRL='';var OCO='';var DST='';var LA='';var CEM='';var CES='';var STB='1';var SSB='1';var SES='';var SEM='';var SRS='';var SCS ='';var RES=''; 
//*************************************************// 
var CEM="This is the Email Body."; 
var CES='This is the Email Subject'; 
var DST = 'FC718430-C654-49B9-A3CF-92ADC1BCAF28';
var row = params.row || params.model.getFirstRow();
var CRL = 'FirstName~' + row.Financial__r.Form_Signer_First_Name__c + ';LastName~' + row.Financial__r.Form_Signer_Last_Name__c + ';Email~' + row.Financial__r.Form_Signer_Email__c + ';Role~Customer;RoutingOrder~1'; 
//********* Page Callout (Do not modify) *********// 
window.location.href ="/apex/dsfs__DocuSign_CreateEnvelope?DSEID=0&SourceID=" + row.Financial__r.Id + "&RC="+RC+"&RSL="+RSL+"&RSRO="+RSRO+"&RROS="+RROS+"&CCRM="+CCRM+"&CCTM="+CCTM+"&CRCL="+CRCL+"&CRL="+CRL+"&OCO="+OCO+"&DST="+DST+"&CCNM="+CCNM+"&LA="+LA+"&CEM="+CEM+"&CES="+CES+"&SRS="+SRS+"&STB="+STB+"&SSB="+SSB+"&SES="+SES+"&SEM="+SEM+"&SRS="+SRS+"&SCS="+SCS+"&RES="+RES;
Photo of Chad

Chad

  • 210 Points 100 badge 2x thumb
I changed the fields to "__r" and am getting this error: "Cannot read property 'Form_Signer_First_Name__r' of undefined".

I receive this same error when the fields are "__c".

The fields are correct (as this code is copied directly from the code used in production within the On Click JavaScript button).

This snippet is running on a record detail Skuid page. The button is a Financial custom record. The record loads appropriately, only error is on click of the button, and the error is only seen within the console.

Thanks again!
(Edited)
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
Try this :

var params = arguments[0],    $ = skuid.$;
//********* Option Declarations (Do not modify )*********// 
var RC = '';var RSL='';var RSRO='';var RROS='';var CCRM='';var CCTM='';var CCNM='';var CRCL=''; var CRL='';var OCO='';var DST='';var LA='';var CEM='';var CES='';var STB='1';var SSB='1';var SES='';var SEM='';var SRS='';var SCS ='';var RES=''; 
//*************************************************// 
var CEM="This is the Email Body."; 
var CES='This is the Email Subject'; 
var DST = 'FC718430-C654-49B9-A3CF-92ADC1BCAF28';
var row = params.row || params.model.getFirstRow(); //make sure you're getting a row!!! console.log(row);
var CRL = 'FirstName~' + row.Form_Signer_First_Name__c + ';LastName~' + row.Form_Signer_Last_Name__c + ';Email~' + row.Form_Signer_Email__c + ';Role~Customer;RoutingOrder~1'; 
//********* Page Callout (Do not modify) *********// 
window.location.href ="/apex/dsfs__DocuSign_CreateEnvelope?DSEID=0&SourceID=" + row.Id + "&RC="+RC+"&RSL="+RSL+"&RSRO="+RSRO+"&RROS="+RROS+"&CCRM="+CCRM+"&CCTM="+CCTM+"&CRCL="+CRCL+"&CRL="+CRL+"&OCO="+OCO+"&DST="+DST+"&CCNM="+CCNM+"&LA="+LA+"&CEM="+CEM+"&CES="+CES+"&SRS="+SRS+"&STB="+STB+"&SSB="+SSB+"&SES="+SES+"&SEM="+SEM+"&SRS="+SRS+"&SCS="+SCS+"&RES="+RES;
(Edited)
Photo of Chad

Chad

  • 210 Points 100 badge 2x thumb
Moshe, that worked!

Thank you so much.

To recreate the "Send To DocuSign" custom button on a Skuid record detail page:

     1. Add a JavaScript Item
          1a. Resource Location = "External"
          1b. Resource URL = "/apex/dsfs__DocuSign_JavaScript"
          1c. Resource Name = "DocuSign_JavaScript"
     2. Add a JavaScript Item
          1a. Resource Location = "In-Line (Snippet)" 
          1b. Snippet Name = Send_With_DocuSign
          1c. Snippet Body = 

var params = arguments[0],    $ = skuid.$;
//********* Option Declarations (Do not modify )*********// 
var RC = '';var RSL='';var RSRO='';var RROS='';var CCRM='';var CCTM='';var CCNM='';var CRCL=''; var CRL='';var OCO='';var DST='';var LA='';var CEM='';var CES='';var STB='1';var SSB='1';var SES='';var SEM='';var SRS='';var SCS ='';var RES=''; 
//*************************************************// 
var CEM="This is the Email Body."; 
var CES='This is the Email Subject'; 
var DST = 'This is the DocuSign Template ID';
var row = params.row || params.model.getFirstRow();
// write row data to console
console.log(row);
var CRL = 'FirstName~' + row.FirstNameField + ';LastName~' + row.FirstNameField + ';Email~' + row.EmailField + ';Role~Customer;RoutingOrder~1';  //********* Page Callout (Do not modify) *********//  window.location.href ="/apex/dsfs__DocuSign_CreateEnvelope?DSEID=0&SourceID=" + row.Id + "&RC="+RC+"&RSL="+RSL+"&RSRO="+RSRO+"&RROS="+RROS+"&CCRM="+CCRM+"&CCTM="+CCTM+"&CRCL="+CRCL+"&CRL="+CRL+"&OCO="+OCO+"&DST="+DST+"&CCNM="+CCNM+"&LA="+LA+"&CEM="+CEM+"&CES="+CES+"&SRS="+SRS+"&STB="+STB+"&SSB="+SSB+"&SES="+SES+"&SEM="+SEM+"&SRS="+SRS+"&SCS="+SCS+"&RES="+RES;
     3. Create Custom Button
          3a. Action Type = "Custom: Run Skuid Snippet"
          3b. Snippet Name = "Send_With_DocuSign"
(Edited)
Photo of Joe Ort

Joe Ort

  • 2,256 Points 2k badge 2x thumb
@Chad - first - thanks so much for the detailed walk through once you got it working.

I got this working but ran into issues with adding/removing people.  When I try to add someone, I can click Add Signer but the window stays up and has a "Error: " in the background without any details.

While on the phone with the DS support rep, we tried working with the button but can't figure out how to modify it to work correctly.

The current workaround is to remove all signers and then start adding the people again - that seems to work fine.  My guess is it has something to do with the "CRL" or "row".

Thoughts?
Photo of Joe Ort

Joe Ort

  • 2,256 Points 2k badge 2x thumb
Sure - your default code ended up passing through someone named "undefined undefined" so I commented out line 11 with the var CRL

var params = arguments[0],    $ = skuid.$;
//********* Option Declarations (Do not modify )*********// 
var RC = '';var RSL='';var RSRO='';var RROS='';var CCRM='';var CCTM='';var CCNM='';var CRCL=''; var CRL='';var OCO='';var DST='';var LA='';var CEM='';var CES='';var STB='1';var SSB='1';var SES='';var SEM='';var SRS='';var SCS ='';var RES=''; 
//*************************************************// 
var CEM="This is the Email Body."; 
var CES='This is the Email Subject'; 
var DST = 'This is the DocuSign Template ID';
var row = params.row || params.model.getFirstRow();
// write row data to console
console.log(row);
// var CRL = 'FirstName~' + row.FirstNameField + ';LastName~' + row.FirstNameField + ';Email~' + row.EmailField + ';Role~Customer;RoutingOrder~1'; 
//********* Page Callout (Do not modify) *********// 
window.location.href ="/apex/dsfs__DocuSign_CreateEnvelope?DSEID=0&SourceID=" + row.Id + "&RC="+RC+"&RSL="+RSL+"&RSRO="+RSRO+"&RROS="+RROS+"&CCRM="+CCRM+"&CCTM="+CCTM+"&CRCL="+CRCL+"&CRL="+CRL+"&OCO="+OCO+"&DST="+DST+"&CCNM="+CCNM+"&LA="+LA+"&CEM="+CEM+"&CES="+CES+"&SRS="+SRS+"&STB="+STB+"&SSB="+SSB+"&SES="+SES+"&SEM="+SEM+"&SRS="+SRS+"&SCS="+SCS+"&RES="+RES;
Photo of Chad

Chad

  • 210 Points 100 badge 2x thumb
There's the problem.

Line 11 is where all of the magic happens. For the code to work you will need to replace FirstNameField with your own Salesforce field for the first name of the contact you are wanting to send to, in our instance it is row.Contract_Signer_FirstName__c. Contract Signer First Name is a custom formula field we created to produce the first name.

You will need to create the fields and add them to the code for:
FirstNameField
LastNameField
EmailField

So, if you create 3 formulas fields with the name Signer First Name, Signer Last Name, and Signer Email line 11 should be:
var CRL = 'FirstName~' + row.SignerFirstName__c + ';LastName~' + row.SignerLastName__c + ';Email~' + row.SignerEmail__c + ';Role~Customer;RoutingOrder~1'; 
Photo of Joe Ort

Joe Ort

  • 2,256 Points 2k badge 2x thumb
Ah ok. So if I want to pull the Contact Roles through, I'd use the standard merge syntax?

Or have you created fields on the Opp?
Only pulling the first Contact Role?
Photo of Chad

Chad

  • 210 Points 100 badge 2x thumb
We ran into some issues when trying to use the standard fields, which is why we decided to use custom formulas.

The fields are on the opp and are tied to a lookup on the opp, not in anyway tied to the contact role.
Photo of Joe Ort

Joe Ort

  • 2,256 Points 2k badge 2x thumb
Ok - thanks so much for your help.
Photo of Joe Ort

Joe Ort

  • 2,256 Points 2k badge 2x thumb
Skuid team - how would you leverage this solution while using data from a related model?  In this case, it's the Contact Role on the Opportunity.  I have all of the data I would need - first/last name and email - but can't get that data to flow into the solution here.
Photo of Joe Ort

Joe Ort

  • 2,256 Points 2k badge 2x thumb
Bump
Photo of JD Bell

JD Bell, Senior Product Engineer

  • 2,996 Points 2k badge 2x thumb
Are those fields included in your Model? If they aren't queried, then they won't have values.
Photo of Ben Hubbard

Ben Hubbard, Employee

  • 12,470 Points 10k badge 2x thumb
Hi Joe, can you do a console.log on your "firstContact" variable is it actually getting a row?
Photo of Joe Ort

Joe Ort

  • 2,256 Points 2k badge 2x thumb
@JD - yes, they're included but I'm not sure how to get them into the snippet to work. The default code above passes through the primary contact role but I get errors when trying to add any others to sign. I would have to delete that person and then I'm able to add new signers no problem.  

@Ben - the beauty of Skuid is I'm not technical and can build awesome pages! Can you expand on how to do what you're describing so I can get that answer for you?

Thanks, guys.

I'm almost being forced to not give my reps the efficiency of having people automatically added as signers to get this launched.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Joe.  Please give your reps efficiency!

What Ben means is the following:  
Below this line of code: 
       var firstContact = contactRoleModel.getFirstRow();
Add the following line of code: 
       console.log ('First Contact Value', firstContact);

This will output the value of that that variable to the browser console.  If nothing is there,  then you can work back up to see why the opportunity roles model isn't getting loaded. If it is there you can inspect it to see whether there are rows with the data you expect. 

Javascript debugging.  Fun for all ages.