DocuSign Custom Button

Chad · October 2015

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;
//*******************************************//

Moshe Karmel · October 2015

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;

Chad · October 2015

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;

Moshe Karmel · October 2015

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;

Chad · October 2015

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!

Moshe Karmel · October 2015

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;

Chad · October 2015

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"

Joe Ort · November 2015

@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?

Chad · November 2015

Hey Joe,

Add your Snippet Body code here and lets take a look.

Joe Ort · November 2015

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;

Chad · November 2015

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';

Joe Ort · November 2015

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?

Chad · November 2015

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.

Joe Ort · November 2015

Ok - thanks so much for your help.

Joe Ort · November 2015

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.

Rob Hatch · December 2015

Instead of using the arguments provided to the snippet to get the row and field values, you can use the model API to get data from your related model. Something like this:

// Get model
var contactRoleModel = skuid.model.getModel('ContactRoleModel');
// Get the first row of the model,
// which is probably an existing row from the database
var firstContact = contactRoleModel.getFirstRow();
// Get the name value
var firstContactFirstName = firstContact.FirstName

Joe Ort · December 2015

That makes sense logically.

Here's the updated button code:

var params = arguments[0],    $ = skuid.$;
// Get model var contactRoleModel = skuid.model.getModel('OpportunityRoles'); // Get the first row of the model which is probably an existing row from the database var firstContact = contactRoleModel.getFirstRow(); // Get the name value var firstContactFirstName = firstContact.FirstName var firstContactLastName = firstContact.LastName var firstContactEmail = firstContact.Email //********* 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~' + firstContactFirstName + ';LastName~' + firstContactLastName + ';Email~' + firstContactEmail + ';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;

But when I click the button, I get "undefined" for those fields.

Joe Ort · December 2015

Bump

Joe Ort · December 2015

Bump

Joe Ort · December 2015

Bump

JD Bell · December 2015

Are those fields included in your Model? If they aren't queried, then they won't have values.

Ben Hubbard · December 2015

Hi Joe, can you do a console.log on your "firstContact" variable is it actually getting a row?

Joe Ort · December 2015

@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.

Rob Hatch · December 2015

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.

DocuSign Custom Button

Comments