Learn how to add components to your page in Now® Experience UI Builder. A page is built by adding components.

1. Open UI Builder in any of the following ways.

   To open UI Builder from the following locations	Do this
   Now Experience Framework	Navigate to Now Experience Framework > UI Builder. Click an experience to work in. Or, create a new experience by selecting Create experience in Platform. See Create an experience for more information.
   Admin panel of a specific experience	Navigate to Experiences and select your experience. Open the record in the Admin panel. Click Open in UI Builder.
   From CSM Configurable Workspace	Navigate to Workspace Experience > Workspaces > CSM Configurable Workspace. Click the User Menu in CSM Configurable Workspace. Click Edit page to edit the CSM Configurable Workspace in UI Builder.
   From CSM Configurable Workspace	Navigate to Workspace Experience > Workspaces > CSM Configurable Workspace. Click the User Menu inCSM Configurable Workspace. Click Configure Workspace. Click Open in UI Builder.

2. Open or create a page. If you open an existing page, ensure 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 Security and roles for more information on application scope.
3. Change the layout of the page or containers as follows. See Work with layouts for more information.

   Are you working in an existing page, or a new page?	Then change the layout procedure as follows:
   Working in an existing page	Change the layout to add a component to a specific location. For example, say that the page already has a three-column container. Each column has a data visualization component. But, you must add another data visualization component. You can highlight the container and change the layout to four columns. Then, you can add the new data visualization component to the fourth column. Select the container on your page for which you want to change the layout. Or, you can select the container in the content tree to the left of the main page area. The content tree is often easier to use. When the page structure is in the structured tree, you can more easily find the container you want to change. Select the Layout tab and select the layout you want to change it to. For example, say that the container has a three-column layout. You can change the layout to a four-column layout. Then, you can add a component in that fourth column in your container. Select Save often as you work. Select Open to see a preview of what it looks like as a web page.
   Working in a new page	Start by setting the layout you want for the page. For example, you can set your page to have two slots or columns. Then, you can add containers to each slot and change the layout for each container. You can also set the layout at the container level after you add containers to your page. Select the Body of your page in the content tree to the left of the main page area. The content tree is a graphical look at how your page construction. Body is the top page-level. Select the Layout tab in the page configuration on the left. Layouts govern what slots are available on a page. Layouts also decide how to position slots, and what CSS rules apply to them. You can choose to have your page divided into columns, rows, or any custom design you want. You can also set the layout for a container. Select Save often as you work. Select Open to see a preview of what it looks like as a web page.

4. 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
   From the component list	Select the Components icon in the left column of UI Builder. Drag a component from the component list onto your page.
   Directly from your page	From your page, select + and choose a component from the list. You can search for a component or scroll through the list.
   Floating menu above page	Select the floating menu above your component. Select Add component. Choose a component from the component list.
   Content tree	You can add a component from the content tree in the following two ways. Select +Add component beneath the container in the content tree. Then choose a component from the component list. Select +Add to the right of the content tree, then select Component. Then choose a component from the component list.

5. 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 Now® ExperienceComponents.
   1. Select the component you want to configure.
   2. Select the Config tab from configuration 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.
   For more information about configuring components, see Now® ExperienceComponents.
6. (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 does not do anything until you bind an event action to it, such as saving a record. Some components do not 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.
7. (Optional) You can override any styles for a component by adding CSS styling under the Styles tab.
   For more information, see Add styling to a component.

   Note: Style changes only affect a single component at a time. To change the visual style of all components in your experience, you must apply a theme to your experience. For more information, see Apply a theme to your experience
8. (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. 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. Hold the container over the bottom line of the existing container to add it after.
9. (Optional) Add more components to your page. Select the + on the top or bottom of 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. 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.
10. (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 click 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 Modals in Now Experience UI Builder for more information.
11. Select Save often on your page as you work.
12. Select Open to preview your page.