Add and configure components

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

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.

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

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.

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

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

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