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
How to install the widget
To install the widget you need to do the following:
- Download the XML update set.
- 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.
- 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
The widget allows users to capture a signature and instantly save it as an attachment to the current record. Current record identified by
sys_id parameters from the page URL, so make sure you specify those parameters when loading the page.
When you add a widget to a Service Portal page — you will see the “Add Signature” button. If the page does not have
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
You can easily integrate Signature Pad widget into ServiceNow native UI:
- Create a service portal page
signature_pad, add the Signature Pad widget
- Create a new service portal
- 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">
4. Create Formatters for the tables where you want to use a Signature Pad.
5. Add formatters to the corresponding forms.