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


---

# Create custom presets for components

# Create custom presets for components {#ariaid-title1}

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

Create presets to save time and make your component configurations reusable across different experiences.

## Before you begin

Role required: ui_builder_admin

## Procedure

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Select Create.
3. Select Preset.
4. On the form, fill in the fields.  
   {#preset-builder__table_s4y_ryn_15b__entry__2}

   | Field | Description |
   |-|-|
   | Name | Name to track your preset internally. |
   | Component | Select the component you want to create a preset for. |
   | Controller | Select the controller with data and logic to power the preset. |
   | Description | Short description to help find your preset. Write a description that helps page builders understand what content is included in the preset. |
   [Table 1. Create a page collection form]

   {#preset-builder__table_s4y_ryn_15b}
5. Select Create.  
   The preset building window opens.

6. Enter controller test values to preview data in the component preset.
7. Configure the component properties you want to apply with the preset.
8. Bind data from the controller to the component preset by dragging items from the data preview section to the fields in the configure panel.  
9. **Optional:** Add events to the component.  
   For more information, see [Configure an event handler manually](https://servicenow-prod.fluidtopics.net/QNoLeCdl9t4RvlX8V62bjw "Add an event handler to a page, component, data resource, or declarative action within UI Builder so that your user can trigger an action.").
10. Select Save.

## What to do next

Apply the preset you just created by [selecting a preset in UI Builder](https://servicenow-prod.fluidtopics.net/BWKbQtnUtb7nqnuy_Q2LvA#select-preset "Choose a component preset when adding a component to your page.").

*[\>]: and then