---
sourceDocument: Yokohama Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/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


---

# Customize UI Builder pages using components

# Customize UI Builder pages using components {#ariaid-title1}

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

Summarize  
![AI sparkle icon](https://servicenow.com/docs/portal-asset/ai-sparkle-icon) Summarized using AI  
This content was generated using new OpenAI-powered functionality. Results are provided on an as is basis and are not guaranteed to be accurate or complete.  

## Summary of Customize UI Builder pages using components

In UI Builder, components are the fundamental elements used to create and customize pages within your workspace or portal.
Components range from simple items like buttons and labels to complex experience components such as lists and forms.
By adding and configuring components, you can tailor the user interface to meet your organization's needs, such as displaying user-specific activity streams or embedding forms.
Show full answer Show less  

## Adding Components

You can add components to your UI Builder pages through several methods:

* Using the add content (plus) icon and selecting from the Components tab.
* Using add before or add after icons on column layouts or existing components.
* Adding components directly from the Content tree.
* Using the floating menu above the page to insert components before or after others.

Column layouts help organize components by defining screen areas where you can add multiple columns and place components within them. You can add up to six columns per layout and multiple components per column.

## Configuring Components

The configuration panel in UI Builder offers three main ways to customize components:

* **Component Properties:** Vary by component type, ranging from simple settings for buttons to advanced configurations for lists and forms. Properties can be set as static values, dynamic data bindings, or scripted via JavaScript.
* **Styles:** Customize the appearance using CSS overrides, such as colors, fonts, and borders.
* **Events:** Set up event handlers at the page or variant level, including dispatched and handled events.

Dynamic data binding is crucial for exposing and reusing data within components, enabling connections to tables, records, or page properties. You can view and edit component properties using a low-code JSON editor and bind or modify values through a formula editor that supports logical and functional operations.

## Component Management and Advanced Features

* **Component ID:** Each component has a unique ID that can be customized for scripting or data binding purposes.
* **Visibility:** Components can be shown or hidden based on conditions, using dynamic data or scripted properties.
* **Duplicate Components:** Easily create copies of configured components with all their settings, enabling efficient reuse.
* **Presets:** Use or create component presets to automatically configure components on compatible pages, saving time and promoting consistency.

## Additional Customization Options

* Change default appearance and styles of components and wrappers.
* Enhance accessibility through focus management for screen readers.
* Use conditional renderers to display content based on specified conditions.
* Group pages with Page Collections for reuse across multiple experiences.
* Add specialized UI elements such as tabbed content, contextual sidebars, forms, modals, popovers, and modeless dialogs to enrich user interaction.
* Extend experiences with viewport components that allow embedding content without owning the parent page.

## Practical Tips

* Reload the stage view to see component updates without saving changes.
* Save your work regularly to persist changes made in UI Builder.
* Use the Content tree to review and manage page structure efficiently.  
Learn what a component is in UI Builder. Also, see how components
work within UI Builder.

Components are the base elements of your UI Builder page. Components range from core elements like buttons and labels to more complex experience components like lists and forms.

You can add these components to your UI Builder page to build or customize your workspace or portal experience. For example, adding an Activity stream component to your page that lets users see their travel request
activity.

You can add components to your UI Builder page in the following ways.
{#work-components__addcomponentstable__entry__2}

| Location | Example |
|-|-|
| Directly from a page in UI Builder (option 1) | Select the add content (plus) icon, select the Components tab, and then select a component. |
| Directly from a page in UI Builder (option 2) | On a column layout or component, select the add before (plus) or add after (plus) icon, and then select a component. |
| From the Content tree in UI Builder | In the content tree, select + Add content and then select a component. |
| From the floating menu above the page in UI Builder | On a column layout or component, select the Menu icon, select Add before or Add after, and then select a component. |
[Table 1. Ways to add a component to a page]

{#work-components__addcomponentstable}

## Column layouts in UI Builder {#work-components__section_krt_tdk_znb}

Add column layouts and columns to your UI Builder page first. Then add components to the columns in a column layout to build and customize your page. Think of a column layout as a defined part of the screen where you add components like lists
and headings. You can have as many column layouts on a UI Builder page as you want, with as many as six columns in any column layout. Multiple components can be added to a single column. View the structure of your page in the Content
tree.

For more information, see [Column layouts](https://www.servicenow.com/docs/0BKIMEsHEli5PUUchLZO7Q#column-layout "Column layouts are used to design and organize UI Builder pages.").

## Configure components in UI Builder {#work-components__config_components}

There are three ways to configure a component in the configuration panel.

* Configure the component properties.
* Add CSS style overrides.
* Set up [event handlers](https://www.servicenow.com/docs/zrx4f9YaC1RRjhOLAHK~EQ#gloss-event-handler-ui-builder "An action performed when an event occurs.") for the components.
{#work-components__ul_lxw_c2k_znb}
![Configuration panel tabs used to configure, style, and add events to components.]()  

Configure tab
:   Component properties vary based on each component. Component configuration can be simple, as is the case with simple elements like buttons, headings, and labels. Components like lists and forms require significant
    configuration. For icon and image components, select from a variety of options or use a custom icon or image. You can modify component properties with UI Builder's low-code JSON editor. For more information about configuring components, see [Next Experience Components](https://developer.servicenow.com/dev.do#!/reference/next-experience/components?&query=&order_by=nameAsc&limit=120&offset=0&categories[]=uib_component&categories[]=uib_macroponent-component&categories[]=uib_facades).

:   For each property in the component configure tab, you can choose from the following options.

    * Static: Use data from a list, or enter your own data. The data doesn't connect to an external data source.
    * Dynamic [data binding](https://www.servicenow.com/docs/zrx4f9YaC1RRjhOLAHK~EQ#gloss-data-binding-ui-builder "The process of associating data with a UI element that displays the information."): A way to bind a component property to a data resource, page property, or client state.
    * Script: Enter JavaScript code to populate a property value.
    {#work-components__ul_uh3_dh4_trb}

Styles tab
:   You can change the Cascading Style Sheets (CSS) styles for individual components. Change color borders, font size, and so on.

Events tab
:   Configure page-level and variant-level [event mappings](https://www.servicenow.com/docs/zrx4f9YaC1RRjhOLAHK~EQ#gloss-event-mapping-ui-builder "The process of identifying an event handler to run when an event occurs."). Also add dispatched events and handled events for your variant. The more complex, experience components rely heavily on dynamic data that is provided by a [data resource](https://www.servicenow.com/docs/zrx4f9YaC1RRjhOLAHK~EQ#gloss-data-resource-ui-builder "A dynamic, reusable way of defining what data to fetch for a page's components."). Binding dynamic data to a component is an important feature. You dynamically expose data from tables, records, or other elements on your page. Exposing data enables
    you to reuse your components. Also, you can point to the configuration fields to see icons data or scripting options for each field.

As you add and configure components on the page, the stage shows your work. If you make changes and the updates do not load on the stage, select the Open menu icon and then
select Developer \> Reload Stage. Reloading the stage shows your changes, but does not save them. To save your work, select Save at the top right.

## Component Presets in UI Builder {#work-components__section_cnm_cpt_25b}

Use [component presets](https://www.servicenow.com/docs/zrx4f9YaC1RRjhOLAHK~EQ#gloss-component-preset-ui-builder "Presets apply predefined configuration values and event mappings to components. Presets apply prebuilt configurations to component properties and events handlers. Presets are only available for certain components.") to automatically configure components on compatible pages. UI Builder page templates contain controllers that presets use to define component configuration values. For more information, see [Automatically configure components using presets](https://www.servicenow.com/docs/BWKbQtnUtb7nqnuy_Q2LvA#presets "Use component presets to automatically configure components on compatible pages.").

## Component properties sections {#work-components__section_esm_5gk_dsb}

Component properties are grouped into sections of similar properties. Open and close
sections by selecting the arrows to the right of the property headings. UI Builder admins
can select which component configuration properties are displayed or hidden based on UI
policies.

## Component formula editor {#work-components__section_mkq_ydx_trb}

Use the UI Builder component formula editor in the configuration panel
to bind or modify formulas. You can enter text, data bindings, and/or formulas. Formulas can
consist of any combination of the three input types. The component formula editor supports
logical, arithmetic, comparison, negation, and functional transform types.

Each function added to the component formula editor auto-completes. The component formula
editor displays a label for each input of the function so you know what parameters each
function requires. For more information about the supported functions in the component
formula editor, see [Supported functions in the UI Builder component formula editor](https://www.servicenow.com/docs/J6n1ilCnrc90JWEGwzeCiA#uib_supported_functions "Learn about the various functions supported in the UI Builder component formula editor.").

## Component ID {#work-components__component_id}

Use the component ID when you add a script or bind data to the component as a way to reference the component. A component ID is automatically created and is based on the component label when you add a component to a page. You
can change the component ID to anything you want, as long as it is unique. Select the name of the component in the configuration panel to see the component ID.

## Component visibility {#work-components__section_ljd_ydk_znb}

Select the eye icon in the configuration panel to set component visibility. Component visibility is based on a property of the component itself, not who is viewing it. You could show or hide a component based on conditions. For
example, hiding an image if it has a broken link.

You can set the visibility based on dynamic data binding, or by editing a scripted property value.

Set the Test value to test what happens when the visibility is set
to true, false, or none.

## Duplicate components {#work-components__section_fwf_bc5_x5b}

Create an exact copy of a configured component on your UI Builder page except for the name and ID. A duplicated component copies all properties, bindings, and events. For more information, see [Duplicate a component](https://www.servicenow.com/docs/GUxoc8efHKBf5COuGZyl_A "Duplicate a configured component to reuse on a page.").

* **[Automatically configure components using presets](https://www.servicenow.com/docs/BWKbQtnUtb7nqnuy_Q2LvA#presets)**   
  Use component presets to automatically configure components on compatible pages.
* **[Create custom presets for components](https://www.servicenow.com/docs/rw_XDztjlVwFZqFc62NwIQ)**   
  Create presets to save time and make your component configurations reusable across different experiences.
* **[Change the default appearance of components](https://www.servicenow.com/docs/JWLujuVal5gocr9QWnhRtw#add-styling-to-component)**   
  Set the styles for components and wrappers to change the default appearance.
* **[Enhance accessibility with focus management](https://www.servicenow.com/docs/WsW9oQBlslVSA1Rr~dG7VA)**   
  Set focus on specific elements, ensuring users can interact with them effectively using screen readers.
* **[Duplicate a component](https://www.servicenow.com/docs/GUxoc8efHKBf5COuGZyl_A)**   
  Duplicate a configured component to reuse on a page.
* **[Dynamically display content with conditional renderers](https://www.servicenow.com/docs/96xZLTPzmrSKHG2VHNLGbQ)**   
  Use the conditional renderer component to display content or components based on specified conditions.
* **[Page collections](https://www.servicenow.com/docs/duMlSzg0Jf_G6G3AAqHYXQ)**   
  Page Collections are groups of pages that can be used across multiple experiences.
* **[Change data visualizations in UI Builder](https://www.servicenow.com/docs/amKM0Wy4fkb4wHGCDFaKWg)**   
  Change data visualizations in real time using a drop-down list to preview data in your experience.
* **[Add tabbed content to UI Builder pages](https://www.servicenow.com/docs/dOmVwptLxVxAu_ZXmjkd5A#tabs-components)**   
  Use the Tabs component to add tabbed content to pages in UI Builder.
* **[Add a contextual sidebar](https://www.servicenow.com/docs/xkPr52zq1bh59OAFGy__EQ)**   
  Add a contextual sidebar to a page with UI Builder to display related content using a vertical tab structure.
* **[Add forms to UI Builder pages](https://www.servicenow.com/docs/dBcXe52qxWGdtTuoGUYICQ)**   
  Use the Form component to add one or more forms to UI Builder pages.
* **[Create modals in UI Builder](https://www.servicenow.com/docs/Adyf1WH~Thlf4WVj9FpQ~g)**   
  Use modals in UI Builder with components to provide alerts or calls to action for a user. UI Builder comes with modals to save time and effort.
* **[Extend your UI experience with viewport components](https://www.servicenow.com/docs/MQPo8ZoSHIJ3kNeXwf9khg)**   
  Viewports are specialized components that enable you to extend your experience without needing to own the parent page in UI Builder. You can work with viewports in three ways. You can add a viewport component or a viewport-enabled tab to a page, or add a viewport to the Contextual sidebar component.
* **[Create popovers in UI Builder](https://www.servicenow.com/docs/RvOmVgmBRZ0ihO~kpJAytA#uib-popover)**   
  Use popovers on a UI Builder page to overlay contextual information or functionality to help users complete tasks.
* **[Create modeless dialogs in UI Builder](https://www.servicenow.com/docs/oZLtV5erKTpvG5m6nPWBvA)**   
  Use modeless dialogs on a UI Builder page to add a floating window that enables you to interact with both the window content and the page content below.