Customizing and Extending the Universal Editor customizing-extending

Learn about the different extension points and other features that allow you to customize the authoring experience of the Universal Editor to support the needs of your content authors.

Overview overview

The Universal Editor allows for two types of adaptation for your project’s needs.

Both types are detailed in the following sections.

Customizing the Universal Editor customizing

The Universal Editor offers several built-in options to customize its functionality.

Disabling Publishing disable-publish

Certain authoring workflows require content to be reviewed before it is published. In such situations, the option to publish should not be available to any authors.

The Publish button can therefore be suppressed entirely in an app by adding the following metadata.

<meta name="urn:adobe:aue:config:disable" content="publish"/>

Filtering Components filtering-components

When using the Universal Editor, you can restrict the allowed components per container component. To do this, you must introduce an additional script tag, which points to the filter definition.

<script type="application/vnd.adobe.aue.filter+json" src="/static/filter-definition.json"></script>

A filter definition might look like the following, which would restrict a container to only allow adding text and images.

[
  {
    "id": "container-filter",
     "components": ["text", "image"]
   }
]

Then you can reference the filter definition from your container component by adding the property data-aue-filter, passing the ID of the filter you defined previously.

data-aue-filter="container-filter"

Setting the components attribute in a filter definition to null allows all components, as if there were no filter.

[
  {
    "id": "another-container-filter",
     "components": null
   }
]

Conditionally Show and Hide Components in Properties Panel conditionally-hide

Although a component or components may generally be available to your authors, there may be certain situations where it does not make sense. In such cases, you can hide components in the properties panel by adding a condition attribute to the fields of the component model.

Conditions can be defined using JsonLogic schema. If the condition is true, then the field will be displayed. If the condition is false, then the field will be hidden.

Sample Model

code language-json
{ "id": "conditionally-revealed-component", "fields": [ { "component": "boolean", "label": "Shall the text field be revealed?", "name": "reveal", "valueType": "boolean" }, { "component": "text-input", "label": "Hidden text field", "name": "hidden-text", "valueType": "string", "condition": { "===": [{"var" : "reveal"}, true] } } ] }

Condition False

Condition True

Custom Preview URLs custom-preview-urls

You can specify a custom preview URL via a urn:adobe:aue:config:preview meta configuration, which will open when clicking the Open page button in the editor’s top-right toolbar.

This is particularly useful for applications with specific preview requirements, such as those using Edge Delivery Services with WYSIWYG authoring.

To do so, simply include the desired preview URL in a meta tag of the instrumented app like the following example.

<meta name="urn:adobe:aue:config:preview" content="https://wknd.site"/>

Extending the Universal Editor UI extending

As an Adobe Experience Cloud service, the Universal Editor’s UI can be extended using the App Builder and Experience Manager.

UI extensions are JavaScript applications built with Adobe App Builder that can be embedded in UI applications that run under Adobe Experience Cloud unified shell, such as the Universal Editor. You can add your own buttons and actions to the header menu and properties panel as well as create your own events for the Universal Editor.

If you would like to explore these possibilities, please see the following resources:

Using Extension Manager in AEM Sites, you can enable or disable your extensions on a per-instance basis, access Adobe’s first-party extensions including those for the Universal Editor, and much more.