Lab 7 Theming and Menus
Lab objectives
In this lab, you will review the Theme record associated to the Safety Portal experience and make a few style adjustments. You will also create a Theme preview page, to review how common components will look using different themes. Then you will add the navigation menu back to the portal and configure its contents.
A. View the Theme Record
Locate and rename the theme record used for the Safety Portal experience.
1. Within UI Builder, open the Safety Portal and select the Safety Home Page defaultpage.
2. Select Menu at the top of the page and choose Edit experience settings.
3. Choose Branding and theming on the left, select the Open current theme link which opens the Light Theme UX Theme record in a new browser tab.
4. In UI Builder, use the X in the upper right corner to close the Safety Portal settings window.
5. Navigate to the Light Theme record that was opened in the previous step. It was automatically created when the Safety Portal experience was created within AES. Notice it extends Default theme.
6. Update the Name to Safety Theme, right-click on the form header, and select Save to remain on the form. Leave this browser tab open as you will update this record later in this lab.
B. Create the Theme Preview page
Create a Theme Preview page to allow you to see how common components will look (such as colors, text, buttons, and form controls) with the currently selected theme.
1. Within UI Builder, select Menu at the top of the page and choose Create page.
2. Within the Select a page template window, select View legacy templates.
3. Scroll down through the rows of legacy templates, choose Theme Preview and select + Select legacy template.
4. Within the Page Settings dialog window, specify the values below.
- Name of page: Theme Preview Page
- Path: theme-preview-page (automatically populates)
- Use the original page (customization limited): selected
5. Select Create.
6. Select Open in the URL bar, to view the Theme Preview Page in a new browser tab. It currently shows how various components look with the Safety Theme applied to them (see image below). Leave this browser tab open.
Note: If the Theme Preview Page is not opening in a new browser tab, check and see if your pop-up blocker is blocking it.
7. Change the theme of the Safety Portal to see how the components look differently within the Theme Preview Page. In UI Builder, select Menu at the top of the page and choose Edit experience settings.
8. Select Branding and theming on the left, update Themes to Starter Workspace Theme, and select Save all changes. Use the X in the upper right corner to close the Safety Portal settings window if needed.
9. Refresh the Theme Preview Page that is currently open in the other browser tab.
Notice the Starter Workspace Theme has some varying styles, including different primary colors.
Note: If you don’t see the Theme preview page updating to match the colors shown above, try clearing your instance cache by adding /cache.do to the end of your instance url. (i.e. https://xxx.lab.service-now.com/cache.do). Then select Open in the
URL bar of the UI Builder once again to reload the Theme Preview Page.
10. Change the theme of the Safety Portal back to the Safety Theme, select Save all changes and close the Safety Portal settings window if needed.
C. Add and Configure a Portal Menu
1. Within UI Builder, select the Safety Home Page default page.
2. Select Menu at the top of the page and choose Edit experience settings.
3. Select Navigation and menus on the left, check the Navigation Menu checkbox, and select Save all changes.
4. Select the Advanced navigation menu settings link, then use the X in the upper right corner to close the Safety Portal settings window.
5. A new browser tab opens with a UX Page Property record, displaying the Safety Portal’s chrome_menu property. The Value field contains a JSON object defining the current menu items for the portal. Leave this browser tab open.
6. Within UI Builder, select Open in the URL bar. This will open the Safety Home Page in a new browser tab. Notice the Menu bar now being displayed. Click on each menu item to see what they look like and what they do. Leave this browser tab open.
7. Navigate back to the browser tab with the UX Page Property record displayed.
Delete the contents of the Value field, copy the following JSON object into it, and select Update.
[
{
"value": {
"label": {
"translatable": true,
"message": "Menu"
}
},
"children": {
"items": [
{
"value": {
"label": {
"translatable": true,
"message": " "
}
},
"children": {
"items": [
{
"value": {
"label": {
"translatable": true,
"message": "Safety Home Page"
},
"type": "route",
"value": {
"route": "safety-home-page"
}
}
},
{
"value": {
"label": {
"translatable": true,
"message": "Request Security Escort"
},
"type": "route",
"value": {
"route": "catalog",
"fields": {
"sysId": "10d3fcf8c61122760123e82b282c0c50"
}
}
}
},
{
"value": {
"label": {
"translatable": true,
"message": "servicenow.com"
},
"type": "external",
"rightIcon": "open-link-fill",
"value": {
"href": "www.servicenow.com"
}
}
}
]
}
}
]
}
}
]
8. Navigate back to the browser tab with the Safety Home Page displayed and refresh it. Verify the navigation menu was updated and looks the same as the image below.
D. Update the Theme Record
1. Navigate back to the browser tab that has the Safety Theme record open. If it was closed, refer to step 3 in section A above to reopen it.
Within the Legacy: Experience Theme form section, replace the current Theme style values with the block below to update the primary colors and add a gray button border.
{
"canvas-nav-item--main-nav-navigation--selected--box-shadow": "var(--now-color--primary-3)",
"canvas-menu--background-color": "var(--now-color--primary-0)",
"--now-button--border-radius": "4px",
"--now-color--primary-0": "228, 230, 231",
"--now-color--primary-1": "41, 62, 64",
"--now-color--primary-2": "129, 181, 161",
"--now-color--primary-3": "71, 77, 82",
"--now-color--primary-4": "82, 116, 255",
"--now-button--border-width": "2",
"--now-button--secondary--border-color": "var(--now-color--primary-4)",
"--now-button--primary--background-color": "var(--now-color--primary-4)",
"--now-card--border-radius": "4px"
}
2. Right-click on the form header and select Save, to remain on the form.
3. Update the logo using the safety_logo.png you downloaded previously. Within the UX Theme Assets embedded list (see image above), select the existing now-logo-dark record to view its form.
4. Select the Manage Attachments (1) link in the form header to open the attachments modal dialog.
5. Select Choose file and find the safety_portal_logo.png file you previously downloaded in the course.
6. Select the checkbox to the left of the existing ServiceNow_logo_GG.png file and select Remove.
7. Select X to close the modal.
8. Change the Name to safety-portal-logo and select Update.
9. Navigate back to the browser tab with the Safety Home Page displayed and perform a hard refresh (cmd+shift+R or ctrl+shift+R) to ensure the logo changes.
Note: Note: It is probably a caching issue if the logo doesn't change, in which case, try opening the Safety Home Page in another browser to see if it shows up there.
10. Verify the following changes.
• It has a new logo in the upper left
• The menu header background is now light gray
• The Report issue button in the header is purple
• The Log a Safety Issue button now has a thin purple border