DokumentationAEM as a Cloud ServiceBenutzerhandbuch

Modelldefinitionen, Felder und Komponententypen field-types

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Erstellt für:

  • Admin
  • Entwickler

Erfahren Sie anhand von Beispielen mehr über die Felder und Komponententypen, die mit dem universellen Editor in der Eigenschaftenleiste bearbeitet werden können. 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 in der Eigenschaftenleiste 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.

TIP
Wenn Sie nicht wissen, wie Sie Ihre Anwendung für den universellen Editor instrumentieren, lesen Sie bitte das Dokument Übersicht über den universellen Editor für AEM-Entwicklerinnen und -entwickler.

Modelldefinitionsstruktur model-structure

Um eine Komponente über die Eigenschaftenleiste 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 rail
  }
]

Im Abschnitt Felder in diesem Dokument finden Sie weitere Informationen zum Definieren des fields-Arrays.

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>

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.

Konfiguration
Werttyp
Beschreibung
Erforderlich
component
ComponentType
Renderer der Komponente
Ja
name
string
Eigenschaft, in der die Daten beibehalten werden sollen.
Ja
label
FieldLabel
Titel des Felds
Ja
description
FieldDescription
Beschreibung des Felds
Nein
placeholder
string
Platzhalter für das Feld
Nein
value
FieldValue
Standardwert
Nein
valueType
ValueType
Standardvalidierung, kann string, string[], number, date, boolean sein.
Nein
required
boolean
Ist das Feld erforderlich?
Nein
readOnly
boolean
Ist das Feld schreibgeschützt?
Nein
hidden
boolean
Ist das Feld standardmäßig ausgeblendet?
Nein
condition
RulesLogic
Regel zum Anzeigen oder Ausblenden des Felds basierend auf einer Bedingung.
Nein
multi
boolean
Ist das Feld ein Mehrfachfeld?
Nein
validation
ValidationType
Validierungsregeln oder Regeln für das Feld
Nein
raw
unknown
Rohdaten, die von der Komponente verwendet werden können.
Nein

Komponententypen component-types

Im Folgenden finden Sie die Komponententypen, die für das Rendern von Feldern verwendet werden können.

Beschreibung
Komponententyp
AEM-Tag
aem-tag
AEM-Inhalt
aem-content
Boolesch
boolean
Kontrollkästchen-Gruppe
checkbox-group
Container
container
Inhaltsfragment
aem-content-fragment
Datum und Uhrzeit
date-time
Mehrfachauswahl
multiselect
Zahl
number
Optionsfeldgruppe
radio-group
Verweis
reference
Rich-Text
richtext
Auswählen
select
Registerkarte
tab
Text
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.

Beispiel
code language-json 
{
  "id": "aem-tag-picker",
  "fields": [
    {
      "component": "aem-tag",
      "label": "AEM Tag Picker",
      "name": "cq:tags",
      "valueType": "string"
    }
  ]
}
Screenshot
Screenshot des AEM-Tag-Komponententyps

AEM-Inhalt aem-content

Der AEM-Inhaltskomponententyp aktiviert eine AEM-Inhaltsauswahl, die zum Festlegen von Inhaltsverweisen verwendet werden kann.

Beispiel
code language-json 
{
  "id": "aem-content-picker",
  "fields": [
    {
      "component": "aem-content",
      "name": "reference",
      "value": "",
      "label": "AEM Content Picker",
      "valueType": "string"
    }
  ]
}
Screenshot
Screenshot des AEM-Inhaltskomponententyps

Boolesch boolean

Ein boolescher Komponententyp speichert einen einfachen true/false-Wert, der als Umschalter gerendert wird.  Er bietet einen zusätzlichen Validierungstyp.

