Enhance your forms with icons using addDecoration!

General Add comments
by:


Do you have forms with many mandatory fields? Are your users complaining they can’t save their record after filling just one mandatory field? Then worry no more and addDecorations!

ServiceNow gives you the option to place one of their many icons along with a popup description in front of each field label. Below I will describe some ways you could use this feature:

  • Use icons in front of fields instead of making them mandatory (our use case for this blog)
  • Mark fields with an icon if they are going to be updated by for example an aSync interface
  • Decorate a field to draw the users attention and supply extra information.

For our case we have a form that contains a lot of mandatory fields and users have mentioned they are having trouble filling all the fields in one session and would like to save their entries in between.
In this form we have 4 mandatory fields in the new phase, lets replace them with icons.

First we ensure the fields are no longer mandatory and create an onload UI policy that will apply our icons. The script we will use to add icons is the following:

g_form.addDecoration('field to be decorated', ‘icon you want to be shown’, ‘icon info text’);

An example would be:

g_form.addDecoration('category', 'icon-alert', 'Mandatory for next phase');

Our onLoad UI policy script section will look like this:

Because we are using an onLoad UI Policy combined with an if for each field, the decoration will only load if the fields are empty when loading the form. This gives the user a clear overview of what still needs to be updated to proceed.
The end result of our form will look like this:

The icon-alert is shown and when the user hovers over the icon, the info text you entered in the UI Policy script is shown. Notice how the category field does not show an icon as the user has saved the record after updating the category.
The fields should still be mandatory, so it is up to you to check all fields contain a value before, for example, proceeding to the next phase of the change. If all mandatory fields are not filled in, you can simply refer to the fields showing an icon instead of having to mention all fields that should be filled.
ServiceNow offers a wide range of icons, like the icon-alert we used earlier, that can be used and you can find them in Collaborate -> Administration -> Action Icons.



So what creative ways can you think of to use decorations? Let us know!


.img[at].img

Leave a Reply