Understanding page navigation
Workspace generally offers two options for page navigation: breadcrumbs and tabs. Your page navigation is determined by the app shell you select.
Workspace navigation can't be easily changed once you start implementation.
Consider the following navigation options carefully.
Tabs
Tabbed navigation is provided by the workspace app shell. Tabs allow users to open each record in a separate tab, group related records, and quickly switch contexts between incidents, cases, and other info.
Use tabs when…
- Your users are trying to resolve as many tasks as possible as quickly as possible.
- They need or want access to multiple records at a time.
Workspace tabbed navigation
Breadcrumbs
Breadcrumb navigation is provided by the breadcrumb app shell. Breadcrumbs simplify the nav experience, limiting users to a single view at a time. This allows space to create more focused, web-app-like views of a single task. Breadcrumbs also display in a hierarchical structure at the top of the workspace as the user navigates through their flow, so they can easily see where they’ve been and how information is connected.
Use breadcrumbs when…
- Your users are generally focusing on one task at a time.
- They’re working on “long-tailed tasks” that may take days or longer to resolve.
- They need an understanding of underlying data, hierarchy, and organization.
Workspace breadcrumb navigation
Understanding pages
Pages are containers you use to structure the content in your workspace layout. Workspaces have three basic page types: landing pages, lists, and record pages.
Landing page
List page
Record page
Landing pages
Landing pages quickly orient users to a workspace, help them understand status, and identify the work that needs to be done. They should be used to drive a user to act and focus on the next best thing to do during their workday.
Is a landing page the same thing as a dashboard?
While landing pages may look like dashboards, it’s worth keeping in mind that they serve different purposes and are built using different technical frameworks. Landing pages support the work that needs to be done now, while dashboards support analytical tasks like tracking progress or understand patterns.
Lists
Lists are used to group records related to user workflows and make them easily accessible. You can configure default lists and show or hide relevant information based on your understanding of what different user roles will need access to. Users can also modify their view of the default lists and define their own custom lists.
The list menu can be launched from the side navigation and enables users to see all records of a specific type, or curated views of the data available to them.
Record pages
A record is an instance of data from a table on the platform, like an incident or a case. A record page is used to the display the details of a specific record. You can tailor record pages to show the relevant details and actions a user might need to complete their task. Workspace users are often working with multiple records at a time to get their work done.
As you create your workspace, you can decide how to use the following elements on each record page to optimize the efficiency and efficacy of your teams.
Record page anatomy
Workspace record page anatomy
Record header
The record header provides context for the specific record, and includes the record title, name-value pairs, tags, and actions.
Label-value pairs (optional): Use the label-value pairs to give users insight into the record by pulling contextual values from the record form.
Record tags (optional): Use record tags to allow users to tag records at three distinct scopes: Me, Groups and Users, and Everyone. When users add a tag to a record it allows the creation of custom lists within the List module filtered on the defined attributes.
Actions: The record actions slot exposes actions the user may want to take on the record.
Related lists
Related lists can be added to a record to allow the user to see additional lists of information tied to a specific record. These lists can be exposed on the record page as tabs below the record header.
Secondarily, if your record has many related lists, you can show them as a single tab containing a list selector and list pane.
Record form
Use a record form to enable users to edit and update record data.
Learn more about how to build a form layout with Form Builder.
Activity stream
By default, record pages include the activity stream. The activity stream is a list of entries in records and conversations, such as journal fields, comments, and work notes that display chronologically.
Use the activity stream to allow users to track changes, comments and system actions that have occurred across the record.
Contextual side panels
Contextual side panels provide a flexible and efficient way to display and interact with related content within a record.
For more info, view the contextual side panel pattern.
Playbooks
Use playbooks to help agents visualize workflows in a simplified, task-oriented view, reducing the time needed to understand and resolve cases.
Configuring pages
Modular components make it easy for you to tailor your workspace to meet the needs and expectations of your target audience. UI Builder is the application you'll use to work with those components on the Workspace app framework.
UI Builder helps you manage and organize components on your workspace pages.
The application also allows you to create multiple variants of each page with different components and data for each role or persona you're building for.
Screenshot of UI Builder editing a list component in a container.
Building custom components
If you need a component that isn't currently available in our component library, you can use your preferred development tools with the ServiceNow CLI to create custom components.
Theming
Use Theme Builder to apply theming across your instance with a series of simple configurations.
Configure the following elements with Theme Builder:
- Logo: company or brand logo
- Color palettes: interface colors that represent your brand
- Font family: change the globally applied fonts
- Corner shape: define shapes of on-screen components
Screenshot of Theme Builder with a custom theme already configured in the left panel.