---
sourceDocument: Australia Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/r/application-development

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Add and configure components

# Add and configure components {#ariaid-title1}

Release version: Australia  
Updated March 12, 2026  
![](https://www.servicenow.com/docs/portal-asset/ico-clock) 11 minutes to read  
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 AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://www.servicenow.com/docs/xRTj74jSaNpx1gbYEFN~zw "Learn what an experience is in UI Builder. Understand what an experience contains.") 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://www.servicenow.com/docs/66_ynOEMLJObfkIxMz83TQ "Set up the security and roles for your UI Builder instance.") for more information about application scope.
4. Select an existing container or create a column layout.  
   See [Organize components in UI Builder pages](https://www.servicenow.com/docs/erTxkhCQ69OSTONHE4ATCQ "Column layouts organize components on a UI Builder page. Learn how column layouts are used in UI Builder.") 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. |
   | Floating menu above page | Select the floating menu above your component. * Select Add before or Add after. * Choose a component from the toolbox. {#add-components__ul_br4_qds_24b} |
   | 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. {#add-components__ul_pkc_l52_14b} |
   |-|-|

   {#add-components__choicetable_dzv_llh_wnb} {#add-components__addcomponents}
{#add-components__addcomponents}
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://www.servicenow.com/docs/0sELm2ikviPfvrr6utQ7VA#gloss-component-properties-ui-builder "Available in the Configuration panel and used to configure a component. Each component has unique properties. Component properties are specified within each tab on the Configuration panel: Config, Style, and Event. Some components have presets available. Use the component presets to set component properties automatically.") 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://www.servicenow.com/docs/_I3uLSyRSOOndtdC1z22Jw "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.").  
      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.
   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.

      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.

   {#add-components__substeps_gh5_lt2_14b}  
   For more information about configuring components, see [Next Experience Components](https://developer.servicenow.com/dev.do#!/reference/now-experience/rome/components).
7. **Optional:** 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://www.servicenow.com/docs/7W0T69NzRo61cN_T8qcFfg "Bind data elements within UI Builder so that you can add event actions to your components.") for more information on how to add event handlers to your component.
8. **Optional:** 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://www.servicenow.com/docs/EdZf3ux6lLpP5nudXTgSnQ#add-styling-to-component "Set the styles for components and wrappers to change the default appearance.").  
   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://www.servicenow.com/docs/_KZoAUPOPIqV0YW0Ydo4~A "Themes enable you to change the visual style of your UI Builder experiences so that they express the look and feel of your brand").
9. **Optional:** 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.
   {#add-components__substeps_x3m_qsw_nnb}
10. **Optional:** Add more components to your page by selecting the + on the top or bottom of the components on the page (the + changes to + Add).  
    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.
    {#add-components__substeps_cj4_grw_nnb}
11. **Optional:** 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://www.servicenow.com/docs/tz_Kys1rlFlQ8MFyymYeLg "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.") 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://www.servicenow.com/docs/UCY4t8hWhI9iVZ4Ly75YGQ "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.") 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.

## Supported functions in the UI Builder component formula editor {#ariaid-title2}

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://www.servicenow.com/docs/mrfQSAnSnETSUpsAmld7yA "Learn what a component is in UI Builder. Also, see how components work within UI Builder.").
{#uib_supported_functions__table_jb1_r21_ft__entry__5}

| 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 {#uib_supported_functions__ul_jcp_ttp_lgb} |
| 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 {#uib_supported_functions__ul_t53_jdh_kgb} |
| 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 {#uib_supported_functions__ul_s4b_gdh_kgb} |
| 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 {#uib_supported_functions__ul_jl4_nyx_3sb} |
| 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 {#uib_supported_functions__ul_z51_dzx_3sb} |
| 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 {#uib_supported_functions__ul_grh_szx_3sb} |
| 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 {#uib_supported_functions__ul_wpv_jhy_3sb} |
| 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 {#uib_supported_functions__ul_prv_jhy_3sb} |
| 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 {#uib_supported_functions__ul_msv_jhy_3sb} |
[Table 1. Operators available for condition builders]

{#uib_supported_functions__table_jb1_r21_ft}

*[\>]: and then