--- title: Add and configure components description: Learn how to add components to your page in UI Builder. A page is built by adding components.Learn about the various functions supported in the UI Builder component formula editor. locale: en-US canonical_url: https://www.servicenow.com/docs/r/australia/application-development/ui-builder/add-components.html release: australia product: UI Builder classification: ui-builder topic_type: task last_updated: "2026-03-12" reading_time_minutes: 13 breadcrumb: [Configure components and repeaters \(advanced feature\), Advanced UI Builder, UI Builder, Builder library, Developing your application, Building applications] --- # Add and configure components Learn how to add components to your page in UI Builder. A page is built by adding components. ## Before you begin Role required: ui\_builder\_admin ## About this task Components are the building blocks used to create custom pages in UI Builder. Learn how to add a component to a page. After you add a component to a page, you must configure the component. For more information about configuring components, see [Component documentation](https://developer.servicenow.com/dev.do#!/reference/next-experience/components?&query=&order_by=nameAsc&limit=120&offset=0&categories[]=uib_component&categories[]=uib_macroponent-component&categories[]=uib_facades) on the ServiceNow Developer Site. ## Procedure 1. Navigate to **All** > **Now Experience Framework** > **UI Builder**. 2. Open an experience to work in or create an experience by selecting **Create** > **Experience**. See [Configure how users interact with your applications in UI Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/work-experiences.md) for more information on creating experiences. 3. Open or create a page. If you open an existing page, make sure you are in the same scope as the original page. If not, change the scope before you start editing the page. Application scoping protects applications by identifying and restricting access to application files and data. Administrators set the scope to specify what parts of an application are accessible to other applications. Application scope protects data and application files. See [Learn about security and roles](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/security-roles.md) for more information about application scope. 4. Select an existing container or create a column layout. See [Organize components in UI Builder pages](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/work-layouts.md) for more information. 5. Add components to your page. UI Builder comes with a library of components to choose from. You add components as the building blocks of your page. For example, you can add a heading, data visualizations, and so on. The following table shows you the different ways you can add a component to a page.
To add a component Do the following
**Directly from your page** From your page, select **+** and choose a component from the toolbox. You can search for a component or scroll through the list.\[Omitted image "component-add-from-stage.png"\] Alt text: Add content icon selected on the stage showing the toolbox window with Components tab selected.
**Floating menu above page** Select the floating menu above your component. - Select **Add before** or **Add after**. - Choose a component from the toolbox.
**Content tree** You can add a component from the content tree in the following two ways.- Select **+Add content** beneath a container in the content tree. Then choose a component from the toolbox. - Move your mouse device over a container in the content tree, select the **Menu** icon, and select **Add component**. Then choose a component from the toolbox. \[Omitted image "component-add-from-content-tree.png"\] Alt text: Black arrow pointing to + add content option in content tree next to the toolbox window with Components tab selected.
6. Now configure the properties of the components that you just added. Configuring components means to customize them to your needs. For more information about configuring components, see [Next Experience Components](https://developer.servicenow.com/dev.do#!/reference/now-experience/rome/components). 1. Select the component that you want to configure. 2. Select the **Configure** tab from the configuration panel in UI Builder. 3. Customize the [component properties](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/ui-builder-glossary.md) for the component. For example, you could add a name for a button component. Some components, like data visualizations, require a data source before you can configure the properties. Each component has different configuration properties based on the requirements and options for each component. For example, the **Button** component configuration is simple, while a **List** component requires more configuration. 4. For components with configurable JSON properties, you can use UI Builder's low-code JSON editor to edit component properties without needing to edit JSON code. The JSON editor UI displays all available properties, even properties not defined in the dummy data or defined values. You can update properties or add your own custom properties within the JSON editor. For more information about configuring components, see [Edit code with the Now Code Editor \(advanced feature\)](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/now-code-editor.md). **Note:** The low-code JSON editor is only available to properties that have a schema and whose JSON input matches said schema. The low-code JSON editor supports simple objects, simple array properties, complex arrays, arrays of objects, and partially supports complex objects. For complex arrays, you can add, delete, or move the position of array items. You can also select **Hide unset items** to hide objects with empty or null values for a simplified editing experience. \[Omitted image "json-editor.png"\] Alt text: UI Builder low-code JSON editor. 5. When working with a container component, you can edit some styles by using the floating panels. Select the **Menu** icon to view a menu. \[Omitted image "container-more-button.png"\] Alt text: Arrow pointing to the menu icon with the floating menu expanded. Select the **Layout**, **Sizing**, or **Spacing** option to open a floating panel with the most common options displayed. Drag the floating panel to another location as needed. Only one floating panel can be open at a time. \[Omitted image "container-style-floating-panel.png"\] Alt text: Layout options displayed in a floating panel. For more information about configuring components, see [Next Experience Components](https://developer.servicenow.com/dev.do#!/reference/now-experience/rome/components). 7. Select the **Events** tab to add an event handler to your component. Add an event handler to add actions to the components on your page. For example, a button component is static and doesn’t do anything until you bind an event action to it, such as saving a record. Some components don’t have an event action applied to them, such as a heading component. But many components require you to map an event to your component to actually make it perform an action. See [Bind an event to a component](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/bind-event-component.md) for more information on how to add event handlers to your component. 8. You can override any styles for a component by adding CSS styling under the **Styles** tab. For more information, see [Change the default appearance of components](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/add-styling-to-component.md). **Note:** Style changes only affect a single component at a time. To change the visual style of all the components in your experience, you must apply a theme to your experience. For more information, see [Manage the visual style of UI Builder experiences](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/manage-the-visual-style-of-ui-builder-experiences.md). 9. Add additional containers to your page to display your components in an organized way. For example, one container could have a heading component. Another container below it could include a list component, a button component, and so on. 1. Select the **+** at the top of your container to add a container component before the existing component and select the **+** at the bottom of a component to insert a container component after it. 2. Drag a container component from the Components list to your existing container on the page; Hold over the top line of the container to insert the new container before the existing container or over the bottom line of the existing container to add it after. 10. Add more components to your page by selecting the **+** on the top or bottom of the components on the page \(the **+** changes to **+ Add**\). \[Omitted image "add-another-component.png"\] Alt text: Plus signs at the top and bottom of a component to add additional components. 1. Select the **+** at the top of your component to add a component before the existing component or select the **+** at the bottom of a component to insert a component after it. 2. Drag a component from the component list to insert the component before or after an existing component. 11. To make a modal appear when you select a component such as a button, you must add the modal to the component first. A modal is a confirmation pop-up that appears when you select the component. For example, if you add a button component that deletes a record, you add a modal to ask the user to confirm they want to delete the record. See [Create modals in UI Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/Modals-overview.md) for more information. 12. Select **Save** often on your page as you work. 13. View and test your page by selecting the **Preview** button. ## What to do next You have added and configured components on your page. See [Dynamically expose data in UI Builder pages \(advanced feature\)](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/data-resources.md) for more information. A data resource in UI Builder is the data that a page fetches to display content in components. Components use data resources as a way to reuse data and configurations across different experiences, and make the components dynamic on a page. **Parent Topic:**[Configure components and repeaters \(advanced feature\)](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/configure-comp-and-repeaters.md) ## Supported functions in the UI Builder component formula editor Learn about the various functions supported in the UI Builder component formula editor. The following table lists the functions you can use in the UI Builder component formula editor. For more information about the component formula editor, see [Customize UI Builder pages using components](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/work-components.md).
Operator label Example condition Equivalent query operator Example query Example output
All empty \[Short description\]\[ALL\_EMPTY\] ALL\_EMPTY short\_descriptionALL\_EMPTY All records in which there is no value in the **Short description** field.
All equal \[Short description\]\[ALL\_EQ\]\[Network storage unavailable\] ALL\_EQ short\_description=network storage unavailable All records in which the value for the **Short description** field is equal to "Network storage is unavailable."
All greater than \[Impact\]\[ALL\_GT\]\[2 - Medium\] > impact>2 All records in which the **Impact** field has a value of **3 - Low**
All greater than or equal \[Impact\]\[ALL\_GTE\]\[2 - Medium\] >= impact>=2 All records in which the **Impact** field has a value of **2 - Medium** or **3 - Low**.
All less than \[Reassignment count\]\[ALL\_LT\]\[2\] < reassignment\_count<2 All records in which the value in the **Reassignment count** field is any number less than \(but not equal to\) **2**.
All less than or equal \[Reassignment count\]\[ALL\_LTE\]\[2\] <= reassignment\_count<=2 All records in which the value in the **Reassignment count** field is one of the following:- a number less than 2 - 2
All not equal to \[Impact\]\[ALL\_NEQ\]\[1 - High\] != impact!=1 All records in which the value in the **Impact** field is anything but **1 - High**.
All not empty \[Impact\]\[ALL\_NOTEMPTY\] ALL\_NOTEMPTY impactALL\_NOTEMPTY All records in which the **Impact** field has any value.
All not one of \[Impact\]\[ALL\_NOTONEOF\]\[1 - High, 2 - Medium\] ALL\_NOTONEOF impactALL\_NOTONEOF1,2 All records in which the **Impact** field is populated by anything except the following values:- **1 - High** - **2 - Medium**
All one of \[Impact\]\[ALL\_ONEOF\]\[1 - High, 2 - Medium\] ALL\_ONEOF impactALL\_ONEOF1,2 All records in which the **Impact** field is populated by one of the following values:- **1 - High** - **2 - Medium**
Any empty \[Short description\]\[ANY\_EMPTY\] ANY\_EMPTY short\_descriptionANY\_EMPTY Any record in which there is no value in the **Short description** field.
Any equal \[Short description\]\[ANY\_EQ\]\[Network storage unavailable\] ANY\_EQ short\_description=network storage unavailable Any record in which the value for the **Short description** field is equal to "Network storage is unavailable."
Any greater than \[Impact\]\[ANY\_GT\]\[2 - Medium\] ANY\_GT impactANY\_GT2 Any records in which the **Impact** field has a value of **3 - Low**
Any greater than or equal \[Impact\]\[ANY\_GTE\]\[2 - Medium\] ANY\_GTE impactANY\_GTE2 Any record in which the **Impact** field has a value of **2 - Medium** or **3 - Low**.
Any less than \[Reassignment count\]\[ANY\_LT\]\[2\] ANY\_LT reassignment\_countANY\_LT2 Any record in which the value in the **Reassignment count** field is any number less than \(but not equal to\) **2**.
Any less than or equal \[Reassignment count\]\[ANY\_LTE\]\[2\] ANY\_LTE reassignment\_countANY\_LTE2 Any record in which the value in the **Reassignment count** field is one of the following:- a number less than 2 - 2
Any not equal \[Impact\]\[ANY\_NEQ\]\[1 - High\] ANY\_NEQ impactANY\_NEQ1 Any record in which the value in the **Impact** field is anything but **1 - High**.
Any not empty \[Impact\]\[ANY\_NOTEMPTY\] ANY\_NOTEMPTY impactANY\_NOTEMPTY Any record in which the **Impact** field has any value.
Any not one of \[Impact\]\[ANY\_NOTONEOF\]\[1 - High, 2 - Medium\] ANY\_NOTONEOF impactANY\_NOTONEOF1,2 Any record in which the **Impact** field is populated by anything except the following values:- **1 - High** - **2 - Medium**
Any one of \[Impact\]\[ANY\_ONEOF\]\[1 - High, 2 - Medium\] ANY\_ONEOF impactANY\_ONEOF1,2 Any record in which the **Impact** field is populated by one of the following values:- **1 - High** - **2 - Medium**
CONCAT CONCAT\(value\) CONCAT CONCAT\("Welcome, ",@context.session.user.firstName\) Create a new string that combines all supplied strings into one
EMPTY EMPTY\(value\) EMPTY EMPTY\(@context.session.user.roles\) Returns true if value is null or undefined
IF IF\(if, then, else\) IF IF\(@context.props.bare,"bare page","not bare page"\) If condition is true, return the value then. If condition is false, return the value else.
LEN LEN\(list\) LEN LEN\(\[1,2,3\]\) Returns the number of items in the array
Pick PICK\(array, field\) Pick PICK\(@context.session.user.preferences,"name"\) Creates a new array where each item is picked from field in each item in the array. If the field does not exist, the item in the new array will be EMPTY
Range RANGE\(from, to\) Range RANGE\(1,10\) Creates an array of numbers, starting with from, up to, incrementing by step
Sum SUM\(array\) Sum SUM\(\[1,2,3\]\) Starting at 0, add the number value of each item in the array and return the resulting summation
Translate TRANSLATE\(text\) Translate TRANSLATE\("Welcome back"\) Returns the string from the first argument after the characters specified in the second argument are translated into the characters specified in the third argument.
Where empty \[Short description\]\[WHERE\_EMPTY\] WHERE\_EMPTY short\_descriptionWHERE\_EMPTY Extract records where there is no value in the **Short description** field.
Where equal \[Short description\]\[WHERE\_EQ\]\[Network storage unavailable\] WHERE\_EQ short\_descriptionWHERE\_EQnetwork storage unavailable Extract records where the **Short description** field is equal to "Network storage is unavailable."
Where greater than \[Impact\]\[WHERE\_GT\]\[2 - Medium\] WHERE\_GT impactWHERE\_GT2 Extract records where the **Impact** field has a value of **3 - Low**
Where greater than or equal \[Impact\]\[WHERE\_GTE\]\[2 - Medium\] WHERE\_GTE impactWHERE\_GTE2 Extract records where the **Impact** field has a value of **2 - Medium** or **3 - Low**.
Where less than \[Reassignment count\]\[WHERE\_LT\]\[2\] WHERE\_LT reassignment\_countWHERE\_LT2 Extract records where the value in the **Reassignment count** field is any number less than \(but not equal to\) **2**.
Where less than or equal \[Reassignment count\]\[WHERE\_LTE\]\[2\] WHERE\_LTE reassignment\_countWHERE\_LTE2 Extract records where the value in the **Reassignment count** field is one of the following:- a number less than 2 - 2
Where not equal \[Impact\]\[WHERE\_NEQ\]\[1 - High\] WHERE\_NEQ impactWHERE\_NEQ1 Extract records where the value in the **Impact** field is anything but **1 - High**.
Where not empty \[Impact\]\[WHERE\_NOTEMPTY\] WHERE\_NOTEMPTY impactWHERE\_NOTEMPTY Extract records where the **Impact** field has any value.
Where not one of \[Impact\]\[WHERE\_NOTONEOF\]\[1 - High, 2 - Medium\] WHERE\_NOTONEOF impactWHERE\_NOTONEOF1,2 Extract records where the **Impact** field is populated by anything except the following values:- **1 - High** - **2 - Medium**
Where one of \[Impact\]\[WHERE\_ONEOF\]\[1 - High, 2 - Medium\] WHERE\_ONEOF impactWHERE\_ONEOF1,2 Extract records where the **Impact** field is populated by one of the following values:- **1 - High** - **2 - Medium**