Tutorial: Electronic Signatures in Skuid

This is a walk-through guide for adding electronic signatures to a Skuid page, which can be signed via mouse or using your finger on a touchscreen device.

Step 1: Download jSignature ZIP file from GitHub

Download jSignature ZIP File
Go here for Github ZIP file

Step 2: Upload ZIP File to Salesforce as a Static Resource

Note: You will need to upload the entire ZIP file that gets downloaded, including all enclosed files. Don’t bother unzipping, or if your browser (i.e. Safari) automatically unzips like on my Mac, switch over to Chrome so you get the unzipped file.
  1. Search for Static Resources

    Static Resources 1 GIF
    Go to Setup –> Search for ‘Static Resources’
  2. Create new Static Resource
  3. Name the Static Resource jSignatureMaster

    jSignature Static Resource Naming
    Name –> jSignatureMaster
  4. Upload ZIP file

    ZIP File Upload
    Upload entire jSignature ZIP file…not just one of the individual files enclosed in the ZIP file
  5. Save

Step 3: Create a custom Signature field 

Note: In this example, I create the Signature field on the Contact Object,
but any Standard or Custom object will work.
  1. Create Text Area (Long) field

    Field Creation - Text Area Long
    Type –> Text Area (Long)
  2. Name the field Signature
Signature Field Creation - Label
Field Name –> Signature

Step 4: Add the Signature Field to your Model

Step 5: Add 2 Components to the Skuid page where you want your Electronic Signature

  • Page Title
    • Add 2 Buttons: Save Signature & Erase Signature
  • Custom Component (under Components “Advanced” section)
Page Build GIF
Page Title w/ 2 Buttons & Custom Component

Step 6: Add 4 JavaScript Resources to your Skuid Page

  1. (Static Resource) jSignature Master
    • Resource Location: Static Resource
    • Resource Name: jSignatureMaster
      • Note: Must have exact same name as Static Resource from Step 2
    • File Path: jSignature-Master/libs/jSignature.min.noconflict.jsJS Static Resource GIF
  2. (Component) Sign
  3. (Snippet) saveSignature
  4. (Snippet) clearSignature

Step 7: Assign JavaScript Resources to your Page’s Components

  • Save Signature Button
    • assign Snippet Name: saveSignature
  • Erase Signature Button
    • assign Snippet Name: clearSignature
  • Custom Component
    • assign Component Type: Sign
    • assign Unique Id: idSign
Assign JS GIF
Assign JS Resources

 

Step 8: Preview

Voila! You can sign your name using your mouse…admittedly signing with a mouse never looks that natural….

Signature Preview with Mouse GIF

 

…but the good news is that your page will work on mobile as well, so you can sign using your finger on a touchscreen device…which looks a little more natural.

Signature Sample using finger on Mobile Device

 

 

Many thanks to Peter for being so kind to share his very useful solution with the community. I noticed many others have expressed interest in replicating it in their own pages, but have struggled to correctly implement it. As I was able to successfully implement into my own page, I have created this tutorial so that others may also benefit. I would love to see this solution expanded upon (e.g. packaged and shared as a declarative custom component, read-only, mobile optimized, etc.).

Since I am not a JavaScript developer, chances are highly likely that I will not be able to answer any questions related to the code. Please refer any of those questions back to Peter Baeza who developed this solution…or hopefully other developers will be willing to help. However, if you have questions about this exact example, feel free to let me know and I’ll answer as best as I can.

 

Cheers,

Conlan O’Rourke

%d bloggers like this: