Great UX Trick: HTML Placeholders

As a software platform, ServiceNow has a great and modern GUI that works with any web browser. Yet there is one glaring missing UI feature from modern HTML: HTML Placeholders. Let me present you my ninj’admin trick to implement them in your instance.

What are HTML Placeholders?

Placeholders are the ghost texts present in many web sites’ input fields. They are an old trick, introduced with the HTML5 standard in mid 2011.
The most common usage is with Search input fields.

As soon as you type something in the box, the placeholder text will disappear, to be replaced by your own input. Used in the Service Catalog, or in your Forms, they can add useful information without being obnoxious for the users.

ServiceNow current help system for the Service Catalog is way more obnoxious to my liking. Placeholders are way better design-wise.

Native support in Jakarta Service Catalog

In Jakarta, HTML Placeholders can only be configured for for Service Catalog variables via the field “Example Text” that you’ll have to add to the Variable Form.
You can only apply them to: Single Line, Text, Wide Single Line Text, Multi Line Text, IP Address, Email, URL, Date, Date/Time.
In Jakarta, there is no native function to add HTML Placeholder to your forms outside Service Catalog Variable.

Not using Jakarta? Want them outside the Service Catalog? Script your placeholders

If you are using an older version, you can use this simple client script to add placeholders to your forms.

Platform interface

I recommend adding the feature globally using a UI Script include.

You’ll now be able to add lean onLoad Client Script to the forms of relevant tables.

Another great thread on the subject.

Catalog Items & Record Producers

The same design works, with some minor adaptations. The scripts should be added to the ‘Catalog Client Script’ table instead. Catalog items and record producers will not load the UI Scripts, so you’ll have to copy the whole addHtlmPlaceholder function directly in each ‘Catalog Client Script’.

Limitations

• Placeholder texts must not contain carriage returns or line-feeds.
• They won’t be applied to reference fields, nor on journaled fields grouped under UI16’s Activity.
• They will not work with the Service Portals or mobile interfaces. The Mobile GlideForm (g_form) is currently too limited, and DOM Manipulation using stuff like $ and jQuery are prohibited by the platform.
• In scoped applications, ServiceNow blocks updating DOM objects. You’ll need to add System Property “glide.script.block.client.globals” and set it to false.

Styling Placeholders

Placeholders appearance can be easily modified via CSS, using the:: placeholder pseudo element.

Script examples, ready to paste

UI Script

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var uiShiva = {
 addHtlmPlaceholder: function (fieldName, placeholderText) {
  try {
   if (g_form.hasField(fieldName)) {
    var control = g_form.getControl(fieldName).name.toString(); // getControl is currently not supported in Mobile g_form
    if (Prototype.Browser.IE) // Internet Explorer only
     fieldName.placeholder = placeholderText; 
    else // Other browsers, using jQuery (not supported in Service Portals or mobile UI)
     $(control).writeAttribute('placeholder', placeholderText);
   }
  }
  catch(err) {} // Fail silently
 }
};

Client Script (onLoad, Desktop)

1
2
3
4

function onLoad() { 
 uiShiva.addHtlmPlaceholder('close_notes', 'The close note is only visible to fulfillers and should contains technical info over the resolution.');
 uiShiva.addHtlmPlaceholder('another_field', 'Another example');
}

Catalog Client Script (onLoad, Desktop)

Merged as a single script

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function onLoad() {
 addHtlmPlaceholder('short_description', 'Mandatory short title');
 addHtlmPlaceholder('business_case', 'Take a few moments to briefly explain your idea. Upon receipt, your Demand Manager will review the request and contact you for next steps.');
 
 function addHtlmPlaceholder (fieldName, placeholderText) {
  // Add HTML Placeholder to forms. Won't work for Mobile / Service Portal scripts.
  // This is a workaround until Jakarta, as it should bring native support for placeholder attribute.
  try {
   if (g_form.hasField(fieldName)) {
    var control = g_form.getControl(fieldName).name.toString();
    if (Prototype.Browser.IE) // Workaround for Internet Explorer
     fieldName.placeholder = placeholderText; 
    else // Modern browsers, using jQuery (Not supported in Service Portals or mobile UI)
     $(control).writeAttribute('placeholder', placeholderText); 
   }
  }
  catch(err) {} // Fail silently
 }
}