Record hand-drawn user signatures with SNCGuru Signature Pad!

//Record hand-drawn user signatures with SNCGuru Signature Pad!

Record hand-drawn user signatures with SNCGuru Signature Pad!

I‘ve seen a couple of requests recently for a capability to record actual, hand-drawn user signatures. There are probably several uses for this type of thing, but usually the requirement has something to do with a field service technician completing work in the field, and then being able to get a customer to sign indicating that some work was performed. This functionality doesn’t exist in ServiceNow, but it can be added thanks to a very cool jQuery plugin called ‘Signature Pad‘. I’ve incorporated this jQuery solution into a UI page/Dialog-based solution for use with regular ServiceNow records and forms. Read on for more information about the SNCGuru SignaturePad update set!

Signature Pad

Features:

  • Capture and associate as many signatures as you like against any record in the system (Incidents only by default)
  • Dialog-based signature capture and multi-signature signature viewer
  • Complete logging of each user signature in the ‘Signature (u_signature)’ table
  • Multi-language, multi-company support built-in
  • Mobile device support (must be running full ServiceNow UI)

Special installation instructions:

Internet explorer doesn’t include the necessary canvas support to record signatures natively. Fortunately, there’s a flash-based solution that integrates nicely with this one. Because of this, the setup instructions include the standard update set procedure (linked to below). After the update set is installed however, you’ll also need to do the following…

1Navigate to ‘System UI -> UI Scripts’ and open the ‘flashcanvas’ UI Script record.

2Use the paperclip icon to upload the ‘flashcanvas.swf’ file (included in the download).

3Get the sys_id for the uploaded attachment by right-clicking the attachment and copying the URL. The sys_id should be at the end of the URL.

4Modify the UI Script by adding the attachment sys_id as shown in the image below.

FlashCanvas

Components and Usage:

This functionality relies on 4 global UI Scripts in order to function properly. While these UI Scripts should not cause any noticeable performance issues, they are loaded globally so you’ll want to turn the global setting off on these UI Scripts if you decide to turn this functionality at some point.

This SNCGuru solution is packaged as an update set for easy installation in your instance. Included in the update set are the following elements…

  • Global UI scripts – (jquery.min, jquery.signaturepad.min, json2.min, flashcanvas) This solution is dependent on all 4 of these UI Scripts. ‘jquery’ is the base library for the SignaturePad, ‘jquery.signaturepad.min’ contains the main SignaturePad components, ‘json2.min’ is required for storing the signatures, and ‘flashcanvas’ adds IE support.
  • signaturepad, signatureviewer, and signatureviewer-small UI Pages – Contain the dialog contents that are displayed to the user and calls back to the ‘SignaturePad’ Script include to record and retrieve signature information. ‘signatureviewer-small’ is only used to view a single signature at a time on the ‘Signature (u_signature)’ table.
  • Signature Pad and Signature Viewer UI Actions – A total of 3 UI actions are included in the update set. 2 of these UI actions (Signature Pad and Signature Viewer) will display as links at the bottom of any incident form. ‘Signature Pad’ is used to record signatures and ‘Signature Viewer’ is used to display all signatures recorded against a record. These UI actions can be copied for use against other tables and record types if needed. The third UI action (also named Signature Viewer) is specifically designed for the ‘Signature’ table. Each of these UI actions displays a dialog containing text from one of the 3 UI pages listed above.
  • ‘SignaturePadAjax’ Script Include – This script include handles the back-end process of recording and retrieving signature records. It is invoked by client scripts on the ‘signaturepad’ and ‘signatureviewer’ UI page records.
  • Signature table – Logging table for all signatures. Includes a ‘Signature Viewer’ UI action link for viewing each signature. The ‘Signature’ table can be accessed by navigating to ‘System Logs -> Signatures’.

Using the Signature Pad is simple. Just open any incident record and click the ‘Signature Pad’ link. Fill in a user name (and optionally description text) in the name field, and then sign using any standard input mechanism as shown here.
Signature Pad

You can also view all recorded signatures by clicking on the ‘Signature Viewer’ link.
Signature Viewer

You can view the update set and installation instructions here…

Related Links:

By | 2018-07-09T14:59:56-06:00 October 20th, 2011|Categories: System UI|Tags: , , , , |11 Comments

About the Author:

11 Comments

  1. EDB July 4, 2013 at 3:04 am - Reply

    It appears the IE fix doesn’t work. I have to click on it twice for it to appear. Chrome is fine. Any thoughts? I have been attempting to review it.

    • EDB July 4, 2013 at 3:28 am - Reply

      Ok so the fact it doesn’t show up the first time has to do with IE 9 Compatibility mode. In normal mode it works great.

      Also I had added a UI Script which works great until I install this signature pad.
      addLoadEvent(addUnimpersonateButton);

      function addUnimpersonateButton(){
      try{
      //Show un-impersonate icon if a user is being impersonated
      if($(‘impersonating_toggle_id’).value != ”){
      //Insert the clickable icon in the dom
      $(‘impersonate_span’).insert({
      after: ”
      });
      }
      }catch(e){}
      }

      function unimpersonateMe(){
      //Return the user to their original session
      top.location.href = ‘ui_page_process.do?sys_id=b071b5dc0a0a0a7900846d21db8e4db6&sys_user=’+ $(‘impersonating_toggle_id’).value;
      }

  2. Matthew Paquette May 8, 2014 at 7:56 am - Reply

    Re-loaded the update set, got it close to working, no errors but in IE8 (we are required to use IE8) the canvas is blank, although it IS recording signatures, I just cant see them. Scribbled in it and hit save and checked in chrome and there was the signature, so It works, but its not displaying I don’t think the fixIECanvas function is doing anything, I’ve tried playing with the width and it doesn’t seem to change anything, it definitely gets called tho i added an alert and it was triggered, know what might be wrong?

    • Matthew Paquette May 8, 2014 at 8:03 am - Reply

      It is officially the flashcanvas.swf attachment not working I’ve tried using both the table sysID shown on the sys_attachment table (which i think is wrong) and the sys_id of the actual record, I tried uploading a swf containing some text and throwing its sys_id in there just to see if it showed up and it didnt.. continuing to investigate

      • Matthew Paquette May 9, 2014 at 12:55 pm - Reply

        Well I fixed it, but I don’t get why this fix worked. The movie was not being attacked because in flashcanvas.js the src that was being returned was instance-name.com/scripts/sys_attachment.do? instead of instancename.com/sys_attachment.do, so I added .substring(0,0) to the functioncall that I believed was returning the instance path, intending for that to not change anything just make sure the syntax was right, and that alone fixed it, I was going to substring out the characters “scripts/” but somehow that’s all it took, if anyone needs this solution for IE 8 e-mail me and ill send you the xml to update the flashcanvas xml

        • Mark Stanger May 9, 2014 at 1:58 pm - Reply

          That seems really strange but I’m glad you got it working. Thanks for taking the time to dig in and figure it out! I’ve incorporated your fix into the download file.

        • Albert Hsu October 27, 2014 at 10:37 am - Reply

          Hi Matthew, what version of SN are you running? Just wondering what versions the signature-pad is supported on.
          Thanks.

  3. Paul Curwen October 21, 2015 at 12:56 pm - Reply

    We have this working on Fuji. It works fine but with one problem, after closing the pad the form gets corrupted when moving your mouse around. Quick fix is to reload form when losing the signature pad.

    • Srinivasa Reddy February 5, 2017 at 11:04 am - Reply

      Hi Paul,

      I have applied digital signature on User form for service now Helsinki version, but one problem ,after closing the pad the form gets corrupted when moving mouse around and your problem also same any solution to find that problem.

      Please provide any solution you have fix.

      Thanks,
      Srinivasa Reddy.B

  4. Ben July 3, 2016 at 8:57 pm - Reply

    Thanks! this is great. I have implemented this into my SN instance and it works well. My only question is how could I make this feature available offline? Currently our users access SN via a tablet, and in some areas there is no mobile reception.

    • Mark Stanger July 4, 2016 at 10:23 am - Reply

      Thanks Ben. It’s all part of the ServiceNow Web App, so until there’s a way to do that with ServiceNow, there isn’t a way to do that with the signature pad.

Leave A Comment