Erstellen adaptiver Formulare mithilfe des JSON-Schemas

Voraussetzungen

Das Authoring eines adaptiven Formulars mit einem JSON-Schema als Formularmodell erfordert grundlegende Kenntnisse des JSON-Schemas. Es wird empfohlen, den folgenden Inhalt vor diesem Artikel durchzulesen.

Verwenden eines JSON-Schemas als Formularmodell

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:

  • Die Struktur der JSON wird als Baumstruktur in der Registerkarte für die Inhaltssuche im Authoring-Modus für ein adaptives Formular angezeigt. Sie können Elemente aus der JSON-Hierarchie in das adaptive Formular ziehen.
  • Sie können das Formular mit JSON, das mit dem zugehörigen Schema konform ist, vorausfüllen.
  • Bei der Übermittlung werden die vom Benutzer eingegebenen Daten in einem JSON-Format gesendet, das dem zugehörigen Schema entspricht.

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,

{

"type" : "string",

"enum" : ["M", "F"]

"enumNames" : ["Male", "Female"]

}

Dropdown-Komponente:

  • Die in enumNames aufgeführten Werte werden im Dropdown-Feld angezeigt.
  • Die in enum aufgeführten Werte werden für die Berechnung verwendet.

Zeichenfolgen-Eigenschaft mit Formatbeschränkung. Z. B. E-Mail oder Datum.

Syntax,

{

"type" : "string",

"format" : "email"

}
  • E-Mail-Komponente wird zugeordnet, wenn der Typ „Zeichenfolge“ lautet und das Format „E-Mail“.
  • Textfeld-Komponente mit Validierung wird zugeordnet, wenn der Typ „Zeichenfolge“ lautet und das Format „Hostname“.

{

"type" : "string",

}

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.

Allgemeine Schemaeigenschaften

Bei einem adaptiven Formular werden jedem generierten Feld im JSON-Schema verfügbare Informationen zugeordnet. Führen Sie insbesondere die folgenden Aufgaben aus:

  • Die Eigenschaft title dient als Beschriftung für die Komponenten des adaptiven Formulars.
  • Die Eigenschaft description wird als lange Beschreibung für eine Komponente eines adaptiven Formulars festgelegt.
  • Die Eigenschaft default dient als Anfangswert eines adaptiven Formularfelds.
  • Die maxLength-Eigenschaft wird dem maxlength-Attribut einer Textfeldkomponente zugewiesen.
  • Die Eigenschaften minimum, maximum, exclusiveMinimum und exclusiveMaximum werden für Komponenten vom Typ „numerisches Feld“ verwendet.
  • Um Bereiche für eine DatePicker component-Komponente zu unterstützen, werden die zusätzlichen JSON-Schemaeigenschaften minDate und maxDate bereitgestellt.
  • Mithilfe der Eigenschaften minItems und maxItems wird die Anzahl der Elemente/Felder eingeschränkt, die einer Bedienfeldkomponente hinzugefügt oder daraus entfernt werden können.
  • Die Eigenschaft readOnly legt das Attribut readonly einer Komponente eines adaptiven Formulars fest.
  • Die required-Eigenschaft markiert das Feld des adaptiven Formulars als obligatorisch, während in Bereich (wo der Typ "Objekt"ist) die endgültigen gesendeten JSON-Daten Felder mit leerem Wert aufweisen, die diesem Objekt entsprechen.
  • Die Eigenschaft pattern wird als Überprüfungsmuster (regulärer Ausdruck) im adaptiven Formular festgelegt.
  • Die Erweiterung der JSON-Schema-Datei „.schema.json“ muss beibehalten werden. Beispiel: <filename>.schema.json.

Beispiel für ein JSON-Schema

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"
  }
 }
}

Wiederverwendbare Schemadefinitionen

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.

Vorkonfigurieren von Feldern in JSON-Schemadefinitionen

Sie können die Eigenschaft aem:afProperties verwenden, um das JSON-Schema-Feld so zu konfigurieren, dass es einer benutzerdefinierten adaptiven Formularkomponente 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
}

Skripten oder Ausdrücke für Formularobjekte konfigurieren

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 einen Ausdruck für ein Formularereignis auszuwerten.

Verwenden Sie die Eigenschaft aem:afproperties , um adaptive Formularausdrücke oder Skripte für adaptive Formularkomponenten 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 group 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
E-Mail
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. Ausführliche Informationen zum Erstellen von Ausdrücken für die Skriptereignisse finden Sie unter Adaptive Formularausdrücke.

Hier finden Sie den JSON-Beispielcode für die zuvor erwähnten Beispiele.

Ausblenden eines Felds beim Initialisierungsereignis

"name": {
    "type": "string",
    "aem:afProperties": {
        "events" : {
            "Initialize" : "this.visible = false;"
        }
    }
}

Wert eines anderen Felds beim Ereignis zum Bestätigen von Werten konfigurieren

"Income": {
    "type": "object",
    "properties": {
        "monthly": {
            "type": "number",
            "aem:afProperties": {
                "events" : {
                    "Value Commit" : "IncomeYearly.value = this.value * 12;"
                }
            }
        },
        "yearly": {
            "type": "number",
            "aem:afProperties": {
                "name": "IncomeYearly"
            }
        }
    }
}

Einschränken der gültigen Werte für eine Komponente eines adaptiven Formulars

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

maximum

Zeichenfolge

Gibt die Obergrenze für numerische Werte und Daten an. Standardmäßig ist der Höchstwert enthalten.
  • Numerisches Feld
  • Numerische Schritte
  • Datumsauswahl

minimum

Zeichenfolge

Gibt die Untergrenze für numerische Werte und Daten an. Standardmäßig ist der Mindestwert enthalten.
  • Numerisches Feld
  • Numerische Schritte
  • Datumsauswahl

exclusiveMaximum

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.
  • Numerisches Feld
  • Numerische Schritte
  • Datumsauswahl

exclusiveMinimum

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.
  • Numerisches Feld
  • Numerische Schritte
  • Datumsauswahl

minLength

Zeichenfolge

Legt die zulässige Mindestanzahl von Zeichen in einer Komponente fest. Die minimale Länge muss größer oder gleich null sein.
  • Textfeld
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.
  • Textfeld

pattern

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.
  • Alle adaptiven Formulare, die einem XSD-Schema zugeordnet sind
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.

Nicht unterstützte Konstrukte

Adaptive Formulare unterstützen die folgenden JSON-Schema-Konstrukte nicht:

  • Null-Typ
  • Union-Typen wie „any“, „and“
  • OneOf, AnyOf, AllOf und NOT
  • Nur homogene Arrays werden unterstützt. Daher muss die Elementbeschränkung ein Array sein, kein Objekt.

Häufig gestellte Fragen

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:

  • Scrollen Sie durch die Baumstruktur
  • Verwenden Sie das Suchfeld, um ein Element zu finden

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.

Auf dieser Seite