---
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


---

# Automatically configure components using presets

# Automatically configure components using presets {#ariaid-title1}

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

Use component presets to automatically configure components on compatible
pages.

Use component presets to apply predefined configuration values and event mappings to components. UI Builder page templates contain [controllers](https://www.servicenow.com/docs/zrx4f9YaC1RRjhOLAHK~EQ#gloss-controller-ui-builder "A type of data resource that includes data and event logic and enables component presets. Controllers are added automatically when using a page template. There are two types of controllers: Data controllers contain data resources and can be manually added to a page UI controllers are added to pages when using page templates and can't be added manually. Creating controllers isn't supported currently.") that presets use to define component configuration values.

Presets apply pre-built configurations to component properties and event handlers and are only available for certain components. They are based on common use cases for components, such as configuring a Form
component with fields that are typically included on a record page.

Applying a preset automatically configures components to work immediately, simplifying page creation and maintenance for page authors.

Presets offer the following benefits to page authors:

* Handling of complex data and event binding for components
* Reduced cost of ownership and maintenance due to being defined external to pages

{#presets__ul_tn4_lcf_zsb}

From the Configuration pane, you can select whether to apply a preset to the selected component or instead manually configure it. Default presets are automatically applied for components when a page is created from a template or
the controller required for the preset is already added to the page. Any properties or events configured by the preset display as read-only when a preset is applied.

You can override values configured by a preset but in doing so you assume ownership of the component configuration and maintenance.  
Sub-pages do not inherit controllers and are not able to use presets in Yokohama.Figure 1. Preset applied to a component

## Data and event bindings {#presets__section_rvd_32f_zsb}

Presets can include bindings to:

* Controller output properties (@data)
* Event payloads (@payload)
* Session context (@context.session)
* Complex formulas (client transforms)

{#presets__ul_dg3_c54_1tb}

Presets can also include event mappings to a controller's handled events. For more information, see [Manage actions in UI Builder pages](https://www.servicenow.com/docs/AaUhb8SxjN3p6v8m~liNsw "Learn how to work with events so that you can add actions to components, pages, data resources, and declarative actions in UI Builder.").

## Controllers {#presets__section_chn_ym2_zsb}

Presets connect components to data and event mappings using a controller. If the controller required by a preset is not already on the page, the preset prompts you to configure the controller's required properties and adds the
controller. After a controller is added to a page, components that have presets associated with the controller appear highlighted in the components list. For more information, see [Bind data to UI Builder pages using controllers (advanced feature)](https://www.servicenow.com/docs/gyIerqFmP0WfCX4GVx9Yuw#controllers "Controllers simplify the linking of data and event logic to enable component presets in UI Builder.").  
Figure 2. Components with presets

Check the Presets available box to view components with presets in the toolbox.

## Select a component preset {#ariaid-title2}

Choose a component preset when adding a component to your
page.

### Before you begin

Role required: admin

### Procedure

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://www.servicenow.com/docs/nDWg0NsWQpdF_OppvTVe5g "Learn what an experience is in UI Builder. Understand what an experience contains.") for more information on creating experiences.
3. Create or open a page or page variant.  
   For more information about how to create a page in UI Builder, see [Create a page in UI
   Builder](https://www.servicenow.com/docs/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.").
4. Open the toolbox.
5. Select the Presets available box.
6. Select the component you want to add to your page.  
7. The component automatically configures with the default preset.  
8. **Optional:** Select a different preset from the list in the configuration panel.  
   You can configure a component not to use a preset by selecting Remove current preset.
   1. Select a new component preset in the configuration panel.
   2. Select Apply to replace the existing preset.

9. Click Save.

## Override a component preset {#ariaid-title3}

Override a component preset to enter your own custom
values.

### Before you begin

Role required: admin

### Procedure

1. Select a component with a preset.  
2. Find the data value that you want to override in the configuration panel.
3. Click the lock icon in the data field.
4. Enter the data value that you want to override the preset value.
5. Select Save.  

### Result

The configuration panel displays the custom value in the field.

## Reset a component {#ariaid-title4}

Reset component presets to their default
values.

### Before you begin

Role required: admin

### Procedure

1. Select the component that you want to reset in the content tree.  
2. Select the component name in the configuration panel.  
3. Click Reset component.  
4. Click Reset.

### Result

The component preset resets to the default values.

*[\>]: and then