Service Catalog Input Masking

[SNOWman2]

Description:

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.  

Steps to Configure:

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.

Result:

[Julian12]

Well, this aint working for me!

[Julian12]

Well, turns out i was writing iMaks on line 5 instead of IMASK.... now its working wonderfully, looks awesome, great guide!

[Jon M3]

For some reason I cant get this to work.

function onLoad() {
//Type appropriate comment here, and begin script below

setTimeout(function() {
var phoneMask = new IMask(top.document.getElementByID('sp_formfield_phone_number'), {
mask: '(000) 000-0000',
lazy: false,
placeholderChar: " "
});
}, 100);

}

[Jon M3]

I am access the library from the theme as you directed.  Thoughts?  We are on Toykyo

[Arpit Shende]

It's Working, Thanks for this.

The JS Includes:

The OnLoad Client script:

function onLoad() {
    //Type appropriate comment here, and begin script below
    setTimeout(function() {
        var phoneMask = new IMask(top.document.getElementById('sp_formfield_contact_number'), {
            mask: '(000) 000-0000',
            lazy: false,
            placeholderChar: " "
        });

    }, 100);
}

Before:

Output:

Note: I used Contact Number instead of a Phone Number.

[Javier Tirado1]

I'm implementing everything as needed, but not getting any result. I've double checked everything. Is this still working on Vancouver?