How to add an image icon next to a field value in a list - Support and Troubleshooting

How to add an image icon next to a field value in a list Issue On the Now Platform, any field that is 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 a list of Incidents if the Caller value populated in that field has the VIP field of that user set to a value of true.

Note: The procedures described in this article are NOT designed for the purpose of causing the icon to appear in the form view associated with that field. To add an icon to a field in the form view, see KB0752116 - How to add an image icon next to a field value on a form . Procedure The first step in this procedure is to ensure the image you intend to add is available in the instance. If the image is not currently already found on the instance (usually in the db_image table), this first step will 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 that are available 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:// .service-now.com/nav_to.do?uri=%2Fimage_picker.do Where 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) be 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 from the one described in this article.

If 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 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. 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 available on the instance, the image can then be added as an image icon associated with a particular field on a list. The following steps describe one way this can be done.

Log into the instance with an administrator account. 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. From the pop-up menu that appears, select the option Configure Styles . A list of Style records already associated with 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 an 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(' ' ); Where is the name from the Name field of the db_image record which contains the image you intend to show 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. 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 associated with the correct table. Related Links 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 with a field value on a form