Digital signatures using SKUID

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. 

@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

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

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

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

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


Thanks for documenting this Conlan.  I totally appreciate your willingness to document these details. 

This is fantastic! Thanks everyone who contributed. I’m excited to try it.

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 

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],<br> $ = skuid.$;<br>//in-line snippet signRendere<br>// use as custom field renderer<br><br>setTimeout(function() {<br> field.element.css({width:'500px',height:'100px'});<br> field.element.jSignature();<br> field.element.jSignature("setData", "data:" + value);<br> field.element.jSignature("disable");<br> }, 1000);

Tutorial moved from evernote to here: https://conlan.me/digital-signatures-in-skuid/

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


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

This could help someone. I couldnt get the filepath to render. And so i followed these recommended steps: https://community.skuid.com/t/filepath-property-not-accessible-for-static-resources-9-5-1…

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.

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? 

absolutely. why dont we communicate by email.

nlabrada@tissuetech.com

Does anyone know how to make the signature component a required field?