Modelldefinitionen, Felder und Komponententypen field-types
Erfahren Sie anhand von Beispielen mehr über Felder und die Komponententypen, die der universelle Editor im Bedienfeld „Eigenschaften“ bearbeiten kann. Erfahren Sie, wie Sie Ihre eigene App instrumentieren können, indem Sie eine Modelldefinition erstellen und mit der Komponente verknüpfen.
Überblick overview
Wenn Sie Ihre eigenen Apps für die Verwendung mit dem universellen Editor anpassen, müssen Sie die Komponenten instrumentieren und definieren, welche Felder und Komponententypen sie im Bedienfeld „Eigenschaften“ des Editors bearbeiten können. Erstellen Sie dazu ein Modell und verknüpfen Sie es über die Komponente mit diesem.
Dieses Dokument bietet einen Überblick über eine Modelldefinition sowie über die verfügbaren Felder und Komponententypen sowie Beispielkonfigurationen.
Modelldefinitionsstruktur model-structure
Um eine Komponente über das Bedienfeld „Eigenschaften“ im universellen Editor zu konfigurieren, muss eine Modelldefinition vorhanden und mit der Komponente verknüpft sein.
Die Modelldefinition ist eine JSON-Struktur, die mit einem Array von Modellen beginnt.
[
{
"id": "model-id", // must be unique
"fields": [] // array of fields which shall be rendered in the properties panel
}
]
Im Abschnitt Felder in diesem Dokument finden Sie weitere Informationen zum Definieren des fields
-Arrays.
Sie können ein Modell auf zwei Arten mit einer Komponente verknüpfen: mit der Komponentendefinition oder über die Instrumentierung.
Verknüpfen mit der Komponentendefinition component-definition
Dies ist die bevorzugte Methode zum Verknüpfen des Modells mit der Komponente. Sie können so die Verknüpfung zentral in der Komponentendefinition verwalten und Komponenten per Drag-and-Drop über Container hinweg ziehen.
Schließen Sie einfach die Eigenschaft model
in das Komponentenobjekt im Array components
in der Datei component-definition.json
ein.
Weitere Informationen finden Sie im Dokument Komponentendefinition.
Verknüpfen über die Instrumentierung instrumentation
Um die Modelldefinition mit einer Komponente zu verwenden, kann das Attribut data-aue-model
verwendet werden.
<div data-aue-resource="urn:datasource:/content/path" data-aue-type="component" data-aue-model="model-id">Click me</div>
- Projekte, bei denen die Verknüpfung mit dem Modell über die Instrumentierung implementiert wurde, funktionieren weiterhin unverändert, ohne dass Änderungen erforderlich sind.
- Wenn Sie das Modell in der Komponentendefinition und in der Instrumentierung definieren, wird immer die Instrumentierung verwendet.
Laden einer Modelldefinition loading-model
Sobald ein Modell erstellt wurde, kann es als externe Datei referenziert werden.
<script type="application/vnd.adobe.aue.model+json" src="<url-of-model-definition>"></script>
Alternativ können Sie das Modell auch inline definieren.
<script type="application/vnd.adobe.aue.model+json">
{ ... model definition ... }
</script>
Felder fields
Ein Feldobjekt hat die folgende Typdefinition.
component
ComponentType
name
string
label
FieldLabel
description
FieldDescription
placeholder
string
value
FieldValue
valueType
ValueType
string
, string[]
, number
, date
, boolean
sein.required
boolean
readOnly
boolean
hidden
boolean
condition
RulesLogic
multi
boolean
validation
ValidationType
raw
unknown
Komponententypen component-types
Im Folgenden finden Sie die Komponententypen, die für das Rendern von Feldern verwendet werden können.
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
Ein AEM Tag-Komponententyp aktiviert eine AEM Tag-Auswahl, die zum Anhängen von Tags an die Komponente verwendet werden kann.
code language-json |
---|
|

AEM-Inhalt aem-content
Ein AEM-Inhaltskomponententyp aktiviert eine AEM-Inhaltsauswahl, die zum Auswählen von beliebigen AEM-Ressourcen verwendet werden kann. Im Gegensatz zur Referenzkomponente, die nur Assets auswählen kann, kann die AEM-Inhaltskomponente auf jeden AEM-Inhalt verweisen. Sie bietet einen zusätzlichen Validierungstyp.
rootPath
string
code language-json |
---|
|

Boolesch boolean
Ein boolescher Komponententyp speichert einen einfachen true/false-Wert, der als Umschalter gerendert wird. Sie bietet einen zusätzlichen Validierungstyp.
customErrorMsg
string
code language-json |
---|
|
code language-json |
---|
|

