Navigate the UI Builder application
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.
UI Builder home page.
You can access the list of experiences in the top by selecting the Experiences tab in the top bar.
List of experiences on the UI Builder homepage.
You can access the list of page collections in the top by selecting the Page collections tab in the top bar.
List of page collections on the UI Builder homepage.
You can access the list of controllers in the top by selecting the Controllers tab in the top bar.
List of controllers on the UI Builder homepage.
You can access the list of presets in the top by selecting the Presets tab in the top bar.
Presets tab displays presets
You can access the list of UI interactions in the top by selecting the UI interactions tab in the top bar.
UI interactions tab displays list of UI interactions.
Select the What's new link in the header to view the latest changes to UI Builder.
What's new modal with a list of 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.
Experience view for the Admin Center experience.
Structure of UI Builder
UI Builder is separated into the following areas.
- Use the left vertical bar for access to the following in UI Builder:
Left vertical panel 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.
Top bar of UI Builder.
- Use the content tree to view and edit column layouts, columns, and components on your pages.
Content tree in UI Builder.
- Add column layouts and components to your page using the UI Builder toolbox.
Basic layout options in the toolbox.
Component library in the toolbox showing first eight available components.
- Work in the UI Builder staging area to build and modify your pages.
Stage area of UI Builder.
- Go to configuration panel to modify column layouts, columns, components, styling, and events.
Configuration panel in UI Builder.
- 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.
Data resource panel displaying a Look Up Multiple Records
- 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 state parameters found in the data shelf.
- Client scripts: Scripting automates aspects of the page, like event handling.
List of client scripts.
- UI Builder Learning Center
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
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
Learn how to switch to the dark theme in UI Builder.
Parent Topic:Learning UI Builder