Signature pad for ServiceNow applications

There is a number of use cases and business processes where we need to capture the user’s signature. It may sound like a trivial development task, but it still takes time to design(UI/UX), implement and integrate it into your ServiceNow applications.

We’ve just released a free Service Portal widget — Signature Pad, which takes care of everything:

  • Capture user’s signature and instantly attach it to the record
  • Can be used in Service Portal and native UI
  • No configuration required

The widget is FREE and can be downloaded from Github repo, or you can use a direct link to XML update set.

How to install the widget

  1. Download the XML update set.
  2. Import it into your ServiceNow instance: navigate to System Update Sets > Retrieved Update Sets, select Import Update Set from XML, and upload the XML file.
  3. Preview and commit the imported update set.

Once the update set installed, a new Service Portal widget Signature Pad will be available and you can use it on any Service Portal page and in custom applications.

How to use the widget

When you add a widget to a Service Portal page — you will see the “Add Signature” button. If the page does not have table and sys_id defined in the URL then the button will be disabled.

When a user clicks the button, a signature pad appears and the user can sign and submit the signature:

Once submitted, the signature will be attached to the current record:

The signature image will have some metadata embedded: user name and sys_id, table name, target record sys_id, date signed and the URL where the signature was taken.

How to use the widget in ServiceNow native UI

  1. Create a service portal page signature_pad, add the Signature Pad widget
  2. Create a new service portal signature_portal
  3. Create a UI macro with the following code:
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<iframe src="signature_portal?id=signature_pad"
width="100%"
scrolling="no"
style="border:none;min-height:450px;">
</iframe>
</j:jelly>

4. Create Formatters for the tables where you want to use a Signature Pad.

5. Add formatters to the corresponding forms.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store