Skip to main content

Exercise 3 - Activity 1

Locate the UX Theme record​

  1. Navigate to the platform view of ServiceNow where you can see the Unified Navigation

  2. In the top left corner, expand the All menu if it's not expanded already.

  3. Type "Theme" in to the Filter Navigator.

  4. Under "Now Experience Framework" find and click on Themes.

  5. This will bring up the UX Themes table. Search for "Wasabi Donut" under Name and click on the record to open it.

note

The "Active" checkbox does not denote whether it is the currently active theme being used by the instance. That is governed by a system property we will cover in a later activity.

Clone the UX Theme Style records​

Here you can see the UX Theme Styles in the center of the page, these are what determine all the different configurations of your theme. You will repeat the following steps for each of the records listed there:

  1. Right click on the name of the Style record Mobile Colors.

  2. Click Open in New Tab.

  3. At the top in the Name field, add "Wasabi Donut - " to the start of the name field, it should now display "Wasabi Donut - Mobile Colors".

  4. Right-click the gray header and select "Insert and stay".

  5. Close out of this tab.

  6. Repeat this process for the rest of the UX Theme Style records. You should end up with new records named:

    • Wasabi Donut - Mobile colors

    • Wasabi Donut - Shape and Form

    • Wasabi Donut - Colors

    • Wasabi Donut - Imagery

    • Wasabi Donut - Typography

    note

    The records will not show up in the UX Theme Styles of the theme you are currently in, this is expected behavior.

Clone the UX Theme Record​

  1. Change the name to "Custom Wasabi Donut"

  2. Right-click the gray header and select "Insert and stay"

  3. We are now in our new UX Theme record. You can see the UX Theme Styles are now empty, this is to be expected. We will now go through and add each of our UX Theme Styles one by one.

  4. Double-click the blank box under "Style" to bring up the lookup field.

  5. Search for "Wasabi Donut - Mobile colors" and select it in the lookup pop-up.

  6. Click the green checkbox

  7. Double-click the blank box under "Type" to bring up the drop-down.

  8. Select "Core".

  9. This associates your UX Theme Style record to the current UX theme. Repeat the process for the other 4 records we created above.

  10. Right-click the header and click Save to save your changes. As long as the green bars are next to the lines you added, the changes haven't been saved. Be careful not to lose your work!

Set the new Theme as our instance's theme​

  1. Navigate back to the "Custom Wasabi Donut" UX theme if you are no longer on the page.

  2. Right-click the gray header and select Copy sys_id.

  3. In the filter navigator to the top left, type sys_properties.list to pull up the system properties table.

  4. Look up the glide.ui.polaris.theme.custom system property.

  5. Set the value to be the sys_id you just copied. (Note: it will be different from what is in the screenshots)

  6. Click Save.