Web Experiences
In Lesson 3, we'll explore the concept of web experiences and the app shells that define the foundational structure of your user interfaces.
Understanding App Shells
UI Builder supports the creation and configuration of two distinct types of baseline web experiences, which are determined by the app shell you select.
In essence, an app shell serves as the encompassing framework for the content within an experience page, establishing its general appearance and functionality.
App Shells Explained
App shells can be thought of as the shared user interface and behavioral components that envelop an entire experience, often referred to as the "Chrome" of the user interface.
While app shells consist of components like any other part of the page, they also incorporate essential capabilities common to every UI in ServiceNow.
These encompass session management, roles, access control lists (ACLs), preferences, and user information.
To access this shared data within UI Builder, you can utilize data resources, which facilitate data binding. We'll delve deeper into data resources in a subsequent lesson dedicated to this topic.
Types of Baseline App Shells
UI Builder provides two baseline app shells for your web experiences:
- Agent Workspace App Shell
- Portal App Shell
Agent Workspace App Shell:
Designed to create a graphical user interface for agents, consolidating multiple tools onto a single page for efficient handling of user requests.
This app shell includes features such as a left-hand navigation menu and a global header with user profile, search, and various menus.
Portal App Shell:
Tailored for broader portal experiences, it serves different functionalities compared to the Agent Workspace App Shell.
UI Builder is not yet capable of building or configuring out-of-the-box Service portals, like Employee Center. Continue to use the Service Portal Designer instead.
An experience can be created from within App Engine Studio or from within UI Builder. Watch the videos below to view both options.
Creating Experiences
Experiences can be created either within App Engine Studio or directly within UI Builder. For detailed instructions, you can watch the provided videos, which demonstrate both options.
Access Control Rules (ACLs)
It's essential to note that if you didn't create your workspace or portal experience within App Engine Studio, you may need to edit its ux_route read ACL record to grant appropriate user access.
When creating experiences in App Engine Studio, the ACL rule is established with the roles you specify during the experience's creation.
Here are the steps to view and edit the ACL rule:
Ensure your user has the "security_admin" role.
Elevate your roles:
- Select your username on the top banner.
- Choose "Elevate Roles" from the User menu.
- Check the "security_admin" checkbox and select "OK."
Within UI Builder, select the Page Options menu icon (three vertical dots) and choose "Open Security ACLs."
The Access Controls list view will open in a new tab, displaying the "ux_route read" ACL record for your experience. Select the record to view its form.
Update the "Requires role" list by adding or removing roles as needed and select "Update."
Elevate Roles
- ux_route read ACL
Knowledge Test
Q1: What is an app shell? Select two answers.
- Applies a Theme to style an experience
- The wrapper of the contents for an experience page
- Defines the data to be used in an experience
- Defines the general look and feel of an experience
Q2: Which two types of app shells can be used to configure an experience using UI Builder?
- Portal App Shell
- Dashboard App Shell
- Knowledge App Shell
- Workspace App Shell
Next
In Lesson 4, we'll continue our exploration of UI Builder, focusing on the creation of pages and the configuration of components to craft engaging web experiences.
Lesson 4: Creating Pages and Configuring Components
Stay with us as we dive into the practical aspects of UI Builder, where you'll learn to shape pages and components to bring your web experiences to life.