Skip to main content

Exercise 1 - Activity 2

Edit and preview a theme in the Editor​

After going through the built-in wizard and generating a theme, the theme can be edited on the Editor page, which provides more granularity and options to preview theming selections. This section will walk through the Editor page layout.

  1. The Editor page should be visible, and the page pill next to the Theme Builder logo has Editor selected at the top left corner.

    note

    When creating a theme in the instance the first time, a tour modal may appear. For the lab, the tour can be skipped.

  2. The Editor page contains three sections:

    1. On the left, there is the configuration panel, where Global style adjustments can be made, and Component styles displays frequently used components.

    2. On the right is the UI styles preview and Experience preview section where selections from the configuration panel are rendered.

    3. The header displays the current page, theme, application scope, the ability to apply the current theme, feedback button, and a status icon.

    note

    The Feedback link will show a modal where feedback can be directly submitted to the ServiceNow Theme Builder product team in a customer instance. It is not used for this lab.

  3. In the configuration panel on the left, the Global styles tab displays an overview of the theme, color, imagery, font, and shape selections. The overview displays the selection made in the built-in wizard to edit global styling quickly.

  4. Click on each of the icons to view the configurations that can be made:

    1. Color: The Your brand palette section contains the base set of colors used to generate the interface colors. The UI colors section contains the colors that are generated automatically based on your brand colors. The UI colors can be changed at any time.

      note

      The UI colors section has a dropdown to show preview colors and All colors. Preview colors are the ones that can be rendered in the preview area in Theme Builder. All colors will display options that are not able to be previewed in Theme Builder and will have to be viewed after applying the theme to the instance.

    2. Imagery: The logo that applies to the Unified Navigation header.

    3. Typography: The font selection is applied globally to create a cohesive typography experience, users will see it in headlines, titles, subtitles, body copy, and captions.

    4. Shape: Corner styling, controls the corner radius of components. Current options are square, less rounded, more rounded, and most rounded.

Preview a theme on different experiences​

In the previous section, the UI styles preview was used to provide an overall preview of a theme on the instance and workspace pages. The Experience preview option is used to preview a theme on specific experiences that are installed on the instance.

  1. On the Editor page, under the preview section click the Experience preview tab at the top center of the preview area.

    note

    You may receive a 403: You do not have permissions to access this page error, this means as an admin you do not have the roles to the experience that is on your instance and need the necessary roles added to view the experience.

  2. At the top left of the preview area is an Experience picker, click on the experience name or the down arrow to see a list of experiences on the instance. Clicking the box and arrow icon will open the experience in a new tab.

  3. In the experience list, select CMDB Workspace and notice how the experience loads in the preview pane and the theme is applied to it.

  4. Click through the experience menus such as Unified Navigation App (Next Experience UI), Governance, CMDB 360, etc. to view how the theme loads on different pages of the experience.

Preview theme selections in frequently used components​

In the previous sections, the Global styles tab was used to configure additional styling selections and the multiple experiences were previewed with the selections. This section will walk through the Component styles tab in the configuration panel.

  1. On the Editor page in the configuration panel to the left, click on the Component styles tab to preview theme choices in frequently used components.

  2. The preview area will display how the theme is applied to commonly used components, this is helpful in reviewing how selections will apply to components such as Buttons, Dropdowns, etc. without cycling through experiences or drilling down into the UI Styles preview. Less common components might not be shown in this preview.