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

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

Procedure

  1. Navigate to All > Now Experience Framework > UI Builder.
  2. Open an experience to work in or create an experience by selecting + Create.
    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 on 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.
  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 in the content tree.
    2. Select the Config tab in the configuration panel.
    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 for properties that have a schema and whose JSON input matches said schema.

      The low-code JSON editor supports simple object, 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.

      Animation showing how to open the low-code JSON editor and select the Hide unset items option.
    5. When working with a container component, you can edit some styles by using the floating panels.

      Select the More button to view a menu.

      Arrow pointing to the More button 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.
    You add an event handler to add actions to 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. To add a container component before the existing component, select the + at the top of your container.
    2. To add a container component after the existing component, select the + at the bottom of a component.
    3. 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. Hold the container over the bottom line of the existing container to add it after.
  10. (Optional) Select the + on the top or bottom of a component on the page to add more components to your 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.
    2. Select the + at the bottom of a component to insert a component after it.
    3. 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 Preview button that opens the page variant..

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.