Validierungstyp
Werttyp
Beschreibung
Erforderlich
customErrorMsg
string
Meldung, die angezeigt wird, wenn der eingegebene Wert kein boolescher Wert ist
Nein
Beispiel 1
code language-json 
{
  "id": "boolean",
  "fields": [
    {
      "component": "boolean",
      "label": "Boolean",
      "name": "boolean",
      "valueType": "boolean"
    }
  ]
}
Beispiel 2
code language-json 
{
  "id": "another-boolean",
  "fields": [
    {
      "component": "boolean",
      "label": "Boolean",
      "name": "boolean",
      "valueType": "boolean",
      "validation": {
        "customErrorMsg": "Think, McFly. Think!"
      }
    }
  ]
}
Screenshot
Screenshot eines booleschen Komponententyps

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.

Beispiel
code language-json 
{
  "id": "checkbox-group",
  "fields": [
    {
      "component": "checkbox-group",
      "label": "Checkbox Group",
      "name": "checkbox",
      "valueType": "string[]",
      "options": [
        { "name": "Option 1", "value": "option1" },
        { "name": "Option 2", "value": "option2" }
      ]
    }
  ]
}
Screenshot
Screenshot eines Kontrollkästchengruppen-Komponententyps

Container container

Ein Container-Komponententyp ermöglicht die Gruppierung von Komponenten. Er bietet eine zusätzliche Konfiguration.

Konfiguration
Werttyp
Beschreibung
Erforderlich
collapsible
boolean
Ist der Container ausblendbar?
Nein
Beispiel
code language-json 
 {
  "id": "container",
  "fields": [
    {
      "component": "container",
      "label": "Container",
      "name": "container",
      "valueType": "string",
      "collapsible": true,
      "fields": [
        {
          "component": "text-input",
          "label": "Simple Text 1",
          "name": "text",
          "valueType": "string"
        },
        {
          "component": "text-input",
          "label": "Simple Text 2",
          "name": "text2",
          "valueType": "string"
        }
      ]
    }
  ]
}
Screenshot
Screenshot eines Container-Komponententyps

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.

Konfiguration
Werttyp
Beschreibung
Erforderlich
variationName
string
Variablenname, um auf die ausgewählte Variante zu speichern.  Wenn nicht definiert, wird keine Variantenauswahl angezeigt.
Nein
Beispiel 1
code language-json 
[
  {
    "id": "aem-content-fragment",
    "fields": [
      {
        "component": "aem-content-fragment",
        "name": "picker",
        "label": "Content Fragment Picker",
        "valueType": "string",
        "variationName": "contentFragmentVariation"
      }
    ]
  }
]
Screenshot
Screenshot einer Inhaltsfragmentauswahl

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.

Konfiguration
Werttyp
Beschreibung
Erforderlich
displayFormat
string
Format für das Anzeigen der Datums-Zeichenfolge
Ja
valueFormat
string
Format für das Speichern der Datums-Zeichenfolge
Ja

Er bietet außerdem einen zusätzlichen Validierungstyp.

Validierungstyp
Werttyp
Beschreibung
Erforderlich
customErrorMsg
string
Meldung, die angezeigt wird, wenn valueFormat nicht respektiert wird.
Nein
Beispiel 1
code language-json 
{
  "id": "date-time",
  "fields": [
    {
      "component": "date-time",
      "label": "Date & Time",
      "name": "date",
      "valueType": "date"
    }
  ]
}
Beispiel 2
code language-json 
{
  "id": "another-date-time",
  "fields": [
    {
      "component": "date-time",
       "valueType": "date-time",
      "name": "field1",
      "label": "Date Time",
      "description": "This is a date time field that stores both date and time.",
      "required": true,
      "placeholder": "YYYY-MM-DD HH:mm:ss",
      "displayFormat": null,
      "valueFormat": null,
      "validation": {
        "customErrorMsg": "Marty! You have to come back with me!"
      }
    },
    {
      "component": "date-time",
      "valueType": "date",
      "name": "field2",
      "label": "Another Date Time",
      "description": "This is another date time field that only stores the date.",
      "required": true,
      "placeholder": "YYYY-MM-DD",
      "displayFormat": null,
      "valueFormat": null,
      "validation": {
        "customErrorMsg": "Back to the future!"
      }
    },
    {
      "component": "date-time",
      "valueType": "time",
      "name": "field3",
      "label": "Yet Another Date Time",
      "description": "This is another date time field that only stores the time.",
      "required": true,
      "placeholder": "HH:mm:ss",
      "displayFormat": null,
      "valueFormat": null,
      "validation": {
        "customErrorMsg": "Great Scott!"
      }
    }
  ]
}
Screenshot
Screenshot eines Datums-/Uhrzeitkomponententyps

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.

Konfiguration
Werttyp
Beschreibung
Erforderlich
variationName
string
Variablenname, um auf die ausgewählte Variante zu speichern.  Wenn nicht definiert, wird keine Variantenauswahl angezeigt.
Nein
Beispiel 1
code language-json 
[
  {
    "id": "aem-experience-fragment",
    "fields": [
      {
        "component": "aem-experience-fragment",
        "name": "picker",
        "label": "Experience Fragment Picker",
        "valueType": "string",
        "variationName": "experienceFragmentVariation"
      }
    ]
  }
]
Screenshot
Screenshot einer Experience Fragment-Auswahl

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.

Beispiel 1
code language-json 
{
  "id": "multiselect",
  "fields": [
    {
      "component": "multiselect",
      "name": "multiselect",
      "label": "Multi Select",
      "valueType": "string",
      "options": [
        { "name": "Option 1", "value": "option1" },
        { "name": "Option 2", "value": "option2" }
      ]
    }
  ]
}
Beispiel 2
code language-json 
{
  "id": "multiselect-grouped",
  "fields": [
    {
      "component": "multiselect",
      "name": "property",
      "label": "Multiselect field",
      "valueType": "string",
      "required": true,
      "maxSize": 2,
      "options": [
        {
          "name": "Theme",
          "children": [
            { "name": "Light", "value": "light" },
            { "name": "Dark",  "value": "dark" }
          ]
        },
        {
          "name": "Type",
          "children": [
            { "name": "Alpha", "value": "alpha" },
            { "name": "Beta", "value": "beta" },
            { "name": "Gamma", "value": "gamma" }
          ]
        }
      ]
    }
  ]
}
Screenshots
Screenshot eines Mehrfachauswahl-Komponententyps
Screenshot eines Mehrfachauswahl-Komponententyps mit Gruppierung

Zahl number

Ein Zahl-Komponententyp ermöglicht die Eingabe einer Zahl.  Er bietet zusätzliche Validierungstypen.

Validierungstyp
Werttyp
Beschreibung
Erforderlich
numberMin
number
Zulässige Mindestanzahl
Nein
numberMax
number
Zulässige maximale Anzahl
Nein
customErrorMsg
string
Meldung, die angezeigt wird, wenn numberMin oder numberMax nicht erfüllt ist.
Nein
Beispiel 1
code language-json 
{
  "id": "number",
  "fields": [
    {
      "component": "number",
      "name": "number",
      "label": "Number",
      "valueType": "number",
      "value": 0
    }
  ]
}
Beispiel 2
code language-json 
{
  "id": "another-number",
  "fields": [
   {
      "component": "number",
      "valueType": "number",
      "name": "field1",
      "label": "Number Field",
      "description": "This is a number field.",
      "required": true,
      "placeholder": null,
      "validation": {
        "numberMin": 0,
        "numberMax": 88,
        "customErrorMsg": "You also need 1.21 gigawatts."
      }
    }
  ]
}
Screenshot
Screenshot des Zahl-Komponententyps

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.

Beispiel
code language-json 
{
  "id": "radio-group",
  "fields": [
    {
      "component": "radio-group",
      "label": "Radio Group",
      "name": "radio",
      "valueType": "string",
      "options": [
        { "name": "Option 1", "value": "option1" },
        { "name": "Option 2", "value": "option2" }
      ]
    }
  ]
}
Screenshot
Screenshot eines Optionsfeldgruppen-Komponententyps

