Digital signatures using SKUID

  • 3
  • Question
  • Updated 6 months ago
  • Doesn't Need an Answer
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. 
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb

Posted 5 years ago

  • 3
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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. 

Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
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





Photo of Kyle Mathis

Kyle Mathis

  • 576 Points 500 badge 2x thumb
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, 
Photo of Kyle Mathis

Kyle Mathis

  • 576 Points 500 badge 2x thumb
Figured this out.
Photo of Gregg Baxter

Gregg Baxter, Official Rep

  • 3,080 Points 3k badge 2x thumb
Hi Peter.  Have you considered Docusign? Or maybe your app is diffrent to having agreements or orders signed?
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
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.
Photo of Gregg Baxter

Gregg Baxter, Official Rep

  • 3,080 Points 3k badge 2x thumb
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!
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
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.
Photo of Louis Skelton

Louis Skelton

  • 4,786 Points 4k badge 2x thumb
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!
Photo of Robin

Robin

  • 894 Points 500 badge 2x thumb
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");
});
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
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);
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thanks again for sharing Peter! 
Photo of Megan Vaughan

Megan Vaughan

  • 872 Points 500 badge 2x thumb
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);
    }
})
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
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.
Photo of Megan Vaughan

Megan Vaughan

  • 872 Points 500 badge 2x thumb
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.
Photo of Kyle Mathis

Kyle Mathis

  • 576 Points 500 badge 2x thumb
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
Photo of Megan Vaughan

Megan Vaughan

  • 872 Points 500 badge 2x thumb
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. 
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
@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?
(Edited)
Photo of Kyle Mathis

Kyle Mathis

  • 576 Points 500 badge 2x thumb
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. 
Photo of Megan Vaughan

Megan Vaughan

  • 872 Points 500 badge 2x thumb
@peter I abandoned this as I could never get it to work. I would like to capture the signature function on the mobile and view it on the desktop. I am going to try to revisit this tomorrow and use Kyle's suggestions. I'll let you know how it goes
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
@Megan, ok it should work fine on mobile devices even if you are building with the web skuid builder. Our primary use case is using the mobile builder for signing but we also have regular web-pages for display and print. Also we let the customers see their own signed work-orders using mobile pages displayed with force.com sites. It's a lot of other code that I can't share in the pages that we use but I'll try to make a mobile sample signing page in a couple of days.
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,270 Points 3k badge 2x thumb
Hi Peter,

First, thank you so much for sharing this with the community! The non-profit I am working with needs signatures for audit purposes and they also work in the field, so Docusign wasn't really going to be optimal for their use case anyways...plus they won't hate saving all that money. I think they will definitely love your jSignature solution much more!

I was able to grab your code and follow your instructions, and I was able to successfully get digital signatures working great on my skuid desktop page...in fact, I was also able to sign with my finger on my iPhone still using that desktop page. In the end, I didn't have to change any of your original XML or Javascript.

As I am not a programmer myself...just a declarative developer, I could understand how some others may not have been able to get it quite right. If you wouldn't mind, I would be happy to lend a "helping hand" and put together a nice step-by-step guide/tutorial (giving you full credit of course) for other declarative developers like myself to follow?

Hopefully, this way you might be able to better spend your time expanding on this topic, and sharing with the community what JS changes you had to make to get the Custom Component to work on Skuid Mobile.

If possible, I would also be interested to know if there is a way to make the signature canvas read-only. I was able to remove the "Save Signature" button so that changes can't be saved, but the canvas still acts like it is in edit mode.

Many thanks again for sharing!

Conlan


Finger Signature Captured on iPhone using Peter Baeza's jSignature solution in Skuid Desktop Page
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
HI Conlan,

I have made a read-only signature with the following code

field.element.jSignature("disable");

If you want to put together a user-friendly guide I think that would be helpful for many users. It seems copying the code and selecting the resources from the drop-down is where many people run into problems. 

I'm planning to package the signature code in a component that could be easily dragged and dropped with the page editor but never seem to get the time to do it.... 

/ Peter
Photo of Megan Vaughan

Megan Vaughan

  • 872 Points 500 badge 2x thumb
Peter, we use (and love) the signature feature that you developed. I am trying to view the collected signature on another skuid page I built but I only want it to be "read only" in this instance. I don't know exactly where in the code to put the above field.element.jSignature("disable");. All my attempts have failed. Can you give me some direction. Thanks for your help 
Photo of Peter Baeza

Peter Baeza

  • 2,868 Points 2k badge 2x thumb
HI Megan,
we are doing it with a custom field renderer for the field where the signature is displayed. It looks like this and is used i a Skuid mobile page. A bit uglry workaround with the timeout but it works :-):


var field = arguments[0], value= arguments[1],
$ = skuid.$;
//in-line snippet signRendere
// use as custom field renderer

setTimeout(function() {
field.element.css({width:'500px',height:'100px'});
field.element.jSignature();
field.element.jSignature("setData", "data:" + value);
field.element.jSignature("disable");
}, 1000);
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,270 Points 3k badge 2x thumb
Hi all,

With Peter's blessing, I've put together this walk-through guide for incorporating Peter Baeza's jSignature solution on a Skuid page:

https://www.evernote.com/shard/s329/sh/ba6fa3a6-b5d9-4488-b878-0d438b59c8a0/b9da3fac919de2c5

Since I think copying the JS code from Evernote may cause some errors, so I am also posting that code below.

I hope everyone is able to benefit from this walk-through, and as a result it encourages real developers (unlike me) to be able to spend their time/effort expanding on this topic.

Let me know if there are any questions.

Peter - thanks again for this solution! 

Thanks,

Conlan
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,270 Points 3k badge 2x thumb
Tutorial moved from evernote to here: https://conlan.me/digital-signatures-in-skuid/
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Thanks for documenting this Conlan.  I totally appreciate your willingness to document these details. 
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
This is fantastic! Thanks everyone who contributed. I'm excited to try it.
Photo of David Forder

David Forder

  • 2,144 Points 2k badge 2x thumb
Hi all.. followed these instructions but for the life of me I do not get anywhere asking me to specify the file path within the static resource. I assume something changed in a later version.

Is there another method
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,270 Points 3k badge 2x thumb
Hi David,

Did you upload the entire ZIP file from Github as your static resource? If your static resource is a ZIP file, Skuid will render the File Path lookup field, and then you will be able to select the specific file within that ZIP file. 

Before

After
Photo of Nicholas L.

Nicholas L.

  • 382 Points 250 badge 2x thumb
This could help someone. I couldnt get the filepath to render. And so i followed these recommended steps: https://community.skuid.com/skuid/topics/filepath-property-not-accessible-for-static-resources-9-5-1...
Photo of Nicholas L.

Nicholas L.

  • 382 Points 250 badge 2x thumb
Not sure if anyone has had the same experience, but I followed the step-by-step tutorial that Conlan had created but every time I preview the page, the screen comes up blank. Not sure what I am doing wrong.
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,270 Points 3k badge 2x thumb
Hi Nicholas, would you be open to jumping on a short screenshare session so I can take a look and try to see what might be going on? 
Photo of Nicholas L.

Nicholas L.

  • 382 Points 250 badge 2x thumb
absolutely. why dont we communicate by email.

nlabrada@tissuetech.com