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 web technology: HTML Placeholders. Let me present you this ninj'admin trick that you can use on your implementations.
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 norm, back in 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 for: 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: Support for HTML 5 placeholder attribute
Catalog Items & Record Producers
The same design works, with some minor adaptations. The scripts should be added to the 'Catalog Client Script' table instead. Also, 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'.
Styling Placeholders
Placeholders appearance can be easily modified via CSS, using the: :placeholder pseudo element.
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 Portal or mobile interfaces. The Mobile GlideForm (g_form) is currently too limited, and DOM Manipulation using stuff like $ and jQueryare 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.
Script examples… Ready to use
UI Script
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
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
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
}
}
Originally published in servicenow.implementation.blog by Shiva Thomas
20 Comments
