Service Catalog Input Masking

As of right now, ServiceNow doesn't have a native way to add input masking to service catalog variables without having to wait for onChange script to execute. For us to set this up, we're going to leverage an external javascript library called iMask.

What is an input mask?

An input mask is used to constrain data that users enter into form fields and enforce specific formatting. Cases where this is useful can be with phone numbers, credit card numbers, area code, ect.

* (###) ###-####
- ###-###-####
- #####

Find other examples of input masks here: https://imask.js.org/

Why is this better than writing an onChange client script to validate the format?

This persistent formatting forces the user to give good data, without making them interpret field level error messages or instructional text. The same outcome can be accomplished via client script, the difference comes down to usability preferences.


The following steps will walk you through setting up a phone number catalog item variable with input masking so that the text field on the service portal is pre-formatted and masked as (###) ###-####.

Navigate to your Service Portal's theme.
From the 'JS Includes' related list, Select New.
Submit iMask Entry
For whichever catalog item you're working on - add a single line text variable called 'Phone Number'.
Add an onLoad catalog client script that 'sets' the input mask on the input.	Note: 'isloate script' is true Note: sp_formfield_phone_number is the element id for the input on the service portal.