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.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.
    Arrow pointing to the floating menu that appears after selecting the menu icon.
    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.
    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.
    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 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).

      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.

      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.

      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.

      Layout options displayed in a floating panel.
    For more information about configuring components, see Next Experience 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 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.
    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.
  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.
  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).
    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. (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 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) 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

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.

Table 1. Operators available for condition builders
Operator labelExample conditionEquivalent query operatorExample queryExample 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