Ui Builder

Learn how to apply the correct audiences to your UI Builder pages.

Learn how to add components to your page in UI Builder. A page is built by adding components.

Add a contextual sidebar to a page with UI Builder to display related content using a vertical tab structure.

Add data resources to dynamically expose data from tables, records, or other elements on your page in UI Builder.

Use the Form component to add one or more forms to UI Builder pages.

Learn how to add and configure a modeless dialog event, such as open, close, or minimize in UI Builder. A modeless dialog is a floating window containing content above a page.

Learn how to add a modeless dialog in UI Builder. A modeless dialog is a floating window containing content above a page.

Add a page from another experience so that users can access shared content without duplicating pages.

Add skills to enhance your UI Builder page with Now Assist's generative AI capabilities.

Set the styles for components and wrappers to change the default appearance.

Add a viewport within a modal in your experience.

Learn more about UI Builder using resources outside of the product.

UI Builder can be used by application developers with a variety of skill levels. We recommend developers with a high level of experience, sometimes referred to as pro-coders, perform the procedures in this section.

Understand what app shells are, what app shells are available for UI Builder, and why you would pick one over another.

Bind data elements within UI Builder so that you can add event actions to your components.

Assign event handlers within UI Builder to individual data resources on your page. When a data resource successfully fetches new data, it executes an event handler to take a user to the next step in a flow.

Bind data elements within UI Builder so that you can add event actions to a declarative action.

Use page event mappings to bind data elements within UI Builder so that you can add event actions to your page.

After you have created events, you can bind them to actions on your components, pages, data resources, and declarative actions.

UI Builder can help identify common configuration issues and guidance on how to fix them.

Add and modify your layout design to change the way your page looks. Choose how components are displayed on a page through Cascading Style Sheets (CSS) web layout technologies, such as Flexbox and CSS Grid.

Use client state parameters to bind values to component configurations. When the client state parameter's value changes, the component updates to use the new value.

UI Builder provides real-time collaboration tools and user presence indicators for more efficient and intuitive UI development.

Column layouts are used to design and organize UI Builder pages.

Learn how alert messages help you communicate feedback and status updates using both default and scripted approaches.

Create an interactive card layout to display records, add a dropdown to filter visible cards by name, and configure each card to open the full record in another UI Builder page when selected.

Configure a flyout menu that filters a task record list based on priority.

Learn how to use Component Builder to assemble reusable components for your UI Builder pages.

Reuse custom components across experiences and pages in UI Builder.

Change data visualizations in real time using a drop-down list to preview data in your experience.

Use the conditional renderer component to display content or components based on specified conditions.

Use Now Assist in UI Builder to configure event handlers. At present, you can configure link to destination, open or close modal, and view load requested event handlers using Now Assist in UI Builder.

Add one or more audiences to your page or page variant.

You can add and configure components as you build pages in UI Builder. You can also use repeaters to repeat components or multiple components with results from a data resource.

Use the data binding modal to associate data exposed by local data resources to components on your UI Builder page.

Bind data exposed by local data resources to components with formulas on your UI Builder page.

Bind data exposed by local data resources to components on your UI Builder page.

Set the conditions and manage the criteria that determine when a page variant is displayed. UI Builder page variants enable you to create different versions of a page to tailor content for a specific audience.

Build custom controllers to use across experiences. Easily connect reusable data, scripts, and events to your page and set up inputs, outputs, and events.

Controllers simplify the linking of data and event logic to enable component presets in UI Builder.

Convert a tab on a page to a viewport-enabled tab. Use viewport-enabled tabs to display third-party custom data, assign audiences, and create variants.

Explore facets of UI Builder to set you up for creating pages quickly.

Learn how to create a workspace or portal experience for UI Builder in the ServiceNow platform.

Create a page collection to accommodate tabbed content that can be used across experiences.

Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.

Create a simple counter by adding the stylized text component and two buttons to an experience page. Use a client state parameter to implement the functionality so that when the buttons are selected the count increases or decreases.

Create a UI interaction and attach it to a component event in UI Builder. UI interactions are reusable flows that combine UI, logic, and scripts into a single unit, including custom UI built with Component Builder, and can be triggered from any component event on a page.

A page variant in UI Builder is a variation of a page that exists at the same path that targets different audiences using user criteria.

Create a CSS Grid layout in UI Builder to build powerful pages so that you can customize with cascading style sheets (CSS) and can improve your performance.

Use style classes rules in UI Builder to apply custom visual styling to UI elements by referencing CSS classes.

Learn how to switch to the dark theme in UI Builder.

Sync data between ServiceNow tables and data with the pages you build with UI Builder. Pages display synced data in real time and update data/tables when a user inputs information.

Add and edit client scripts in UI Builder so that you can update the client state through events. You can bind these scripts to any component by using an event handler.

