---
sourceDocument: Yokohama Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# UI Builder quick start

# UI Builder quick start {#ariaid-title1}

* Release version: Yokohama
* 
* Updated January 30, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 6 minutes to read

This quick start guides you through the process of creating your first page in UI Builder. Creating your first page is the first step in understanding how to build user interface pages for your workspace or custom portal experiences.

## Before you begin

Role required: ui_builder_admin

In this UI Builder quick start, you perform the following tasks to build your first page in UI Builder:

* Start UI Builder.
* Create a page for your workspace or custom portal experience. For more information about creating pages, see [Create a page in UI Builder](https://servicenow-prod.fluidtopics.net/qg0Cc5eGfpImb71VJtmSew "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.").
* Build your page by adding components. For more information about components, see [Customize UI Builder pages using components](https://servicenow-prod.fluidtopics.net/dPufzwihCLGpfusOSc_kdw "Learn what a component is in UI Builder. Also, see how components work within UI Builder.").
* Save your page.
* Preview your page to see how it looks in a browser.
{#ui-builder-quick-start__ul_r2c_wjx_d4b}

## Procedure

1. Navigate to AllNow Experience FrameworkUI Builder.  
   Figure 1. Start UI Builder
2. Select an experience that you want to work in from the UI Builder home page.  
   If you don't see any experiences listed in which to work, contact your administrator to get access to an experience, or create an experience. For more information, see [Configure how users interact with your applications in UI Builder](https://servicenow-prod.fluidtopics.net/nDWg0NsWQpdF_OppvTVe5g "Learn what an experience is in UI Builder. Understand what an experience contains.").
3. Create a page.
   1. Select the + icon in the Pages and variants section.  
      ![Create page button on the experience view page.]()
   2. Select Create a new page.  
   3. Select → Create from scratch instead.  

      You can also create pages using page templates, see [Create a page from a template](https://servicenow-prod.fluidtopics.net/Yy6BCwQ7bc79e99tjt8TMQ "Use a template to create a page based on a pre-defined page template. A page template can help you create pages faster and keep pages consistent within an experience. Page templates may include components, data resources, and a layout.") for more
      information.
   4. Enter <kbd class="ph userinput">Start Page</kbd> as the unique name for the page in the Name field.
   5. Specify a path for your page in the URL Path field. UI Builder generates a default path based on the name that you gave in the last step.  
      A default path is added based on your page name. You can also create your own path. The path is required and must be unique. The path can include digits (0-9), letters (A-Z, a-z), and a few special characters (`"-"`, `"."`, `"_"`, `"~"`), with the words separated by a forward slash or hyphen. The URL preview shows the path of your page.  
      Note:  
      The application scope defaults to the scope that the user is currently in within the ServiceNow AI Platform®. For more information about the application scope, see [Learn about security and roles](https://servicenow-prod.fluidtopics.net/nq2SVpZbgN_ULCqGmLGRuQ "Set up the security and roles for your UI Builder instance.").
   6. Select Continue.
   7. **Optional:** Add parameters to your page URL by selecting + Add.  
      For more information, see [Manage UI Builder pages and page variants](https://servicenow-prod.fluidtopics.net/gTnZkApUadVKq3LWn7k3HA "Learn what a page is in UI Builder. Understand the building blocks of a UI Builder page, such as column layouts and components.").
   8. Select Looks good.
   9. Enter <kbd class="ph userinput">Manager Start Page</kbd> as the name for the page variant.
   10. **Optional:** Add one or more audiences for this page.  
       If an audience you need isn't listed, you can choose the Open audiences in the platform link to create one.
   11. **Optional:** Add conditions for when to display the page or tab.
   12. Select Continue.
   13. On the next screen, select Build responsive.
   14. Select Create to create your blank page.

   Congratulations! You've created your first page! The page is empty of content. You add components to the page to build functionality to it. Components are the building blocks of a page. UI Builder comes with many components ready for you to add to your page. Components can be as simple as a Heading, or as complex as a List.
4. Select Editor to start adding customizing your page.  
5. Add a container component to your page.  
   A container is what holds your components. Think of a container as an area of the page where you add information, images, or functionality (your components). You can have as many containers on a page as you want, with as many containers within containers, with as many components in the containers.
   1. Select + Add content in the content tree.  
   2. Select the Single column layout in the toolbox.
   3. Select Column layout 1 in the content tree to highlight the container.  
   4. Select the component name in the configuration panel.  
   5. In the Component label field, type <kbd class="ph userinput">Container for heading</kbd>.
   6. In the [Component ID](https://servicenow-prod.fluidtopics.net/zrx4f9YaC1RRjhOLAHK~EQ#gloss-component-id-ui-builder "Used to reference a component when adding a script or binding data to the component. A component ID is automatically created (based on the component label) when you add a component to a page, but the component ID can be edited.") field, type <kbd class="ph userinput">container_for_heading</kbd>.
   7. Select Apply.  
      See that the column layout name changes to Container for heading in the content tree. The content tree is an important concept. The content tree is an easy way to see the structured layout of
      your page. The content tree is especially important when you have multiple components on your page. You select the component in your content tree to highlight the component on the page, making it easier to build your
      page. You can do a text search for a component.

      For more information on component IDs, see [Component ID](https://servicenow-prod.fluidtopics.net/dPufzwihCLGpfusOSc_kdw#work-components__component_id).

   You've successfully added your first column layout to your page.
6. Add a Heading component to your column layout.  
   You can add components to the page in different ways. For more information on the ways you can add components to your page, see [Add and configure components](https://servicenow-prod.fluidtopics.net/J6n1ilCnrc90JWEGwzeCiA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.").
   1. Select + Add content in the content tree below the column layout created in step 5.  
   2. Type <kbd class="ph userinput">heading</kbd> into the search and select the Heading component.
   3. Select your new Heading component in the content tree to highlight it.
   4. Select None in the configuration panel.
   5. Select the component name in the configuration panel.
   6. In the Component label field, enter <kbd class="ph userinput">Custom heading</kbd> as the unique label for the heading component.
   7. In the Component ID field, enter <kbd class="ph userinput">custom_heading</kbd> as the unique ID for the heading component.
   8. Click Apply.  
   {#ui-builder-quick-start__substeps_yhc_4n5_xvb}
7. Customize the heading component.
   1. Select the heading component in the content tree.
   2. Select the Configure tab in the configuration panel.
   3. In the Label field, enter the text of your heading, such as <kbd class="ph userinput">My new heading</kbd>.
   4. The Style changes the size of the heading text.  
      For example, if you select Header-secondary, the text is smaller. Different headings sizes are useful if you have two headings and want the second heading smaller that the primary heading. For more information on configuring components, see [Configure components in UI Builder](https://servicenow-prod.fluidtopics.net/dPufzwihCLGpfusOSc_kdw#work-components__config_components).
   5. Leave the Level as 1.
   6. Select Save.

   {#ui-builder-quick-start__substeps_yjn_t22_bwb}  
   You've added and customized a heading component to your page.
8. Add a second column layout to your page.
   1. Similar to before, select + Add content in the content tree.  
   2. Select the Single column layout in the toolbox.
   3. Select Column layout 1 in the content tree to highlight the container.  
   4. Select the component name in the configuration panel.
   5. In the Component label field, type <kbd class="ph userinput">Container for content</kbd>.
   6. In the Component ID field, type <kbd class="ph userinput">container_for_content</kbd>.
   7. Select Apply.  
   8. Select Save.

   You've successfully added your second container component to your page.
9. Add an image component to your page.  
   An image is a nice way to add a visual for your page. In this quick start, you add a stock photo that comes with UI Builder. But you can add any image that is available to you.
   1. Select + Add content in the content tree below the container created in step 8.
   2. Type <kbd class="ph userinput">image</kbd> into the search and select the Image component.  
      A default image is loaded in the image component. You can add your own image by adding a URL to the image. You can use images hosted on the internet or images in the ServiceNow AI Platform®. If you use an image hosted on an external site, you must use the `https` protocol for security.
   3. Select the Image 1 component in the Content tree to highlight the image.  
   4. Select None in the configuration panel.
   5. Select the component name in the configuration panel.
   6. In the Component label field, type <kbd class="ph userinput">My image</kbd>.
   7. In the Component ID field, type <kbd class="ph userinput">my_image</kbd>.
   8. Select Apply.  
   9. Select Save.

   {#ui-builder-quick-start__substeps_h45_jpl_bwb}  
   You added an image component to your page.

10. Select Preview in the UI Builder header to preview your page.  
    Congratulations! You completed the UI Builder quick start. Your page generates a preview of how it looks in your Workspace or portal experience.

## Result

1. Created your first page in UI Builder.
2. Added your first container component to the page. You changed the label for the container.
3. Added a Heading component as a title to the container. You changed the text of the heading. You also changed the label.
4. Added a second container component to your page. You changed the label for the container.
5. Added an Image component. You changed the label of the image component.
6. Saved your new page.
7. Previewed your page in the browser.
{#ui-builder-quick-start__ol_pbw_tvm_vnb}

You successfully completed the UI Builder quick start!

*[\>]: and then