Notifications

78 views

Description

Description

As will be noticed by many users of the ServiceNow Platform, any field as displayed in a list can have a small icon added.  The icon can be configured to always appear for that field or to only appear in the event that certain conditions are met.

The following screenshot shows an example of an out-of-box configuration that is designed to display a special VIP image icon next to the Caller field on an list of Incidents if the Caller value populated in that field has the VIP field of that user set to a value of true.

Incident field icon on list view

The remainder of this article will describe the steps on how this can be accomplished.

Special Note: The procedures described in this article are NOT designed for the purpose of causing the icon to appear in the form view as associated to that field.  To cause the icon to appear in the form view, see KB Article KB0752116 which will describe the specific steps to allow an icon to be dynamically displayed on a form view.

Procedure

The first step in this procedure is to ensure the image you intend to add is found within the instance.  If the image is not currently already found on the instance (usually in the db_image table), this first step will thus consist of importing the image into the instance.  To do this, follow these steps:

Log into the instance with an account having admin rights to the instance.

Browse to the following location on the instance: Content Management -> Design -> Images.

A list of image type files as currently found on the instance will appear.  The list will probably be continued over multiple pages.  If the image is found in the list, make note of the value in the Name field for that image record.

 

Note that there is also another source of standard image icons on every instance.  These image icons are pre-configured on the instance out-of-box and cannot be modified, removed or have new images added to that particular collection.  To review this collection of images, use the following URL on the instance:

https://<Instance_Name>.service-now.com/nav_to.do?uri=%2Fimage_picker.do

Where <Instance_Name> is the name of the instance for which you are currently logged in.

These are standard image files that are actually found on the application server and thus cannot be modified or removed from the instance.  However, these images can (and currently are in several places) used as the source of icons or images displayed in various locations in the instance (such as on forms and lists).  The method of referencing these images for use in a form is slightly different, however, than described in this article.  Please see KB Article KB0752500 which provides more information on the use of these standard instance images.

 

If, as is more probable, the image is not already found on the instance, click the New button at the top of the list of db_image records which is currently displayed on screen to create a new db_image record type.

Supply a name in the Name field for the image you will upload to the instance.  This name need not be the same as the actual file name of the image which will be uploaded.  However, it should conform to normal file naming conventions (i.e. refrain from using special characters or spaces in the file name).  In addition, the file extension of the image should reflect the actual file type and extension as the file that will be uploaded.  The allowable file extensions are .gif, .png, .jpg, .ico, .svg, and .bmp.  For the purpose of adding an icon image on a form, it is usually recommended to use a very small, simple image as any image over 14 by 14 pixels will generally show as a cropped version of the image.

A Category for the image can also be selected if appropriate.  It should also be ensured the Active checkbox is selected.

Click the "Click to add" link found to the right of the Image field label.

The Choose an image file dialog will appear.  On this dialog click the Choose File button.

A File Browser dialog window will appear.  Using this browse dialog on your local machine, browse to and select the image file you want to upload to the record.

After selecting the file, click the OK button.

After a moment the file will complete uploading and most of the other fields in the Images record will be auto-populated based on information gathered from the uploaded image.

Adding new db_img record

Click the Update button.

This will then add the custom image to the instance which can then be configured for use as a field icon on a list (or at other appropriate locations in the platform).

 

After the image is found on the instance, the image can then be added as an image icon as associated to a particular field on a list.  The following steps describe one way this can be done.

Before beginning, ensure to be logged into the instance with an account having administrator rights to that instance.

Open any record from the table for which you want to add the image icon (i.e. Incident or Problem).

Right click the field label for the field for which you want to associate the image icon.

Configuring Styles for the Priority field on the Problem form

From the pop-up menu that appears, select the option Configure Styles.

A list of Style records as already associated to that field will appear, which is probably currently empty.

Click the New button on this list of Style records.

The Table and Field name fields should already be pre-populated with the correct information based on the field selected in the steps above.

If you intend to include a condition to have the image only appear in certain cases, this can be done in the Value field, by specifying a javascript: statement which evaluates to true or false, with a value of true indicating the image will display.  If preferred to have image appear next to every record (no conditions), the Value field should be left blank.

In the Style text box, the following text should be typed:

background-image: url('<Image_Name>');

Where <Image_Name> is the name from the Name field of the db_image record which contains the image you intend to have appear next to this field on the record.

Additional style attributes can also be added to this Style field to configure the field and image as needed:

  • For instance, if the uploaded image is showing cropped or is showing larger than expected, you may need to add the background-size style to adjust the image display as needed.
  • To prevent the image from also appearing in the field itself in pop-up views of the form, you may also need to specify the background-position style as well as the padding-right or padding-left styles.
  • To prevent the image from repeating itself in the same image space, the background-repeat: no-repeat; style setting may need to be used.

 

New Field Style record

 

After specifying these or any other additional Style information for the field, click the Submit button.

After saving the record, the image should then appear, as expected, on the selected field of the list as associated to the correct table.

Problem list showing custom icons in certain cases

Additional Information

Note that a different mechanism is needed to cause the same (or another) image to appear next to a field name on a form, as shown in this screen snippet:

The following KB Article will detail one method which can be used to cause such an icon image to display as needed on a form, in appropriate conditions:

KB0752116 - How to add an image icon associated to a field value on a form

Article Information

Last Updated:2019-08-02 20:39:28
Published:2019-07-05