Product documentation Docs
    • English
    • Deutsch
    • 日本語
    • 한국어
    • Français
  • More Sites
    • Now Community
    • Developer Site
    • Knowledge Base
    • Product Information
    • ServiceNow.com
    • Training
    • Customer Success Center
    • ServiceNow Support Videos
  • Log in

Product documentation

  • Home
How search works:
  • Punctuation and capital letters are ignored
  • Special characters like underscores (_) are removed
  • Known synonyms are applied
  • The most relevant topics (based on weighting and matching to search terms) are listed first in search results
Topics are ranked in search results by how closely they match your search terms
  • A match on the entire phrase you typed
  • A match on part of the phrase you typed
  • A match on ALL of the terms in the phrase you typed
  • A match on ANY of the terms in the phrase you typed

Note: Matches in titles are always highly ranked.

  • Release version
    Table of Contents
    • Now Platform App Engine
Table of Contents
Choose your release version
    Home Quebec Now Platform App Engine Now Platform App Engine Now Experience UI Builder Using UI Builder Work with components Add and configure components

    Add and configure components

    • Save as PDF Selected topic Topic & subtopics All topics in contents
    • Unsubscribe Log in to subscribe to topics and get notified when content changes.
    • Share this page

    Add and configure components

    Learn how to add components to your page in Now® Experience 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. Once you add a component to a page, you must configure the component. For more information about configuring components, see Components.

    Procedure

    1. Open UI Builder in any of the following ways.
      To open UI Builder from the following locationsDo this
      Now Experience Framework
      1. Navigate to Now Experience Framework > UI Builder.
        UI Builder opened from Now Experience Framework.
      2. 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
      1. Navigate to Experiences and select your experience.
      2. Open the record in the Admin panel.
        Open record.
      3. Click Open in UI Builder.
      From CSM Configurable Workspace
      1. Navigate to Workspace Experience > Workspaces > CSM Configurable Workspace.
      2. Click the User Menu in CSM Configurable Workspace.
      3. Click Edit page to edit the CSM Configurable Workspace in UI Builder.
        Edit page.
      From CSM Configurable Workspace
      1. Navigate to Workspace Experience > Workspaces > CSM Configurable Workspace.
      2. Click the User Menu inCSM Configurable Workspace.
      3. Click Configure Workspace.
        Configure workspace.
      4. 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.
      Changing the container layout from three to four columns, then adding a new component to the fourth column.
      1. 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.
        Container 1 in content tree.
      2. 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.
      3. Select Save often as you work.
      4. Select Open to see a preview of what it looks like as a web page.
        Open icon.
      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.
      Changing the layout at the page level.
      1. 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.
        Content tree structure.
      2. 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.
        Layout options for UI Builder.
      3. Select Save often as you work.
      4. Select Open to see a preview of what it looks like as a web page.
        Image shows the Open icon.
    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.
      Component being dragged from the component list to the 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.
      Selecting the + Add icon in the page and adding a component.
      Floating menu above page Select the floating menu above your component.
      • Select Add component.
      • Choose a component from the component list.
      Selecting the Floating menu three dots, and selecting add component.
      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.
      Adding a component from the content tree.
    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.
      Plus sign at the top and bottom of a component.
      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.

    What to do next

    You have added and configured components on your page. See work with data resources 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.

    Tags:

    Feedback
    On this page

    Previous topic

    Next topic

    • Contact Us
    • Careers
    • Terms of Use
    • Privacy Statement
    • Sitemap
    • © ServiceNow. All rights reserved.

    Release version
    Choose your release version

      Add and configure components

      • Save as PDF Selected topic Topic & subtopics All topics in contents
      • Unsubscribe Log in to subscribe to topics and get notified when content changes.
      • Share this page

      Add and configure components

      Learn how to add components to your page in Now® Experience 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. Once you add a component to a page, you must configure the component. For more information about configuring components, see Components.

      Procedure

      1. Open UI Builder in any of the following ways.
        To open UI Builder from the following locationsDo this
        Now Experience Framework
        1. Navigate to Now Experience Framework > UI Builder.
          UI Builder opened from Now Experience Framework.
        2. 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
        1. Navigate to Experiences and select your experience.
        2. Open the record in the Admin panel.
          Open record.
        3. Click Open in UI Builder.
        From CSM Configurable Workspace
        1. Navigate to Workspace Experience > Workspaces > CSM Configurable Workspace.
        2. Click the User Menu in CSM Configurable Workspace.
        3. Click Edit page to edit the CSM Configurable Workspace in UI Builder.
          Edit page.
        From CSM Configurable Workspace
        1. Navigate to Workspace Experience > Workspaces > CSM Configurable Workspace.
        2. Click the User Menu inCSM Configurable Workspace.
        3. Click Configure Workspace.
          Configure workspace.
        4. 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.
        Changing the container layout from three to four columns, then adding a new component to the fourth column.
        1. 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.
          Container 1 in content tree.
        2. 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.
        3. Select Save often as you work.
        4. Select Open to see a preview of what it looks like as a web page.
          Open icon.
        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.
        Changing the layout at the page level.
        1. 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.
          Content tree structure.
        2. 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.
          Layout options for UI Builder.
        3. Select Save often as you work.
        4. Select Open to see a preview of what it looks like as a web page.
          Image shows the Open icon.
      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.
        Component being dragged from the component list to the 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.
        Selecting the + Add icon in the page and adding a component.
        Floating menu above page Select the floating menu above your component.
        • Select Add component.
        • Choose a component from the component list.
        Selecting the Floating menu three dots, and selecting add component.
        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.
        Adding a component from the content tree.
      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.
        Plus sign at the top and bottom of a component.
        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.

      What to do next

      You have added and configured components on your page. See work with data resources 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.

      Tags:

      Feedback

          Share this page

          Got it! Feel free to add a comment
          To share your product suggestions, visit the Idea Portal.
          Please let us know how to improve this content

          Check any that apply

          To share your product suggestions, visit the Idea Portal.
          Confirm

          We were unable to find "Coaching" in Jakarta. Would you like to search instead?

          No Yes
          • Contact Us
          • Careers
          • Terms of Use
          • Privacy Statement
          • Sitemap
          • © ServiceNow. All rights reserved.

          Subscribe Subscribed Unsubscribe Last updated: Tags: January February March April May June July August September October November December No Results Found Versions Search preferences successfully updated My release version successfully updated My release version successfully deleted An error has occurred. Please try again later. You have been unsubscribed from all topics. You are now subscribed to and will receive notifications if any changes are made to this page. You have been unsubscribed from this content Thank you for your feedback. Form temporarily unavailable. Please try again or contact  docfeedback@servicenow.com  to submit your comments. The topic you requested does not exist in the release. You were redirected to a related topic instead. The available release versions for this topic are listed There is no specific version for this documentation. Explore products Click to go to the page. Release notes and upgrades Click to open the dropdown menu. Delete Remove No selected version Reset This field is required You are already subscribed to this topic Attach screenshot The file you uploaded exceeds the allowed file size of 20MB. Please try again with a smaller file. Please complete the reCAPTCHA step to attach a screenshot
          Log in to personalize your search results and subscribe to topics
          No, thanks Login