{"revision":"c10276e953456835cdbb1f3a60d58ae1980be353","document":{"id":2919,"path":"application-development/ui-builder/work-components.md","title":"Customize UI Builder pages using components","bundle":null,"doc_type":null,"release":"australia","body":"\n# Customize UI Builder pages using components\n\nLearn what a component is in UI Builder. Also, see how components work within UI Builder.\n\nComponents 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.\n\nYou 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.\n\n\\[Omitted image \"components-toolbox-overview.png\"\\] Alt text: Component library showing a list of available components.\n\nYou can add components to your UI Builder page in the following ways.\n\n<table id=\"addcomponentstable\"><thead><tr><th>\n\nLocation\n\n</th><th>\n\nExample\n\n</th></tr></thead><tbody><tr><td>\n\nDirectly from a page in UI Builder \\(option 1\\)\n\n</td><td>\n\nSelect the add content \\(plus\\) icon, select the **Components** tab, and then select a component.\n\n \\[Omitted image \"component-add-from-stage.png\"\\] Alt text: Add content icon selected on the stage showing the toolbox window with Components tab selected.\n\n</td></tr><tr><td>\n\nDirectly from a page in UI Builder \\(option 2\\)\n\n</td><td>\n\nOn a column layout or component, select the add before \\(plus\\) or add after \\(plus\\) icon, and then select a component.\n\n \\[Omitted image \"component-add-on-stage-plus.png\"\\] Alt text: Animation showing how to select the + Add icon on a component and add a component.\n\n</td></tr><tr><td>\n\nFrom the **Content** tree in UI Builder\n\n</td><td>\n\nIn the content tree, select **+ Add content** and then select a component.\n\n \\[Omitted image \"component-add-from-content-tree.png\"\\] Alt text: Black arrow pointing to + add content option in content tree next to the toolbox window with Components tab selected.\n\n</td></tr><tr><td>\n\nFrom the floating menu above the page in UI Builder\n\n</td><td>\n\nOn a column layout or component, select the Menu icon, select **Add before** or **Add after**, and then select a component.\n\n</td></tr></tbody>\n</table>## Column layouts in UI Builder\n\nAdd 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.\n\n\\[Omitted image \"content-tree-layouts.png\"\\] Alt text: Content tree showing hierarchy of three column layouts with columns containing components including Color picker, Avatar, and Stylized text.\n\nFor more information, see [Column layouts](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/column-layout.md).\n\n## Configure components in UI Builder\n\nThere are three ways to configure a component in the configuration panel.\n\n-   Configure the component properties.\n-   Add CSS style overrides.\n-   Set up [event handlers](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/ui-builder-glossary.md) for the components.\n\n\\[Omitted image \"config-panel-tabs.png\"\\] Alt text: Configuration panel tabs used to configure, style, and add events to components.\n\n-   **Configure tab**\n\n    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).\n\n    For each property in the component configure tab, you can choose from the following options.\n\n    \\[Omitted image \"config-panel-hover.png\"\\] Alt text: Dynamic data binding and scripting icons are displayed when you hover over a field.\n\n    -   Static: Use data from a list, or enter your own data. The data doesn't connect to an external data source.\n    -   Dynamic [data binding](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/ui-builder-glossary.md): A way to bind a component property to a data resource, page property, or client state.\n    -   Script: Enter JavaScript code to populate a property value.\n-   **Styles tab**\n\n    You can change the Cascading Style Sheets \\(CSS\\) styles for individual components. Change color borders, font size, and so on.\n\n-   **Events tab**\n\n    Configure page-level and variant-level [event mappings](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/ui-builder-glossary.md). 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://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/ui-builder-glossary.md). 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.\n\n\nAs 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 &gt; Reload Stage**. Reloading the stage shows your changes, but does not save them. To save your work, select **Save** at the top right.\n\n\\[Omitted image \"force-stage-reload.png\"\\] Alt text: Experience view with Open menu selected showing the Developer and Reload Stage options.\n\n## Component Presets in UI Builder\n\nUse [component presets](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/ui-builder-glossary.md) 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://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/presets.md).\n\n\\[Omitted image \"preset-list-example.png\"\\] Alt text: Heading component properties configured by a preset.\n\n## Component properties sections\n\nComponent 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.\n\n\\[Omitted image \"config-panel-sections.png\"\\] Alt text: Component property sections expanded to view all available properties.\n\n## Component formula editor\n\nUse 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.\n\n\\[Omitted image \"component-formula-editor.png\"\\] Alt text: Component formula editor with an example formula.\n\nEach 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://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/add-components.md).\n\n## Component ID\n\nUse 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.\n\n\\[Omitted image \"edit-component-label.png\"\\] Alt text: Component label box where you add or edit a component label that displays in the content tree.\n\n## Component visibility\n\nSelect 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.\n\nYou can set the visibility based on dynamic data binding, or by editing a scripted property value.\n\nSet the **Test value** to test what happens when the visibility is set to true, false, or none.\n\n\\[Omitted image \"component-visibility-options.png\"\\] Alt text: Component visibility options in the configuration tab.\n\n## Duplicate components\n\nCreate 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://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/duplicate-components.md).\n\n-   **[Automatically configure components using presets](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/presets.md)**  \nUse component presets to automatically configure components on compatible pages.\n-   **[Create custom presets for components](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/preset-builder.md)**  \nCreate presets to save time and make your component configurations reusable across different experiences.\n-   **[Change the default appearance of components](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/add-styling-to-component.md)**  \nSet the styles for components and wrappers to change the default appearance.\n-   **[Enhance accessibility with focus management](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/focus-management.md)**  \nSet focus on specific elements, ensuring users can interact with them effectively using screen readers.\n-   **[Duplicate a component](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/duplicate-components.md)**  \nDuplicate a configured component to reuse on a page.\n-   **[Dynamically display content with conditional renderers](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/conditional-renderer.md)**  \nUse the conditional renderer component to display content or components based on specified conditions.\n-   **[Learn components by example](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/learning-components-by-example.md)**  \nFollow these procedures to learn how components create the functionality you need in your UI Builder pages.\n-   **[Page collections](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/page-collections.md)**  \nPage Collections are groups of pages that can be used across multiple experiences.\n-   **[Change data visualizations in UI Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/component-hot-swapping.md)**  \nChange data visualizations in real time using a drop-down list to preview data in your experience.\n-   **[Add tabbed content to UI Builder pages](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/tabs-components.md)**  \nUse the Tabs component to add tabbed content to pages in UI Builder.\n-   **[Add a contextual sidebar](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/add-contextual-sidebar.md)**  \nAdd a contextual sidebar to a page with UI Builder to display related content using a vertical tab structure.\n-   **[Add forms to UI Builder pages](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/add-forms-to-ui-builder-pages.md)**  \nUse the Form component to add one or more forms to UI Builder pages.\n-   **[Create modals in UI Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/Modals-overview.md)**  \nUse 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.\n-   **[Extend your UI experience with viewport components](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/viewports-overview.md)**  \nViewports 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.\n-   **[Create popovers in UI Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/uib-popover.md)**  \nUse popovers on a UI Builder page to overlay contextual information or functionality to help users complete tasks.\n-   **[Create modeless dialogs in UI Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/uib-modeless-dialog.md)**  \nUse 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.\n-   **[Configure alerts to auto-dismiss](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/uib-configure-alerts.md)**  \nSet alerts to automatically clear after a specified time period.\n\n**Parent Topic:**[Working in UI Builder](https://raw.githubusercontent.com/ServiceNow/ServiceNowDocs/australia/markdown/australia/application-development/ui-builder/using-ui-builder.md)\n\n"}}