Delete an event handler that you no longer need in UI Builder.

Delete an event mapping that you no longer need in UI Builder.

Delete a UI interaction when it’s no longer needed or when you must replace it with a new version. Although UI interactions can be edited after creation, some foundational properties are intentionally locked to avoid data and runtime errors. In those cases, deletion might be required.

Locate dirty state components through event configuration.

You can disable event mappings that are automatically created by a component preset.

Duplicate a configured component to reuse on a page.

Create a duplicate of a demo UI interaction example to work with a separate, editable copy.

Create an independent copy of an existing UI interaction to use as a starting point for a new interaction or to safely experiment with changes.

Edit a page to change the page name, path, type, and parameters.

Edit or modify an existing UI interaction by inserting new steps, swapping or deleting events, removing steps, or updating step configurations in the diagram editor.

Edit page variant settings to add additional criteria to determine when the page variant displays to users.

Select pages that you want to share across experiences in UI Builder.

Enable the user criteria property to configure access for users based on role, department, group, location, or company in UI Builder.

With UI Builder, you can use the Entity View Action Mapper (EVAM) application to standardize how the data sources in your components are displayed in your cards and lists.

Add an Entity View Action Mapper (EVAM) data resource to your page in UI Builder so that you can standardize how the data sources in your components are displayed in your cards and lists.

Add an event handler to a page, component, data resource, or declarative action within UI Builder so that your user can trigger an action.

An event mapping in UI Builder is the process that enables you to map an event's payload or contextual values to the object or handler that acts on that event. The four event types are: component, page, data resource, and declarative action.

Use event payloads to link data to an action.

Learn about the UI Builder experience settings to build your own workspace and custom portal experiences.

Learn how to obtain data from different sources to use in a single component.

Create a Flexbox layout in UI Builder to build powerful pages so that you can customize with cascading style sheets (CSS) and can improve your performance.

Set focus on specific elements, ensuring users can interact with them effectively using screen readers.

Learn about UI Builder guided tours, including how to use them to build your knowledge and practice using UI Builder.

Learn how components can inherit page resources.

After you've created your demo experience and added a blank page, you can edit the page variant as needed. For the sake of this demo, you can create a button and a modal, and configure the button to open the modal.

After creating a demo experience, you can create a blank page that you can then build on to define what the experience provides to your users.

An experience in UI Builder is a collection of web pages for users to interact with an application. The experience includes routes, page variants, and the audience and conditions required for each variant, as well as experience settings.

After you've created your demo experience, you can create a record page from a template. A record page shows data from a table.

An audience represents a group of users in your organization. You can define who can access this page variant by adding one or more predefined audiences.

You can define conditions to determine when a page variant is shown. The conditions are based on setting an order, and declaring the criteria that must be met for the page variant to display.

Customize your form components by accessing Form Builder in UI Builder.

Follow these procedures to learn how components create the functionality you need in your UI Builder pages.

Exploring common use cases can be a great way to learn how to use UI Builder. Consider performing each of the tasks in this section in the order presented.

Learn how to navigate the UI Builder and explore some common use cases to learn by example.

Use legacy page templates to reuse a page definition, such as record or list page, for pages in your workspace or portal.

Add a link to the destination event handler within UI Builder so that an event action can open another page. You can also configure the event handler to follow the App Route to the desired page.

Themes enable you to change the visual style of your UI Builder experiences so that they express the look and feel of your brand

Use modals in UI Builder with components to provide alerts or calls to action for a user. UI Builder comes with modals to save time and effort.

Learn how to add a modal in UI Builder. A modal is a window that appears when you click a component. For example, a modal might display when a delete button component is clicked, prompting the user to confirm deleting a record.

Present data from multiple tables using components and control the layout and styling.

Learn how to navigate through UI Builder.

Now Code Editor is a rich-text editor like interface that supports Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), JavaScript, Extensible Markup Language (XML), and JavaScript Object Notation (JSON). Use Now Code Editor to modify UI configuration, data resource configuration, styles, events, client-side and server-side scripts in Next Experience UI Builder components.

Page Collections are groups of pages that can be used across multiple experiences.

Performance settings enhances leading speeds and user engagement by displaying high-priority content first, making key components interactive sooner for a faster perceived performance.

Change the general settings for your custom portal experience in UI Builder. For example, you can modify the title, description, and path for your portal experience.

Change the header, footer, and menu settings for your custom portal experience in UI Builder to fit the needs of your organization.

Show or hide the global search functionality on the public or private pages for your custom portal experience in UI Builder so that your users can search on the portal.

View the theme setting for your portal experience in UI Builder. The theme sets the visual style of the experience and provides a consistent look and feel across all pages.

Create presets to save time and make your component configurations reusable across different experiences.

Use component presets to automatically configure components on compatible pages.

Preview your experience in UI Builder to see how it looks and functions while building an experience. Previewing helps ensure that your experience works as expected, that the data resources are available, and that the layouts are set up correctly.

In UI Builder, use repeaters to repeat one or more components with results from a data resource.

Fix UI Builder page render errors by linking a page definition in the variant record.

When creating pages with responsive authoring for different form factors, learn how to adjust the layout to improve the look and feel of the page at smaller sizes.

When creating pages with responsive authoring for different form factors, learn how to change style options to increase the usability of the page at smaller sizes.

When creating pages with responsive authoring for different form factors, learn how adjusting some component configuration options can make pages look and work better at smaller sizes.

When creating pages with responsive authoring for different form factors, learn how to show or hide components by completing steps to hide an image at mobile size.

Learn how to create custom breakpoints for responsive authoring to control the look and feel of a page at different form factors.

Use responsive authoring to create UI Builder pages that adjust smoothly to different form factors (sizes), such as desktop, tablet, and mobile.

Use a template to create a page based on a pre-defined page template. A page template can help you create pages faster and keep pages consistent within an experience. Page templates may include components, data resources, and a layout.

Set up the security and roles for your UI Builder instance.

Create and bind a client state parameter value to a component in UI Builder. By adding custom values to your components, these components can then be automatically updated through a script.

Use the Tabs component to add tabbed content to pages in UI Builder.

Add test values to your URL as a way to bring test data into a page.

Attach a UI interaction to a UI Builder page event so the interaction runs when a user performs an action on a component.

Use UI Builder to create pages for your configurable workspace experiences.

Learn about the terms and concepts used in UI Builder (UIB).

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.

UI Builder is a web user interface builder. Use UI Builder to build pages for App Engine Studio generated workspaces or custom web experiences using Next Experience Components and custom web components.

You can change your UI Builder custom portal experience settings to affect how your users interact with your portal experience.

This quick start guides you through the process of creating your first page in UI Builder. Creating your first page is the first step in understanding how to build user interface pages for your workspace or custom portal experiences.

You can change the UI Builder workspace experience settings to fit your company goals.

Set alerts to automatically clear after a specified time period.

Domain separation is supported for UI Builder . Domain separation enables you to separate data, processes, and administrative tasks into logical groupings called domains. You can control several aspects of this separation, including which users can see and access data.

Some ServiceNow resources that can provide you with helpful information.

Use modeless dialogs on a UI Builder page to add a floating window that enables you to interact with both the window content and the page content below.

Use the Now Assist panel in UI Builder to request guidance, streamline page building, and better understand the content on your pages.

Use popovers on a UI Builder page to overlay contextual information or functionality to help users complete tasks.

Learn how to use the basics of UI Builder to create a page called My Tutorial.

Find details about UI interaction toolbox steps, organized by interaction type, with step descriptions and any available outgoing events. Steps are added to a UI interaction using the toolbox in the UI interaction editor. The available steps depend on the type you selected when you created the UI interaction, whether Generic, Form, or List.

Trigger UI interactions directly from events in UI Builder, allowing you to link event-driven behavior to reusable interaction logic.

Upgrade layouts created in Quebec and Rome to the new layout system.

Use pages created in one in experience in another without needing to rebuild the page.

Get a full understanding of everything that you can do when creating a page for your workspace or custom portal experience in UI Builder.

View the theme applied to your experience. The theme sets the visual style of the experience and provides a consistent look and feel across all pages.

Viewports are specialized components that enable you to extend your experience without needing to own the parent page in UI Builder. You can work with viewports in three ways. You can add a viewport component or a viewport-enabled tab to a page, or add a viewport to the Contextual sidebar component.

Learn what a component is in UI Builder. Also, see how components work within UI Builder.

Learn how to work with events so that you can add actions to components, pages, data resources, and declarative actions in UI Builder.

Learn what an experience is in UI Builder. Understand what an experience contains.

Column layouts organize components on a UI Builder page. Learn how column layouts are used in UI Builder.

Learn what a page is in UI Builder. Understand the building blocks of a UI Builder page, such as column layouts and components.

Add a viewport component to your page and create a subpage to create separate content on the page.

Demo UI interactions give you simple, ready‑made examples that demonstrate common UI Interaction patterns. You can duplicate these samples to explore how interactions work, experiment safely, and use them as starting points when building your own experiences.

Change the general settings for your workspace experience in UI Builder to fit the needs of your organization. For example, you can modify the title, description, and path for your workspace experience.

Show or hide the search functionality in your workspace.

Select pages for side navigation in your UI Builder workspace experience. From any page in the workspace experience, users can navigate to the pages you selected.

Set up the advanced notification and search settings in your workspace experience so that you can control how your users see notifications and search options.

View the theme setting for your workspace experience in UI Builder. The theme sets the visual style of the experience and provides a consistent look and feel across all pages.