Navigate the UI Builder application
Summarize
Summary of Navigate the UI Builder application
The UI Builder application in ServiceNow provides a user-friendly interface to create, manage, and preview digital experiences. It is designed to help you efficiently build pages and page collections through an organized workspace that includes a home page, experience view, and various configuration tools.
Show less
Key Features
- UI Builder Home: Offers quick access to recently opened experiences, creation options for new experiences or page collections, and a search bar to locate experiences by name. Tabs at the top allow navigation between Experiences, Page Collections, Controllers, and Presets. A "What's new" link highlights the latest updates to UI Builder.
- Experience View: Central hub to view and manage the structure of an experience. It includes a Pages list with expandable variants and a search field to filter pages by name, URL, page type, or variant.
- UI Structure and Navigation: The left vertical bar provides access to core UI Builder functions. The top bar enables page navigation, access to Help, and control over page settings such as availability, order, and audience.
- Page Editing Tools: Includes a content tree for managing layouts, columns, and components; a toolbox for adding elements; a staging area for building pages; and a configuration panel to modify styling, events, and component settings.
- Data Resources: Allows binding data dynamically to components from tables, records, or other page elements, enabling component reuse and dynamic content delivery.
- Client State and Scripts: Facilitates setting client state parameters (name, type, initial value) and automating page behaviors through client scripting for event handling and more.
- Additional Learning Tools: The UI Builder Learning Center offers articles, videos, courses, and guided tours to support onboarding and skill development. Guided tours provide hands-on practice, and a dark theme option is available for user preference.
Key Outcomes
ServiceNow customers using UI Builder can expect an intuitive environment to design and manage digital experiences with structured navigation and powerful configuration options. The integration of data resources and client scripting enhances dynamic content and interactivity. Learning resources embedded within the platform help users build proficiency quickly, improving productivity and experience quality.
Learn how to navigate through UI Builder.
UI Builder home
The UI Builder home page provides easy access to recently opened experiences, options for creating experiences or page collections, and help for getting started using UI Builder. You can also use the search bar to quickly find your experiences by name.
You can access the list of experiences in the top by selecting the Experiences tab in the top bar.
You can access the list of page collections in the top by selecting the Page collections tab in the top bar.
You can access the list of controllers in the top by selecting the Controllers tab in the top bar.
You can access the list of presets in the top by selecting the Presets tab in the top bar.
Select the What's new link in the header to view the latest changes to UI Builder.
UI Builder experience view
The UI Builder experience view is a central place to view and understand the structure and details of an experience. Use the Pages list to see all pages and expand them to view associated variants. Locate pages or variants using the search field, which supports filtering by name, URL, page type, or variant.
Structure of UI Builder
- Use the left vertical bar for access to the following in UI Builder:
- Use the top bar to access pages in the experience and view Help. Change page settings, such as availability, order, and audience. Preview and open the URL path for the page you're editing to see what the page looks like
for users. You can also select a domain and set application scope. View page errors and warnings by selecting the icon next to the save
button. And finally, click the Save button often to save your page.
- Use the content tree to view and edit column layouts, columns, and components on your pages.
- Add column layouts and components to your page using the UI Builder toolbox.
- Work in the UI Builder staging area to build and modify your pages.
- Go to configuration panel to modify column layouts, columns, components, styling, and events.
Data resources: Bind data to your components using data resources to dynamically expose your data from tables, records, or other elements on your page. Data resources enable you to reuse your components. See Connect data to your components for more information.
Client state: Set the parameters for the client state for your page. The client state parameters consist of a name, a type, and an initial value. You can see the preview of the client state parameters.
Client scripts: Scripting automates aspects of the page, like event handling.