Referenz reference

Ein Referenz-Komponententyp ermöglicht einen Verweis auf ein anderes Datenobjekt aus dem aktuellen Objekt.

Beispiel
code language-json 
{
  "id": "reference",
  "fields": [
    {
      "component": "reference",
      "label": "Reference",
      "name": "reference",
      "valueType": "string"
    }
  ]
}
Screenshot
Screenshot eines Referenz-Komponententyps

Rich-Text rich-text

Rich-Text ermöglicht eine mehrzeilige Rich-Text-Eingabe. Er bietet zusätzliche Validierungstypen.

Validierungstyp
Werttyp
Beschreibung
Erforderlich
maxSize
number
Maximale Anzahl erlaubter Zeichen
Nein
customErrorMsg
string
Meldung, die angezeigt wird, wenn maxSize überschritten wird.
Nein
Beispiel 1
code language-json 
{
  "id": "richtext",
  "fields": [
    {
      "component": "richtext",
      "name": "rte",
      "label": "Rich Text",
      "valueType": "string"
    }
  ]
}
Beispiel 2
code language-json 
{
  "id": "another-richtext",
  "fields": [
    {
      "component": "richtext",
      "name": "rte",
      "label": "Rich Text",
      "valueType": "string",
      "validation": {
        "maxSize": 1000,
        "customErrorMsg": "That's about as funny as a screen door on a battleship."
      }
    }
  ]
}
Screenshot
Screenshot eines Textbereich-Komponententyps

Auswahl select

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

Beispiel
code language-json 
{
  "id": "select",
  "fields": [
    {
      "component": "select",
      "label": "Select",
      "name": "select",
      "valueType": "string",
      "options": [
        { "name": "Option 1", "value": "option1" },
        { "name": "Option 2", "value": "option2" }
      ]
    }
  ]
}
Screenshot
Screenshot eines Auswahl-Komponententyps

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.

Beispiel
code language-json 
{
  "id": "tab",
  "fields": [
    {
      "component": "tab",
      "label": "Tab 1",
      "name": "tab1"
    },
    {
      "component": "text-input",
      "label": "Text 1",
      "name": "text1",
      "valueType": "string"
    },
    {
      "component": "tab",
      "label": "Tab 2",
      "name": "tab2"
    },
    {
      "component": "text-input",
      "label": "Text 2",
      "name": "text2",
      "valueType": "string"
    }
  ]
}
Screenshot
Screenshot des Registerkarten-Komponententyps

Text text

Text ermöglicht die Eingabe einer einzelnen Textzeile.  Er enthält zusätzliche Validierungstypen.

Validierungstyp
Werttyp
Beschreibung
Erforderlich
minLength
number
Zulässige Mindestanzahl von Zeichen
Nein
maxLength
number
Zulässige maximale Zeichenanzahl
Nein
regExp
string
Regulärer Ausdruck, der dem Eingabetext entsprechen muss.
Nein
customErrorMsg
string
Meldung, die angezeigt wird, wenn gegen minLength, maxLength und/oder regExp verstoßen wird,
Nein
Beispiel 1
code language-json 
{
  "id": "simpletext",
  "fields": [
    {
      "component": "text",
      "name": "text",
      "label": "Simple Text",
      "valueType": "string"
    }
  ]
}
Beispiel 2
code language-json 
{
  "id": "another simpletext",
  "fields": [
    {
      "component": "text",
      "name": "text",
      "label": "Simple Text",
      "valueType": "string",
      "description": "This is a text input with validation.",
      "required": true,
      "validation": {
        "minLength": 1955,
        "maxLength": 1985,
        "regExp": "^foo:.*",
        "customErrorMsg": "Why don't you make like a tree and get outta here?"
      }
    }
  ]
}
Screenshot
Screenshot eines Textkomponententyps
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab