Digital signatures using SKUID

I have a use case where we want to sign input by drawing a signature on a iPad screen and store it in Salesforce as a SKUID-image or attachment. I did a quick search of jQuery plugins with matching functionality and found a few. If you have used any of these I’d appreciate feedback or recommendations on choice of plugin and if anyone has sample code for using with SKUID that is of course even better. These are the plugins I found:

SignaturePad
jSignature
jQuery UI Signature
Signature Pad

We might need to send out copies of the signed documents with SF email templates so storing as an image is probably better than storing a JSON object. 

Peter,  we’ve been exploring similar ideas with a few prospects lately.  Another library that was suggested to us is at szimek.github.io/signature_pad/ 

We haven’t fleshed any of them out, but they seem to be pretty straightforward. 

After a little bit of checking I decided on the JSignature library as it was very simple to set up and offered the feature to save the strokes in a text field making it very simple to save and reload as well as scale without having to handle a image object. I did a quiick demo of how it works. XML https://gist.github.com/anonymous/11183218 for a demo that requires a long text field on the Contact object and a static resource uploaded to SF.



It works on iPad and in Salesforce1. However I have not been able to do a Skuid Mobile version since I don’t know how to replace the $(document).ready(function()  to init the custom component in Skuid mobile. A guide/tutorial on this would be helpful





Hi Peter.  Have you considered Docusign? Or maybe your app is diffrent to having agreements or orders signed?

Hi Gregg,
Our app is a field techinican app where the customer signs off on the work done when the technician leaves the site. The technician uses his iPad to enter configuration data plus photos so letting the customer confirm the work done with a signature on the actual iPad screen describing the installation is what we want to do. This saves having to print or email back and forth to confirm and it is done instantly. I think docusign (or echosign)  might be a bit overkill for this and probably not as easy to integrate as the simple signing box. Docusign/Echosign makes more sense fo me for use cases with online ordering and signing of contracts where there is a workflow for the signing process and where the signers are not in the same room at the same time.

Sounds like a great solution there.  Might be knocking on your door for some tips soon. Docusign comes with +/- 496 componenets which include 20+ VF pages so quite chuncky for a small solution and limiting if your client has used up most limits in a Pro Version lol.  Thanks for the reply!

The solution that we have now is working pretty well but there is till a worarkound with an extra button to load the signature pad in Skuid mobile. Once that is solved I’ll try to get time to write a simple guide on how to huse iSignature with Skuid mobile. You are more than welcome to come knocking for tips if you need them.

This sounds great Peter! I did manage to get this working using HTML 5 canvas in Salesforce1 for a similar use case (there were a couple of blog articles kicking around on this) but didn’t get as far as incorporating it with Skuid mobile. Unfortunately the UK has dreadful 3G reception outside of the cities so Salesforce1 is not an option for me and so I abandoned the idea.

I’ve tried a number of ways of using Docusign for this purpose and I agree with your assessment - it’s great for contracts etc. but in its current state it’s not suitable to be used as a data collection solution for field work, especially offline.

As an alternative I’m thinking of using something like iFormBuilder and then using Zapier to sync the collected data and signature with Salesforce (using Skuid to present the data of course!). Alternatively, the guys at Pulsar and Nefos on the AppExchange would be able to put a signature capture system in their offline Salesforce apps if you ask!

Hi Peter and team!

This is phenomenal, and thank you for sharing your sample page so generously. 

I have been able to get everything working in our org with the javascript as a static resource. 

I am now trying to implement it in a popup, which persistently refuses to render the signature custom component. 

How would I have to modify the custom component code for it to show and function in a popup? 

Also, how would I have to modify it to make it work as a page include?

Thank you everybody in advance!

Regards, 

Robin

Here is Peter’s sample code I’m using for the signature custom component:

// JSignature https://github.com/willowsystems/jSignature and // SKUID http://www.skuidify.com/home 
// demo for saving drawing of signature in Salesforce
// Peter Baeza - 2014-04-22

var element = arguments[0],
   $ = skuid.$;
$(document).ready(function() {
    // init signature canvas
    element.jSignature();
    element.jSignature(“reset”);
    
    // Get existing signature from text field
    var model = skuid.model.getModel(‘Signer’),
        row = model.getFirstRow(),
        sigField = ‘Signature__c’, 
        sigData = model.getFieldValue(row,sigField);
    if(sigData !== null ) {     // read back Signature data
        element.jSignature(“setData”, “data:” + sigData);
    }
});
skuid.events.subscribe(‘skuidMobileReady’,function(){
   element.jSignature();
   element.jSignature(“reset”);
});

Robin,
nice to know someone is finding the code useful. Here is a code sample where i display a signature in a popup using a custom field renderer for the signature field. In my case this is read-only since this is only used for a force.com site where  the customer that signed can see what they signed. But I think it might work if you remove the “disable” line, and add some code to write back the value to the field.  Haven’t tested and it’s a while ago I did this so I don’t remember exactly. If you don’t get it to work I’ll try to get some time to play around with this since I think I need to do some improvements in my app shortly anyhow. 

var field = arguments[0], value= arguments[1], $ = skuid.$; setTimeout(function() { field.element.css({width:'500px',height:'100px'}); field.element.jSignature(); field.element.jSignature("setData", "data:" + value); field.element.jSignature("disable"); }, 1000);<br>

Thanks again for sharing Peter! 

Peter,

First thank you for sharing your sample page. I know very little (nothing really) about javascript but I can usually piece things together to make it work. In this instance I copied your test page xml, added the long text signature field, downloaded the jsignature zip file, and created a static resource (used the same name JSignatureMaster). My problem is that my page does not seem to render the custom component.

Any guidance here would be VERY much appreciated.

Thanks again for all your help thus far.

Code:

// JSignature https://github.com/willowsystems/jSignature and // SKUID http://www.skuidify.com/home
// demo for saving drawing of signature in Salesforce
// Peter Baeza - 2014-04-22

var element = arguments[0],
$ = skuid.$;

$(document).ready(function() {
// init signature canvas
element.jSignature();
element.jSignature(“reset”);

// Get existing signature from text field  
var model = skuid.model.getModel('Signer'),  
    row = model.getFirstRow(),  
    sigField = 'Signature\_\_c',   
    sigData = model.getFieldValue(row,sigField);  
if(sigData !== null ) {     // read back Signature data  
    element.jSignature("setData", "data:" + sigData);  
}  

})

Not sure if this is your issue, but try 

$(document.body).one('pageload',function(){


instead of 

$(document).ready(function() { 

That way you’ll be able to use your page as a page include if necessary.

I switched out what you suggested. I was able to use it in a page include but again the signature line (custom component) doesn’t show up – I’m not able to sign anything basically.

I’m also having this issue. Where did you download the library/static resource? I just zipped up my own file from the github library. Did you figure this out?

Thanks

My company could really benefit from this functionality. I’m grabbed your code but I’m not certain where to get the SF static resource you’re talking about. I just copied the library from jSignature’s github, zipped it up, and threw it in SF. I made sure the names were the same in your page and in the Static Resource. I’m getting these errors, “element.jSignature is not a function” & “sig.jSignature is not a function”. If anyone could chime in and point me in the right direction I’d be very grateful.

Thanks, 

@Kyle, @Megan. The functionality is working fine for us. We have +100 users taking signatures on iPads. However our app is used with the mobile builder and not the regular skuid builder. The samples in this thread is just something I did to show how it could be done but it is many Skuid versions ago and maybe some changes have caused it to stop working. Should be possible to solve but I’m very busy with other projects at the moment. I’ll try to find some time this week to put together and test an updated sample. Are you mostly interested in a version with the mobile or the regular builder?

Figured this out.

Thanks for the response, Peter. It’s still working like a charm. I simply wasn’t referencing the .js library correctly. If anyone in the future copies the XML they just need to make sure they search for the filepath not use the one that is populated from the XML. 

I abandoned this as I could never get it to work. I need to look back over this as I am hoping we had the same issues-  i’m excited you were able to get it to work and I’m sorry for the radio silence I’ve been out on vacation.