Die grundlegende Struktur eines Formulars ist:
All diese Teile werden mit einer Reihe standardmäßiger Formularkomponenten realisiert, die in einer Standard-AEM-Installation verfügbar sind.
Neben der Entwicklung neuer Komponenten für Ihre Formulare ist auch Folgendes möglich:
Skripte verwenden, um die Funktionalität bei Bedarf zu erweitern.
Dieses Dokument konzentriert sich auf die Entwicklung von Formularen mit dem Foundation-Komponenten in der klassischen Benutzeroberfläche. Adobe empfiehlt die Verwendung der neuen Kernkomponenten und Bedingungen ausblenden für die Formularentwicklung in der Touch-optimierten Benutzeroberfläche.
Die Formular-Startkomponente stellt ein Feld für die Ladepfad, ein optionaler Pfad, der auf einen Knoten im Repository verweist.
Der Ladepfad ist der Pfad zu Knoteneigenschaften, mit dem vordefinierte Werte in mehrere Felder im Formular geladen werden.
Dies ist ein optionales Feld, das den Pfad zu einem Knoten im Repository angibt. Wenn dieser Knoten Eigenschaften hat, die den Feldnamen entsprechen, werden die jeweiligen Felder im Formular vorab mit den Werten dieser Eigenschaften ausgefüllt. Wenn keine Übereinstimmung besteht, steht im Feld der Standardwert.
A Formularaktion kann auch die Ressource festlegen, von der die Anfangswerte geladen werden sollen. Dies erfolgt mit FormsHelper#setFormLoadResource
in init.jsp
.
Nur wenn dies nicht festgelegt ist, wird das Formular vom Autor aus dem in der Formular-Startkomponente festgelegten Pfad ausgefüllt.
Verschiedene Formularfelder verfügen auch über die Element-Ladepfad, wiederum ein optionaler Pfad, der auf einen Knoten im Repository verweist.
Die Element-Ladepfad ist der Pfad zu den Knoteneigenschaften, mit denen vordefinierte Werte in dieses spezifische Feld im Formular geladen werden, z. B. ein Dropdown-Liste, Kontrollkästchengruppe oder Optionsfeldgruppe.
Eine Dropdown-Liste kann mit Ihrem Wertebereich zur Auswahl konfiguriert werden.
Die Element-Ladepfad kann verwendet werden, um auf eine Liste aus einem Ordner im Repository zuzugreifen und sie in das Feld vorab zu laden:
Erstellen Sie einen Sling-Ordner ( sling:Folder
), zum Beispiel /etc/designs/<myDesign>/formlistvalues
Hinzufügen einer neuen Eigenschaft (z. B. myList
) vom Typ Zeichenfolge mit mehreren Werten ( String[]
), um die Liste der Dropdown-Elemente zu enthalten. Sie können auch mithilfe eines Skripts Inhalte importieren, z. B. mit einem JSP-Skript oder cURL in einem Shell-Skript.
Verwenden Sie den vollständigen Pfad im Feld Element-Ladepfad.
Zum Beispiel /etc/designs/geometrixx/formlistvalues/myList
Hinweis: Wenn die Werte im String[]
wie folgt formatiert sind:
AL=Alabama
AK=Alaska
generiert AEM die Liste wie folgt:
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
Diese Funktion kann beispielsweise in einer mehrsprachigen Umgebung gut genutzt werden.
Für ein Formular ist eine Aktion erforderlich. Eine Aktion definiert den Vorgang, der ausgeführt wird, wenn das Formular mit den Benutzerdaten gesendet wird.
Eine Reihe von Aktionen wird mit einer standardmäßigen AEM-Installation bereitgestellt. Diese sind zu sehen unter:
/libs/foundation/components/form/actions
und in der Action Type-Liste der Formular-Komponente:
Dieser Abschnitt erläutert, wie Sie Ihre eigene Formularaktion entwickeln und zu dieser Liste hinzufügen können.
Sie können Ihre eigene Aktion wie folgt unter /apps
hinzufügen:
Erstellen Sie einen Knoten des Typs sling:Folder
. Geben Sie einen Namen an, der der zu implementierenden Aktion entspricht.
Beispiel:
/apps/myProject/components/customFormAction
Definieren Sie in diesem Knoten die folgenden Eigenschaften und klicken Sie anschließend auf Alle speichern, um Ihre Änderungen zu speichern:
sling:resourceType
: als foundation/components/form/action
festlegen
componentGroup
: als .hidden
definieren
Optional:
jcr:title
: Geben Sie einen Titel Ihrer Wahl an, der in der Dropdown-Auswahlliste angezeigt wird. Wenn Sie dies nicht festlegen, wird der Name des Knotens angezeigt
jcr:description
: Geben Sie eine Beschreibung Ihrer Wahl ein
Erstellen Sie im Ordner einen Dialogfeldknoten:
Erstellen Sie im Ordner entweder:
Ein Postskript.
Der Name des Skripts lautet post.POST.<extension>
, beispielsweise post.POST.jsp
Das Post-Skript wird aufgerufen, wenn ein Formular zur Verarbeitung des Formulars gesendet wird. Es enthält den Code, der die aus dem Formular eingehenden Daten verarbeitet POST
.
Fügen Sie ein Weiterleitungsskript hinzu, das aufgerufen wird, wenn das Formular eingereicht wird.
Der Name des Skripts lautet forward.<extension
>, z. B. forward.jsp
Dieses Skript kann einen Pfad definieren. Die aktuelle Anfrage wird dann an den angegebenen Pfad weitergeleitet.
Der erforderliche Aufruf ist FormsHelper#setForwardPath
(2 Varianten). Ein typischer Anwendungsfall besteht darin, eine Validierung oder Logik auszuführen, um den Zielpfad zu finden, und anschließend zu diesem Pfad weiterzuleiten. Dabei wird die Speicherung in JCR dem standardmäßigen Sling-POST-Servlet überlassen.
Es kann auch ein weiteres Servlet verwendet werden, das die eigentliche Verarbeitung übernimmt. In diesem Fall stellen die Formularaktion und forward.jsp
nur die Verbindung dar. Ein Beispiel dafür ist die E-Mail-Aktion unter /libs/foundation/components/form/actions/mail
, die Details an <currentpath>.mail.html
weiterleitet, wo sich ein E-Mail-Servlet befindet.
Das bedeutet:
post.POST.jsp
eignet sich für kleine Vorgänge, die vollständig von der Aktion selbst ausgeführt werden.forward.jsp
ist hingegen hilfreich, wenn nur Delegation erforderlich ist.Die Skripte werden in folgender Reihenfolge ausgeführt:
Nach dem Rendering des Formulars ( GET
):
init.jsp
clientvalidation.jsp
clientvalidation.jsp
addfields.jsp
während des Renderings von <form></form>
Nach der Verarbeitung eines Formular-POST
:
init.jsp
Für alle Feldeinschränkungen: servervalidation.jsp
validationRT des Formulars: servervalidation.jsp
forward.jsp
Wenn ein Weiterleitungspfad festgelegt wurde (FormsHelper.setForwardPath
), leiten Sie die Anfrage weiter und rufen Sie anschließend cleanup.jsp
auf
Wenn kein Weiterleitungspfad festgelegt wurde, rufen Sie post.POST.jsp
auf (der Vorgang ist hier beendet, cleanup.jsp
wird nicht aufgerufen)
Auch hier können Sie optional Folgendes zum Ordner hinzufügen:
Ein Skript für das Hinzufügen von Feldern.
Der Name des Skripts lautet addfields.<extension>
, beispielsweise addfields.jsp
Ein addfields
wird unmittelbar nach dem Schreiben der HTML für den Formularstart aufgerufen. Dadurch kann die Aktion benutzerdefinierte Eingabefelder oder sonstigen HTML-Code in das Formular einfügen.
Ein Initialisierungsskript.
Der Name des Skripts lautet init.<extension>
, beispielsweise init.jsp
Dieses Skript wird aufgerufen, wenn das Formular wiedergegeben wird. Es kann zur Initialisierung von handlungsspezifischen Elementen verwendet werden.
Ein Bereinigungsskript.
Der Name des Skripts lautet cleanup.<extension>
, beispielsweise cleanup.jsp
Dieses Skript kann für die Bereinigung verwendet werden.
Verwenden Sie die Forms -Komponente in einem parsys. Die Aktionstyp -Dropdown-Liste enthält jetzt Ihre neue Aktion.
So zeigen Sie Standardaktionen an, die Teil des Produkts sind:
/libs/foundation/components/form/actions
Beschränkungen können auf zwei Ebenen auferlegt werden:
Sie können wie folgt Ihre eigenen Einschränkungen für ein einzelnes Feld hinzufügen (unter /apps
):
Erstellen Sie einen Knoten des Typs sling:Folder
. Geben Sie einen Namen an, der der zu implementierenden Einschränkung entspricht.
Beispiel:
/apps/myProject/components/customFormConstraint
Definieren Sie in diesem Knoten die folgenden Eigenschaften und klicken Sie anschließend auf Alle speichern, um Ihre Änderungen zu speichern:
sling:resourceType
: auf foundation/components/form/constraint
festlegen
constraintMessage
- eine benutzerdefinierte Meldung, die angezeigt wird, wenn das Feld gemäß der Einschränkung bei der Übermittlung des Formulars ungültig ist
Optional:
jcr:title
: Geben Sie einen Titel Ihrer Wahl an, der in der Auswahlliste angezeigt wird. Wenn Sie dies nicht festlegen, wird der Name des Knotens angezeigthint
: zusätzliche Informationen für den Benutzer zur Verwendung dieses FeldsIn diesem Ordner benötigen Sie möglicherweise auch die folgenden Skripte:
Ein Client-Validierungsskript: Der Name des Skripts lautet clientvalidation.<extension>
, beispielsweise clientvalidation.jsp
Dies wird aufgerufen, wenn das Formularfeld wiedergegeben wird. Es kann verwendet werden, um Client-JavaScript zur Validierung des Felds im Client zu erstellen.
Ein Servervalidierungsskript: Der Name des Skripts lautet servervalidation.<extension>
, beispielsweise servervalidation.jsp
Dies wird beim Senden des Formulars aufgerufen. Sie kann verwendet werden, um das Feld auf dem Server zu validieren, nachdem es gesendet wurde.
Beispielbegrenzungen finden Sie unter:
/libs/foundation/components/form/constraints
Legen Sie die globale Validierung eines Formulars fest, indem Sie einen Ressourcentyp in der Start-Formularkomponente angeben ( validationRT
). Beispiel:
apps/myProject/components/form/validation
Anschließend können Sie Folgendes definieren:
clientvalidation.jsp
, das nach den Client-Validierungsskripten des Felds eingefügt wirdservervalidation.jsp
, das auch nach den einzelnen Feld-Servervalidierungen bei einem POST
aufgerufen wird.Sie können Ihr Formular so konfigurieren, dass Formularkomponenten entsprechend dem Wert anderer Felder im Formular ein- oder ausgeblendet werden.
Das Ändern der Sichtbarkeit eines Formularfelds ist nützlich, wenn das Feld nur unter besonderen Bedingungen erforderlich ist. Auf einem Feedback-Formular werden Kunden beispielsweise gefragt, ob ihnen Produktinformationen per E-Mail zugesendet werden sollen. Bei Auswahl von "Ja"erscheint ein Textfeld, in das der Kunde seine E-Mail-Adresse eingeben kann.
Legen Sie mit dem Dialogfeld Einblenden-/Ausblenden-Regeln bearbeiten die Bedingungen fest, unter denen eine Formularkomponente ein- oder ausgeblendet wird.
Verwenden Sie die Felder oben im Dialogfeld, um die folgenden Informationen anzugeben:
Eine oder mehrere Bedingungen werden unter diesen Feldern eingeblendet. Eine Bedingung vergleicht den Wert einer anderen Formularkomponente (im selben Formular) mit einem Wert. Wenn der tatsächliche Wert im Feld die Bedingung erfüllt, wird die Bedingung als wahr ausgewertet. Bedingungen enthalten die folgenden Informationen:
Beispiel: eine Optionsfeldgruppen-Komponente mit dem Titel Receive email notifications?
* * enthält die Optionsfelder Yes
und No
. Eine Textfeld-Komponente mit dem Titel Email Address
verwendet die folgende Bedingung, damit sie sichtbar wird, wenn Yes
ausgewählt wird:
In JavaScript verwenden Bedingungen den Wert der Eigenschaft "Elementname", um auf Felder zu verweisen. Im vorigen Beispiel ist contact
der Wert der Eigenschaft „Elementname“ der Optionsfeld-Gruppen-Komponente. Der folgende Code entspricht dem entsprechenden JavaScript-Code für dieses Beispiel:
((contact == "Yes"))
Ein- oder Ausblenden einer Formular-Komponente:
Bearbeiten Sie die entsprechende Formular-Komponente.
Auswählen Einblenden/Ausblenden , um die Einblenden-/Ausblenden-Regeln bearbeiten dialog:
Wählen Sie in der ersten Dropdownliste entweder Anzeigen oder Ausblenden um anzugeben, ob Ihre Bedingungen bestimmen, ob die Komponente ein- oder ausgeblendet werden soll.
Wählen Sie in der Dropdownliste am Ende der obersten Zeile Folgendes aus:
Wählen Sie in der Bedingungszeile (standardmäßig eine) eine Komponente und einen Operator aus und geben Sie dann einen Wert an.
Fügen Sie bei Bedarf weitere Bedingungen hinzu, indem Sie auf Bedingung hinzufügen.
Beispiel:
Klicken Sie auf OK, um die Definition zu speichern.
Nachdem Sie Ihre Definition gespeichert haben, wird ein Regeln bearbeiten neben dem Einblenden/Ausblenden in den Eigenschaften der Formularkomponente. Klicken Sie auf diesen Link, um Einblenden-/Ausblenden-Regeln bearbeiten Dialogfeld, um Änderungen vorzunehmen.
Klicks OK , um alle Änderungen zu speichern.
Sie können die Auswirkungen von Ein-/Ausblendedefinitionen überprüfen und testen:
im Vorschaumodus in der Autorenumgebung (Sie müssen die Seite neu laden, wenn Sie zum ersten Mal zur Vorschau wechseln)
in der Veröffentlichungsumgebung
Einblenden/Ausblenden-Bedingungen verweisen mit dem Wert der Eigenschaft „Elementname“ auf andere auf dem Formular befindliche Komponenten. Die Einblenden/Ausblenden-Konfiguration ist ungültig, wenn eine der Bedingungen auf eine Komponente verweist, die gelöscht oder bei der die Eigenschaft „Elementname“ geändert wurde. In diesen Fällen müssen Sie die Bedingungen manuell aktualisieren. Anderenfalls tritt beim Laden des Formulars ein Fehler auf.
Wenn die Einblenden/Ausblenden-Konfiguration ungültig ist, wird die Konfiguration nur als JavaScript-Code bereitgestellt. Bearbeiten Sie den Code, um die Probleme zu beheben. Der Code verwendet die Eigenschaft „Elementname“, mit der ursprünglich auf die Komponenten verwiesen wurde.
Weitere Informationen über die API-Elemente, die Sie zur Erstellung von Skripten verwenden können, finden Sie in den javadocs zu Formularen.
Sie können dies z. B. verwenden, um einen Dienst aufzurufen, bevor das Formular übermittelt wird, und den Dienst abbrechen, wenn es fehlschlägt:
Validierungs-Ressourcentyp definieren
Aufnehmen eines Skripts zur Überprüfung:
com.day.cq.wcm.foundation.forms.ValidationInfo
mit den Fehlermeldungen. Wenn Fehler auftreten, werden die Formulardaten nicht ausgegeben.