Für das Erstellen eines adaptiven Formulars mit einem JSON-Schema als Formularmodell sind grundlegende Kenntnisse zu JSON-Schemata erforderlich. Es wird empfohlen, den folgenden Inhalt vor diesem Artikel durchzulesen.
Adobe Experience Manager Forms unterstützt die Erstellung eines adaptiven Formulars mit einem vorhandenen JSON-Schema als Formularmodell. Dieses JSON-Schema stellt die Struktur dar, in der Daten vom Back-End-System in Ihrem Unternehmen produziert oder genutzt werden. Das JSON-Schema, das Sie verwenden, sollte mit den Spezifikationen der Version 4 konform sein.
Die wichtigsten Funktionen bei Verwendung eines JSON-Schemas sind wie folgt:
Ein JSON-Schema besteht aus einfachen und komplexen Elementtypen. Die Elemente weisen Attribute auf, die dem Element Regeln hinzufügen. Wenn diese Elemente und Attribute in ein adaptives Formular gezogen werden, werden sie automatisch der entsprechenden Komponente des adaptiven Formulars zugeordnet.
Diese Zuordnung von JSON-Elementen zu Komponenten adaptiver Formulare ist wie folgt:
"birthDate": {
"type": "string",
"format": "date",
"pattern": "date{DD MMMM, YYYY}",
"aem:affKeyword": [
"DOB",
"Date of Birth"
],
"description": "Date of birth in DD MMMM, YYYY",
"aem:afProperties": {
"displayPictureClause": "date{DD MMMM, YYYY}",
"displayPatternType": "date{DD MMMM, YYYY}",
"validationPatternType": "date{DD MMMM, YYYY}",
"validatePictureClause": "date{DD MMMM, YYYY}",
"validatePictureClauseMessage": "Date must be in DD MMMM, YYYY format."
}
JSON-Element, -Eigenschaften oder -Attribute | Komponente des adaptiven Formulars |
---|---|
Zeichenfolgen-Eigenschaften mit enum- und enumNames-Beschränkung. Syntax,
|
Dropdown-Komponente:
|
Zeichenfolgen-Eigenschaft mit Formatbeschränkung. Z. B. E-Mail oder Datum. Syntax,
|
|
|
Textfeld |
Nummern-Eigenschaft |
Numerisches Feld, Untertyp auf „nicht verankert“ eingestellt |
Ganzzahl-Eigenschaft |
Numerisches Feld, Untertyp auf „Ganzzahl“ eingestellt |
Boolesche Eigenschaft |
Schalter |
Objekt-Eigenschaft |
Bedienfeld |
Array-Eigenschaft | Wiederholbares Bedienfeld mit „min.“ und „max.“ gleich „minItems“ und „maxItems“. Nur homogene Arrays werden unterstützt. Daher muss die Elementbeschränkung ein Objekt sein, kein Array. |
Bei einem adaptiven Formular werden jedem generierten Feld im JSON-Schema verfügbare Informationen zugeordnet. Führen Sie insbesondere die folgenden Aufgaben aus:
title
dient als Bezeichnung für die Komponenten des adaptiven Formulars.description
ist als lange Beschreibung für eine Komponente eines adaptiven Formulars festgelegt.default
dient als Ausgangswert für ein Feld in einem adaptiven Formular.maxLength
-Eigenschaft wird dem maxlength
-Attribut einer Textfeldkomponente zugewiesen.minimum
, maximum
, exclusiveMinimum
und exclusiveMaximum
werden für Komponenten vom Typ „numerisches Feld“ verwendet.DatePicker component
-Komponente zu unterstützen, werden die zusätzlichen JSON-Schemaeigenschaften minDate
und maxDate
bereitgestellt.minItems
und maxItems
wird die Anzahl der Elemente/Felder eingeschränkt, die einer Bedienfeldkomponente hinzugefügt oder daraus entfernt werden können.readOnly
legt das readonly
-Attribut einer Komponente eines adaptiven Formulars fest.required
kennzeichnet ein adaptives Formularfeld als obligatorisch, während im Falle eines Bedienfelds (wo der Typ „object“ ist) die endgültigen übermittelten JSON-Daten Felder mit leerem Wert entsprechend diesem Objekt enthalten.pattern
ist als Validierungsmuster (regulärer Ausdruck) im adaptiven Formular festgelegt.Im Folgenden finden Sie ein Beispiel für ein JSON-Schema.
{
"$schema": "https://json-schema.org/draft-04/schema#",
"definitions": {
"employee": {
"type": "object",
"properties": {
"userName": {
"type": "string"
},
"dateOfBirth": {
"type": "string",
"format": "date"
},
"email": {
"type": "string",
"format": "email"
},
"language": {
"type": "string"
},
"personalDetails": {
"$ref": "#/definitions/personalDetails"
},
"projectDetails": {
"$ref": "#/definitions/projectDetails"
}
},
"required": [
"userName",
"dateOfBirth",
"language"
]
},
"personalDetails": {
"type": "object",
"properties": {
"GeneralDetails": {
"$ref": "#/definitions/GeneralDetails"
},
"Family": {
"$ref": "#/definitions/Family"
},
"Income": {
"$ref": "#/definitions/Income"
}
}
},
"projectDetails": {
"type": "array",
"items": {
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "number"
},
"projects": {
"$ref": "#/definitions/projects"
}
}
},
"minItems": 1,
"maxItems": 4
},
"projects": {
"type": "array",
"items": {
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "number"
},
"projectsAdditional": {
"$ref": "#/definitions/projectsAdditional"
}
}
},
"minItems": 1,
"maxItems": 4
},
"projectsAdditional": {
"type": "array",
"items": {
"properties": {
"Additional_name": {
"type": "string"
},
"Additional_areacode": {
"type": "number"
}
}
},
"minItems": 1,
"maxItems": 4
},
"GeneralDetails": {
"type": "object",
"properties": {
"age": {
"type": "number"
},
"married": {
"type": "boolean"
},
"phone": {
"type": "number",
"aem:afProperties": {
"sling:resourceType": "/libs/fd/af/components/guidetelephone",
"guideNodeClass": "guideTelephone"
}
},
"address": {
"type": "string"
}
}
},
"Family": {
"type": "object",
"properties": {
"spouse": {
"$ref": "#/definitions/spouse"
},
"kids": {
"$ref": "#/definitions/kids"
}
}
},
"Income": {
"type": "object",
"properties": {
"monthly": {
"type": "number"
},
"yearly": {
"type": "number"
}
}
},
"spouse": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
"Income": {
"$ref": "#/definitions/Income"
}
}
},
"kids": {
"type": "array",
"items": {
"properties": {
"name": {
"type": "string"
},
"age": {
"type": "number"
}
}
},
"minItems": 1,
"maxItems": 4
}
},
"type": "object",
"properties": {
"employee": {
"$ref": "#/definitions/employee"
}
}
}
Definitionsschlüssel kennzeichnen wiederverwendbare Schemas. Die wiederverwendbaren Schemadefinitionen werden verwendet, um Fragmente zu erstellen. Dies geschieht ähnlich wie beim Identifizieren komplexer Typen in XSD. Ein JSON-Beispielschema mit Definitionen wird unten angezeigt:
{
"$schema": "https://json-schema.org/draft-04/schema#",
"definitions": {
"address": {
"type": "object",
"properties": {
"street_address": { "type": "string" },
"city": { "type": "string" },
"state": { "type": "string" }
},
"required": ["street_address", "city", "state"]
}
},
"type": "object",
"properties": {
"billing_address": { "$ref": "#/definitions/address" },
"shipping_address": { "$ref": "#/definitions/address" }
}
}
Das obige Beispiel definiert einen Kundendatensatz, bei dem jeder Kunde über eine Versand- und eine Rechnungsadresse verfügt. Die Struktur der beiden Adressen ist gleich: Straße, Stadt und Land. Daher sollten Sie die Adressen nicht duplizieren. Das erleichtert auch das Hinzufügen und Löschen von Feldern, wodurch zukünftige Änderungen einfach sind.
Mit der Eigenschaft aem:afProperties können Sie ein JSON-Schemafeld so vorkonfigurieren, dass es einer benutzerdefinierten Komponente des adaptiven Formulars zugeordnet wird. Ein Beispiel wird unten angezeigt:
{
"properties": {
"sizeInMB": {
"type": "integer",
"minimum": 16,
"maximum": 512,
"aem:afProperties" : {
"sling:resourceType" : "/apps/fd/af/components/guideTextBox",
"guideNodeClass" : "guideTextBox"
}
}
},
"required": [ "sizeInMB" ],
"additionalProperties": false
}
JavaScript ist die Ausdruckssprache für adaptive Formulare. Alle Ausdrücke sind gültige JavaScript-Ausdrücke und verwenden Skriptmodell-APIs für adaptive Formulare. Sie können Formularobjekte vorkonfigurieren, um in einem Formularereignis einen Ausdruck auszuwerten.
Verwenden Sie die Eigenschaft aem:afproperties, um Ausdrücke für adaptive Formulare oder Skripte für Komponenten von adaptiven Formularen vorzukonfigurieren. Wenn beispielsweise das Initialisierungsereignis ausgelöst wird, setzt der folgende Code den Wert des Telefonfelds und druckt einen Wert in das Protokoll:
"telephone": {
"type": "string",
"pattern": "/\\d{10}/",
"aem:affKeyword": ["phone", "telephone","mobile phone", "work phone", "home phone", "telephone number", "telephone no", "phone number"],
"description": "Telephone Number",
"aem:afProperties" : {
"sling:resourceType" : "fd/af/components/guidetelephone",
"guideNodeClass" : "guideTelephone",
"events": {
"Initialize" : "this.value = \"1234567890\"; console.log(\"ef:gh\") "
}
}
}
Sie sollten Mitglied der forms-power-user-Gruppe sein, um Skripte oder Ausdrücke für Formularobjekte zu konfigurieren. In der folgenden Tabelle sind alle Skriptereignisse aufgeführt, die für eine adaptive Formularkomponente unterstützt werden.
Komponente \ Ereignis | initialize |
Calculate | Sichtbarkeit | Validieren | Aktiviert | Wertfestschreibung | Klicken Sie auf | Optionen |
---|---|---|---|---|---|---|---|---|
Textfeld | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Numerisches Feld | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Numerische Schritte | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Optionsfeld | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Telefonnummer | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Schalter | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Schaltfläche | ![]() |
![]() |
![]() |
![]() |
||||
Kontrollkästchen | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
Dropdown | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
Bildauswahl | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|
Feld zur Datumseingabe | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
Datumsauswahl | ![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
|||
Dateianhang | ![]() |
![]() |
![]() |
![]() |
![]() |
|||
Bild | ![]() |
![]() |
||||||
Zeichenelement | ![]() |
![]() |
||||||
Bereich | ![]() |
![]() |
Einige Beispiele für die Verwendung von Ereignissen in einer JSON sind das Ausblenden eines Felds beim Initialisierungsereignis und das Konfigurieren des Werts eines anderen Felds beim Ereignis zum Bestätigen von Werten. Detaillierte Informationen zum Erstellen von Ausdrücken für die Skriptereignisse finden Sie unter Ausdrücke in adaptiven Formularen.
Hier finden Sie den JSON-Beispiel-Code für die zuvor erwähnten Beispiele.
"name": {
"type": "string",
"aem:afProperties": {
"events" : {
"Initialize" : "this.visible = false;"
}
}
}
"Income": {
"type": "object",
"properties": {
"monthly": {
"type": "number",
"aem:afProperties": {
"events" : {
"Value Commit" : "IncomeYearly.value = this.value * 12;"
}
}
},
"yearly": {
"type": "number",
"aem:afProperties": {
"name": "IncomeYearly"
}
}
}
}
Sie können die folgenden Einschränkungen zu JSON-Schemaelementen hinzufügen, um die Werte zu beschränken, die für eine Komponente eines adaptiven Formulars gültig sind:
Schemaeigenschaft |
Datentyp |
Beschreibung |
Komponente |
|
Zeichenfolge |
Gibt die Obergrenze für numerische Werte und Daten an. Standardmäßig ist der Höchstwert enthalten. |
|
|
Zeichenfolge |
Gibt die Untergrenze für numerische Werte und Daten an. Standardmäßig ist der Mindestwert enthalten. |
|
|
Boolesch |
Wenn „true“, muss der numerische Wert oder das Datum, der/das in der Komponente des Formulars festgelegt ist, kleiner sein als der numerische Wert oder das Datum, der/das für die Eigenschaft „maximum“ angegeben ist. Wenn „false“, muss der numerische Wert oder das Datum, der/das in der Komponente des Formulars festgelegt ist, kleiner oder gleich dem numerischen Wert oder Datum sein, der/das für die Eigenschaft „maximum“ angegeben ist. |
|
|
Boolesch |
Wenn „true“, muss der numerische Wert oder das Datum, der/das in der Komponente des Formulars festgelegt ist, größer sein als der numerische Wert oder das Datum, der/das für die Eigenschaft „minimum“ angegeben ist. Wenn „false“, muss der numerische Wert oder das Datum, der/das in der Komponente des Formulars festgelegt ist, größer oder gleich dem numerischen Wert oder Datum sein, der/das für die Eigenschaft „minimum“ angegeben ist. |
|
|
Zeichenfolge |
Legt die zulässige Mindestanzahl von Zeichen in einer Komponente fest. Die minimale Länge muss größer oder gleich null sein. |
|
maxLength |
Zeichenfolge | Legt die zulässige Höchstzahl von Zeichen in einer Komponente fest. Die maximale Länge muss größer oder gleich null sein. |
|
|
Zeichenfolge |
Legt die Reihenfolge der Zeichen fest. Eine Komponente akzeptiert die Zeichen, wenn sie dem angegebenen Muster entsprechen. Die Eigenschaft „pattern“ ist dem Überprüfungsmuster der entsprechenden Komponente des adaptiven Formulars zugeordnet. |
|
maxItems |
Zeichenfolge | Gibt die maximale Anzahl von Elementen in einem Array an. Die maximale Anzahl von Elementen muss größer oder gleich null sein. | |
minItems |
Zeichenfolge | Gibt die Mindestanzahl von Elementen in einem Array an. Die Mindestanzahl von Elementen muss größer oder gleich null sein. |
Adaptive Formulare bieten keine Unterstützung für die folgenden JSON-Schemakonstrukte:
Warum kann ich nicht einzelne Elemente eines Teilformulars (Struktur aus einem komplexen Typ generiert) für wiederholbare Teilformulare ziehen (Wert von „minOccurs“ oder „maxOccurs“ ist größer als 1)?
In einem wiederholbaren Teilformular müssen Sie das gesamte Teilformular verwenden. Wenn Sie nur einzelne Felder nutzen möchten, verwenden Sie die gesamte Struktur und löschen Sie unerwünschte Felder.
Ich habe eine lange komplexe Struktur in der Inhaltssuche. Wie kann ich ein bestimmtes Element suchen?
Es gibt zwei Optionen:
Welche Erweiterung sollte die JSON-Schema-Datei aufweisen?
Für eine JSON-Schema-Datei muss immer die Erweiterung .schema.json verwendet werden. Beispiel: <filename>.schema.json.