--- sourceDocument: Yokohama Build or modify applications sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/yokohama/application-development Release : - yokohama ft:locale : - en-US ft:publication_title : - Yokohama Build or modify applications ft:clusterId : - cadev bundleId : - cadev workflow : - Development, Data, and Analytics --- # Navigate the UI Builder application # Navigate the UI Builder application {#ariaid-title1} * Release version: Yokohama * * Updated January 30, 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read Summarize ![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete. ## Summary of Navigate the UI Builder application The UI Builder application enables ServiceNow customers to design and manage user experiences by creating and editing pages, components, and layouts within an intuitive interface. The main UI Builder home page provides quick access to recent experiences, creation options, and a search bar for locating experiences efficiently. Show full answer Show less ## Key Features * **Navigation Tabs:** Easily access and manage different elements such as Experiences, Page Collections, Controllers, and Presets via the top bar tabs. * **Experience View:** Centralized view to understand the structure of an experience with a Page and Variants list for selecting pages to edit. * **Interface Components:** * **Left Vertical Bar:** Provides access to main UI Builder areas. * **Top Bar:** Manage pages, page settings (availability, order, audience), preview pages, select domain, set application scope, view page errors/warnings, and save changes. * **Content Tree:** View and edit layouts, columns, and components on pages. * **Toolbox and Staging Area:** Add and modify column layouts and components directly on pages. * **Configuration Panel:** Adjust properties such as styling, events, and component configurations. * **Data Binding:** Use data resources to dynamically bind data from tables or records to components, enabling component reuse and dynamic content. * **Client State Management:** Define client state parameters with names, types, and initial values to control page behavior and preview changes. * **Client Scripting:** Automate page interactions and event handling through client scripts within UI Builder. * **Help and Learning Resources:** Access the UI Builder Learning Center for articles, videos, courses, and guided tours to build proficiency. Also includes a dark theme option for user preference. ## Practical Benefits With UI Builder, ServiceNow customers can efficiently create tailored user experiences by visually designing pages and components, binding data dynamically, and scripting interactions without extensive coding. The interface supports quick navigation, error checking, and previewing to ensure high-quality results. Learning resources are integrated to accelerate onboarding and mastery of the tool. Learn how to navigate through UI Builder. ## UI Builder home {#nav-uib__section_gh1_mvc_kvb} 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 {#nav-uib__section_ikk_5l3_fwb} The UI Builder experience view is a central place to view and understand the structure and details of an experience. Use the Page and Variants list to select a page to edit. Figure 1. UI Builder experience view ## Structure of UI Builder {#nav-uib__section_yyv_25q_snb} UI Builder is separated into the following areas. * 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](https://servicenow-prod.fluidtopics.net/lbgSPawmnq4nSCoyYyPbOg "Bind data exposed by local data resources to components on your UI Builder page.") 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. {#nav-uib__ul_k3g_3cr_snb} * **[UI Builder Learning Center](https://servicenow-prod.fluidtopics.net/gZHdJX~ik0DknXOOro7qeg)** Explore the UI Builder Learning Center for articles, videos, courses, and guided tours to help you get started and build knowledge. The Learning Center is a one-stop shop for learning fundamental features and basic guidelines in UI Builder. * **[Guided tours in UI Builder](https://servicenow-prod.fluidtopics.net/RJTcjcpwforJrdIGZOxfYw)** Learn about UI Builder guided tours, including how to use them to build your knowledge and practice using UI Builder. * **[Dark theme in UI Builder](https://servicenow-prod.fluidtopics.net/jjqsI63lMOglFGHIfx5Rjg)** Learn how to switch to the dark theme in UI Builder.