Model Definitions, Fields, and Component Types field-types
Learn about fields and the component types that the Universal Editor can edit in the properties panel with examples. Understand how you can instrument your own app by creating a model definition and linking to the component.
Overview overview
When adapting your own apps for use with the Universal Editor, you must instrument the components and define what fields and component types they can manipulate in the properties panel of the editor. You do this by creating a model and linking to that from the component.
This document provides an overview of a model definition and of fields and the component types available to you along with example configurations.
Model Definition Structure model-structure
In order to configure a component via the properties panel in the Universal Editor, a model definition has to exist and be linked to the component.
The model definition is a JSON structure, starting with an array of models.
[
{
"id": "model-id", // must be unique
"fields": [] // array of fields which shall be rendered in the properties panel
}
]
See the Fields section of this document for more information about how to define your fields
array.
To use the model definition with a component, the data-aue-model
attribute can be used.
<div data-aue-resource="urn:datasource:/content/path" data-aue-type="component" data-aue-model="model-id">Click me</div>
Loading a Model Definition loading-model
Once a model is created, it can be referenced as an external file.
<script type="application/vnd.adobe.aue.model+json" src="<url-of-model-definition>"></script>
Alternatively you can also define the model inline.
<script type="application/vnd.adobe.aue.model+json">
{ ... model definition ... }
</script>
Fields fields
A field object has the following type definition.
component
ComponentType
name
string
label
FieldLabel
description
FieldDescription
placeholder
string
value
FieldValue
valueType
ValueType
string
, string[]
, number
, date
, boolean
required
boolean
readOnly
boolean
hidden
boolean
multi
boolean
validation
ValidationType
raw
unknown
Component Types component-types
The following are the component types that are possible to use for rendering fields.
aem-tag
aem-content
boolean
checkbox-group
container
aem-content-fragment
date-time
aem-experience-fragment
multiselect
number
radio-group
reference
richtext
select
tab
text
AEM Tag aem-tag
An AEM tag component type enables an AEM tag picker, which can be used to attach tags to the component.
code language-json |
---|
|

AEM Content aem-content
An AEM content component type enables an AEM content picker, which can be used to select any AEM resource. Unlike the reference component, which can only select assets, the AEM content component can reference any AEM content. It offers an additional validation type.
rootPath
string
code language-json |
---|
|

Boolean boolean
A boolean component type stores a simple true/false value rendered as a toggle. It offers an additional validation type.
customErrorMsg
string
code language-json |
---|
|
code language-json |
---|
|

Checkbox Group checkbox-group
Similar to a boolean, a checkbox group component type allows for the selection of multiple true/false items, rendered as multiple checkboxes.
code language-json |
---|
|

Container container
A container component type allows the grouping of components. It offers an additional configuration.
collapsible
boolean
code language-json |
---|
|

Content Fragment content-fragment
The Content Fragment picker can be used to select a Content Fragment and its variations (if required). It offers an additional configuration.
variationName
string
It also offers an additional validation type.
rootPath
string
code language-json |
---|
|

Date Time date-time
A date time component type allows the specification of a date, time, or combination thereof. It offers additional configurations.
displayFormat
string
valueFormat
string
It also offers an additional validation type.
customErrorMsg
string
valueFormat
isn’t metcode language-json |
---|
|
code language-json |
---|
|

Experience Fragment experience-fragment
The Experience Fragment picker can be used to select an Experience Fragment and its variations (if required). It offers an additional configuration.
variationName
string
It also offers an additional validation type.
rootPath
string
code language-json |
---|
|

Multiselect multiselect
A multiselect component type presents multiple items for selection in a drop-down including the ability to group the selectable elements.
code language-json |
---|
|
code language-json |
---|
|


Number number
A number component type allows for the input of a number. It offers additional validation types.
numberMin
number
numberMax
number
customErrorMsg
string
numberMin
or numberMax
isn’t metcode language-json |
---|
|
code language-json |
---|
|

Radio Group radio-group
A radio group component type allows for a mutually-exclusive selection from multiple options rendered as a group similar to a checkbox group.
code language-json |
---|
|

Reference reference
An reference component type enables an AEM asset picker, which can be used to select any AEM asset to reference. Unlike the AEM content component, which can select any AEM resource, the reference component can only reference assets. It offers an additional validation type.
A reference component type allows for a reference to another data object from the current object.
code language-json |
---|
|

Rich Text rich-text
Rich text allows for multi-line, rich text input. It offers additional validation types.
maxSize
number
customErrorMsg
string
maxSize
is exceededcode language-json |
---|
|
code language-json |
---|
|

Select select
A select component type allows for selection of a single option from a list of predefined options in a drop-down menu.
code language-json |
---|
|

Tab tab
A tab component type allows you to group other input fields together on multiple tabs to improve layout organization for the authors.
A tab
definition can be thought of as a separator in the array of fields
. Everything that comes after a tab
will be placed on that tab until a new tab
is encountered, whereafter the following items will be placed on the new tab.
If you wish to have items that appear above all tabs, they must be defined before any tabs.
code language-json |
---|
|

Text text
Text allows for a single line of text input. It includes additional validation types.
minLength
number
maxLength
number
regExp
string
customErrorMsg
string
minLength
, maxLength
, and/or regExp
is/are violatedcode language-json |
---|
|
code language-json |
---|
|
