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!
- 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.
Components and Usage:
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.