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

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 Washington DC.
Figure 1. Preset applied to a component
Heading component properties configured by a preset.

Data and event bindings

Presets can include bindings to:

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

Presets can also include event mappings to a controller's handled events. For more information, see Manage actions in UI Builder pages (advanced feature).

Controllers

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

Figure 2. Components with presets
Components tab showing components with preset label highlighted.

Select a component preset

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

Before you begin

Role required: admin

Procedure

  1. Navigate to All > Now Experience Framework > UI Builder.
  2. Open an experience to work in or create an experience by selecting + Create.
    See Configure how users interact with your applications in UI Builder 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.
  4. Open the toolbox.
  5. Add a component highlighted in green to your page.

    Components highlighted in green have presets available.

    Open the component library and drag a component highlighted in green onto your page.
  6. The component automatically configures with the default preset.
    The default component preset displays in the preset drop-down.
  7. (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.
    1. Select Continue to replace the existing preset.
    Select a different preset or no preset from the list.
  8. Click Save.

Override a component preset

Override a component preset to enter your own custom values.

Before you begin

Role required: admin

Procedure

  1. Select a component with a preset.
    Select the component you want to override in the content tree.
  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.
    Override preset component values with custom values.

Result

The configuration panel displays the custom value in the field.

Reset a component

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.
    Select the component you want to override in the content tree.
  2. Select the component name in the configuration panel.
    Component name in the configuration panel.
  3. Click Reset component.
    Reset component values with the reset component option.
  4. Click Reset.

Result

The component preset resets to the default values.