How to add an image icon next to a field value on a form - Support and Troubleshooting

How to add an image icon next to a field value on a form Issue It may be noticed that on a few forms on out-of-box instances, there are certain cases in which a small icon or image will appear next to a specific field on that form, usually to indicate some specific field value set for that field.

This article will describe how this can be done for just about any field on any standard form.

Procedure There are several steps required in order to configure the instance to display such icons. The first such step is to ensure that the image which is to be displayed on the form is currently found on the instance. If the image is not found on the instance, it can easily be added using these steps:

Log in to the instance with an account having admin rights to that instance. Browse to the following location on the instance: Content Management -> Design -> Images . A list of db_image records will appear. These records correspond to specific images that are currently found on the instance that can be used for various purposes The list will probably span over multiple pages. If the image you intend to use is already found in this list, make note of the value in the Name field for that image record as there will thus be no need to upload it again. 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 the screen to create a new db_image record. 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, this name 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 extension which can be used 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 small, simple image as an image over 14 by 14 pixels will generally show, in this context, as a cropped version of the image. A Category for the image can also be selected if needed and it should also be ensured the Active checkbox is selected for this new db_image record. 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 form, 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 db_image record will be auto-filled as necessary. Click the Update button to save the record. The new image record will then be found in the db_image table and is available for use as an image icon in various locations within the instance. Note that there is also another source of standard image icons on the instance. These image icons are pre-configured on the instance and cannot be modified, removed, or have new images added to this particular collection. To review this collection of images, use the following URL on the instance:

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

Where is the name of the instance for which you are currently logged in to.

These are standard image files that are actually found on the application server and thus cannot be modified or removed on the instance. However, these images can (and currently are in several places) used as the source of icons or images in various locations in the product. The method of referencing these images for usage in displaying on a form is slightly different than described in this article. Please see the product documentation, Upload one or more images , which provides more information on the use of these standard instance images.

Once the image is found on the instance, we can then create the objects to display the image on the form as needed. Thus, we will first want to determine the table form and the specific field for which we want to have the image appear (for instance the Priority field on the Incident record form).

There are actually multiple ways such an image or icon can be made to appear on a form, but for this article (and example) we will do this through the creation of a Client Script record.

Thus, a new Client Script record should be created. This can be done by accessing System Definition -> Client Scripts . From the list of Client Script records that will appear, click the New button.

The fields on the new Client Script record should be filled out as appropriate for the specific table and field for which the image is intended to be associated with:

Name : A name should be provided which is indicative of what the Client Script does (Such as "Show Icon for High Priority").

The Table field should be set to the table for which the form is associated with that will display the image (for this example Incident).

The UI Type should be set based on what type of device the image should appear (Desktop, Mobile, or Both). Images and forms may appear significantly different on a Desktop or Mobile device, so you may need to create differing Client Scripts for each type of device to allow the document to display properly in both device types.

In most cases, the Type field should be set to onChange . Other options are selectable, however, the onChange event will occur anytime the selected field value (as set in the Field name field) changes, including on the initial display of the record.

The Field name field should be set to the field for which this image should be associated (for this example, Priority).

A Description can be provided that gives a basic description of the function of this Client Script record.

The Active field should be set to true in order for the Client Script to work and display the image as necessary.

In the Script field, the functionality will be added to add the image to the form and also control the specific conditions for which we intend to have the image display on the form.

The specific algorithm to be used in this field will be different for every case, so the exact data will not be displayed. For this specific example, we will cause the db_image record as uploaded in the previous steps to appear to the right of the Label corresponding to the Priority field on the Incident form.

In the simplest form, the script would consist of ServiceNow Javascript to add a style to the label of the field for which we want to display this image. Before doing so, we will need to determine the name for which the Document Object Model (DOM) refers to that label as found on the rendered page. One way we might determine this is to open any record of the appropriate type and view the page source for the frame containing the form. We might then review the page source to find the id or name of the div or label field which corresponded to the element on the form for which we wanted to associate the image (for this example we find that the id of the element is element.incident.priority).

Thus, as a very basic example, in which the image should appear next to the label for every record, the following might be found in the Script field of the Client Script record:

function onChange(control, oldValue, newValue, isLoading) { var priorityLabel = $('element.incident.priority'); priorityLabel.setStyle({backgroundImage: "url(images/icons/vip.gif)", backgroundRepeat: "no-repeat", backgroundPosition: }

In most cases, the specific Script will probably be somewhat more complex, as the administrator may prefer to have the icon appear conditionally and may want to manipulate other fields, labels, or apply additional styles.

After adding the appropriate script into the Script field, the other fields can be set as needed in the record (i.e. description, Inherited, etc).

Click Submit or Save to save the Client Script Record.

If everything is working as it should, the image should then appear as specified in the Client Script.

The script may need to be modified to adjust the positioning and or conditions when it will appear.

Related Links Note that these procedures will not cause the image to appear on a list view of the record. However, a similar process can also be followed in order to cause the same (or a different) icon or image to appear adjacent to a field in the list view, such as shown in the following screenshot.

The following KB Article describes the steps necessary to display such an image or icon in a list view:

KB0751636 - How to add an image icon next to a field value in a list