Customize theme-able empty state images for your theme

Customize default theme-able empty state images for your Next Experience and Theme Builder themes using the theme's Imagery record.

Before you begin

Role required: admin

About this task

Important:

You can customize empty state images for Workspaces, but customization is not supported in the Core UI.

Procedure

1. Navigate to All > Now Experience Framework > Themes > UX Themes.
2. Select your theme from the UX Themes table.
   The UX Theme record for your chosen theme appears.
3. From the Compositional App Theme tab, select the Imagery record.
4. From the Imagery style record, enter the following empty state image theme hooks into the Style field.

   {
       "properties": {
           "--now-illustration--add-attachment-sm--url": "",
           "--now-illustration--add-attachment-md--url": "",
           "--now-illustration--add-attachment-lg--url": "",
           "--now-illustration--add-data-sm--url": "",
           "--now-illustration--add-data-md--url": "",
           "--now-illustration--add-data-lg--url": "",
           "--now-illustration--completed-tasks-sm--url": "",
           "--now-illustration--completed-tasks-md--url": "",
           "--now-illustration--completed-tasks-lg--url": "",
           "--now-illustration--error-sm--url": "",
           "--now-illustration--error-md--url": "",
           "--now-illustration--error-lg--url": "",
           "--now-illustration--first-time-user-sm--url": "",
           "--now-illustration--first-time-user-md--url": ""
           "--now-illustration--first-time-user-lg--url": "",
           "--now-illustration--interrupted-sm--url": "",
           "--now-illustration--interrupted-md--url": "",
           "--now-illustration--interrupted-lg--url": "",
           "--now-illustration--no-data-sm--url": "",
           "--now-illustration--no-data-md--url": "",
           "--now-illustration--no-data-lg--url": "",
           "--now-illustration--no-search-results-sm--url": "",
           "--now-illustration--no-search-results-md--url": "",
           "--now-illustration--no-search-results-lg--url": "",
           "--now-illustration--offline-sm--url": "",
           "--now-illustration--offline-md--url": "",
           "--now-illustration--offline-lg--url": "",
           "--now-illustration--permissions-sm--url": "",
           "--now-illustration--permissions-md--url": "",
           "--now-illustration--permissions-lg--url": "",
           "--now-illustration--unconfigured-sm--url": "",
           "--now-illustration--unconfigured-md--url": "",
           "--now-illustration--unconfigured-lg--url": "",
           "--now-illustration--no-activities-sm--url": "",
           "--now-illustration--no-activities-md--url": "",
           "--now-illustration--no-activities-lg--url": "",
       }
   }

5. Add your custom image in one of the following ways.
   • Add image to UX Style Assets list.
     1. On the UX Style Assets tab, select New.
     2. Select the Lookup iconnext to the Asset item.
     3. In the UX Theme Assets list, select New.
     4. Select the Manage Attachments icon to add an image.
     5. When the image asset is uploaded, close the Attachments window.
        Note:

        Verify that your image is in SVG format.
     6. Enter the file name of the asset in the Name field and select Submit. The asset is added to the UX Style Assets list.
     7. Select and hold (or right-click) on the asset from the UX Style Assets list, and select Copy sys_id.
     8. Enter the sys_id into the Style field using the following format: "/uxta/ENTERYOURSYSID.assetx"
   • Add your custom image to the Images [db_images_list.do] table.
     Note:

     Verify that your image is in SVG format.
     1. For detailed instructions, see Upload one or more images.
     2. From the Imagery style record, enter the image file name into the Style field using the following format: "/FILENAME.svg".
6. Select Update.
   The custom images appear in your theme.
7. Optional: Customize the colors of your empty state images using the UX Style color record associated with your theme to override the default theme hooks.

   For a step-by-step tutorial on editing your UX Style color record, see Exercise 3, Activity 2 and 3 of the Next Experience Workshop in the ServiceNow Community.

   Note:

   Using the default theme hooks is recommended.