Quick options

Quick options allow editors to select simple options for the component they are working on via a menu on the component Capsule control in the preview column. Boolean and enumerated values properties can be made available as quick options.

Accessing quick options

Enabling quick options for a component property allows a content editor to adjust these settings directly from the component capsule.

This enables component property editing of simple values, as a True/False toggle or a Left/Right image placement choice, directly in the preview column, rather than requiring them to be changed in the page outline column.

Quick options enable editors to make adjustments while working directly with the content.

Properties of type boolean and string (with enumerated values) can be configured to be available as quick options.

Figure 1. Quick options for a left/right choice

In this component, quick options allow the editor to choose whether the text is shown to the left or right.

Component changes

Enabling quick options requires an edit to the manifest.json file.

ui-metadata is an optional property that a developer can add to the component input properties on a manifest. The values specified for this property inform the interaction behavior of the component in the Page Builder interface for a content editor.

This property is a non-breaking change that will not affect the component being used on standard pages.

A simple example:

"ui:metadata": {
    "quickOption": true
}

A more complete example of a single string (with enumerated values) property:

"foregroundColor": {
    "type": "string",
    "title": "Foreground Color",
    "enum": [
        "Black",
        "White",
        "Red",
        "Green",
        "Blue"
    ],
    "default": "Black",
    "ui:metadata": {
        "quickOption": true
    }
}

If the string (enum) or boolean setting does not have the quickOption property defined or if it is set to false for ui:metadata, the person using the component can only change that setting in the page outline column.

However, if the string (enum) or boolean setting does have the quickOption property set to true for ui:metadata, then that enum or boolean setting can be configured in the page outline column or edited inline using the quick options pull-down in the preview column.

Figure 2. Editing a property using the page outline column

A setting might not be made available in quick options if a component has multiple boolean or string (enum) settings, and there is a desire to limit which ones can be quickly changed in the preview column.

Having more than one setting configured for quick options will lengthen the Capsule control menu.

Help Center

Menu

Quick options

Accessing quick options

Component changes