Skip to main content

Exercise 3 - Activity 2

Prepare UX Style record for edditing​

The main record where the bulk of your color related changes will be made is the "Colors" core UX Theme Style record. When you click on it to open it, it will all be on one line and be hard to modify. We will walk through the steps required to make it easier to edit before we continue our editing.

  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 " Custom Wasabi Donut" under Name and click on the record to open it

  6. Open the "Wasabi donut - Colors" record.

  7. Click in the "Style" box and select the entire string of text. You can easily do this by clicking "CTRL+A" (or Command + A if you're on mac), and then "CTRL+C" to copy it (or Command + C if you're on a mac).

  8. Now that we have it in a clipboard, you are free to go to your favorite JSON Prettifier web application, in this example we'll be going to the one I frequently use: https://jsonformatter.org/json-pretty-print

  9. Navigate to the site: https://jsonformatter.org/json-pretty-print

  10. Paste your copied code in to the left box.

  11. Click Make Pretty.

  12. Copy the generated code on the right. You can easily do this by clicking "CTRL+A" (or Command + A if you're on mac), and then "CTRL+C" to copy it (or Command + C if you're on a mac).

  13. Navigate back to the ServiceNow tab we had open with our UX Theme Style record.

  14. Select the entire text again if it's not already selected and delete it.

  15. Paste in the copied code, you'll see it's much more readable now.

  16. Right-click the header, click "Save".

note

If you scroll up to the top of the code, you'll see "colorGenerationVersion" or something similar above the "base" colors. This is an easy way to tell if you are copying code from a Theme Builder theme, as the Polaris theme does not contain this string.