Kontrollkästchengruppe checkbox-group
Ähnlich wie bei einem booleschen Wert ermöglicht ein Kontrollkästchengruppen-Komponententyp die Auswahl mehrerer true/false-Elemente, die als mehrere Kontrollkästchen gerendert werden.
code language-json |
---|
|

Container container
Ein Container-Komponententyp ermöglicht die Gruppierung von Komponenten. Er bietet eine zusätzliche Konfiguration.
collapsible
boolean
code language-json |
---|
|

Inhaltsfragment content-fragment
Mit der Auswahl für Inhaltsfragmente können Sie ein Inhaltsfragment und dessen Varianten (falls erforderlich) auswählen. Er bietet eine zusätzliche Konfiguration.
variationName
string
Er bietet außerdem einen zusätzlichen Validierungstyp.
rootPath
string
code language-json |
---|
|

Datum und Uhrzeit date-time
Ein Datums-/Uhrzeitkomponententyp ermöglicht die Angabe eines Datums, einer Uhrzeit oder einer Kombination davon. Er bietet zusätzliche Konfigurationen.
displayFormat
string
valueFormat
string
Er bietet außerdem einen zusätzlichen Validierungstyp.
customErrorMsg
string
valueFormat
nicht respektiert wird.code language-json |
---|
|
code language-json |
---|
|

Experience Fragment experience-fragment
Mit der Experience Fragment-Auswahl können Sie ein Experience Fragment und dessen Varianten (falls erforderlich) auswählen. Er bietet eine zusätzliche Konfiguration.
variationName
string
Er bietet außerdem einen zusätzlichen Validierungstyp.
rootPath
string
code language-json |
---|
|

Mehrfachauswahl multiselect
Ein Mehrfachauswahl-Komponententyp zeigt mehrere Elemente zur Auswahl in einer Dropdown-Liste an, einschließlich der Möglichkeit, die auswählbaren Elemente zu gruppieren.
code language-json |
---|
|
code language-json |
---|
|


Zahl number
Ein Zahl-Komponententyp ermöglicht die Eingabe einer Zahl. Er bietet zusätzliche Validierungstypen.
numberMin
number
numberMax
number
customErrorMsg
string
numberMin
oder numberMax
nicht erfüllt ist.code language-json |
---|
|
code language-json |
---|
|

Optionsfeldgruppe radio-group
Ein Optionsfeldgruppen-Komponententyp ermöglicht eine einander ausschließende Auswahl aus mehreren Optionen, die als Gruppe ähnlich einer Kontrollkästchengruppe gerendert werden.
code language-json |
---|
|

Referenz reference
Ein Referenzkomponententyp aktiviert einen AEM Asset-Wähler, der zur Auswahl beliebiger zu referenzierender AEM-Assets verwendet werden kann. Im Gegensatz zur AEM-Inhaltskomponente, die eine beliebige AEM-Ressource auswählen kann, kann die Referenzkomponente nur auf Assets verweisen. Sie bietet einen zusätzlichen Validierungstyp.
Ein Referenz-Komponententyp ermöglicht einen Verweis auf ein anderes Datenobjekt aus dem aktuellen Objekt.
code language-json |
---|
|

Rich-Text rich-text
Rich-Text ermöglicht eine mehrzeilige Rich-Text-Eingabe. Er bietet zusätzliche Validierungstypen.
maxSize
number
customErrorMsg
string
maxSize
überschritten wird.code language-json |
---|
|
code language-json |
---|
|

Auswahl select
Ein Auswahl-Komponententyp ermöglicht die Auswahl einer einzelnen Option aus einer Liste vordefinierter Optionen in einem Dropdown-Menü.
code language-json |
---|
|

Registerkarte tab
Ein Registerkarten-Komponententyp ermöglicht das Gruppieren anderer Eingabefelder auf mehreren Registerkarten, um die Layout-Organisation für Autorinnen und Autoren zu verbessern.
Eine tab
-Definition kann als Trennzeichen in einer Reihe von fields
betrachtet werden. Alles, was nach einem tab
kommt, wird auf dieser Registerkarte platziert, bis auf einen neuen tab
gestoßen wird, woraufhin die folgenden Elemente auf der neuen Registerkarte platziert werden.
Wenn Sie Elemente haben möchten, die oberhalb von allen Registerkarten angezeigt werden, müssen diese vor allen Registerkarten definiert werden.
code language-json |
---|
|

Text text
Text ermöglicht die Eingabe einer einzelnen Textzeile. Er enthält zusätzliche Validierungstypen.
minLength
number
maxLength
number
regExp
string
customErrorMsg
string
minLength
, maxLength
und/oder regExp
verstoßen wird,code language-json |
---|
|
code language-json |
---|
|
