Add and configure components

task australia Updated Sep 10, 2026 13 min read add-components.md
Raw file servicenow.com

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 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 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 for more information about application scope.

  4. Select an existing container or create a column layout.

    See Organize components in UI Builder pages 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).

  1. 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 for more information on how to add event handlers to your component.

  2. 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.

    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.

  3. 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.

  4. 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.

  5. 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 for more information.

  6. Select Save often on your page as you work.

  7. 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) 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)

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.

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
Search documentation
Search document titles and file paths on the australia branch