Grundlegendes zu AEM Seitenvorlage und Authoring adaptiver Formulare
Grundlagen zu den clientseitigen Bibliotheken in AEM
Eine adaptive Formularvorlage ist eine spezielle AEM-Seitenvorlage mit bestimmten Eigenschaften und einer vorgegebenen Inhaltsstruktur, aus denen ein adaptives Formular erstellt wird. Die Vorlage hat vorkonfigurierte Layouts, Stile und eine einfache, bereits vorgegebene Inhaltsstruktur.
Nach der Erstellung eines Formulars werden Änderungen an der Inhaltsstruktur der ursprünglichen Vorlage nicht im Formular übernommen.
AEM Erste Schritte bietet die folgenden adaptiven Formularvorlagen:
Außerdem ist für diese Vorlagen die Eigenschaft sling:resourceType
auf die entsprechende Seitenkomponente gesetzt. Die Seitenkomponente rendert die CQ-Seite mit dem Container des adaptiven Formulars, der seinerseits das adaptive Formular rendert.
Folgende Tabelle zeigt die Zuordnung zwischen Vorlagen und Seitenkomponenten:
Vorlage |
Seitenkomponente |
/libs/fd/af/templates/surveyTemplate |
/libs/fd/af/components/page/survey |
/libs/fd/af/templates/simpleEnrollmentTemplate |
/libs/fd/af/components/page/base |
/libs/fd/af/templates/tabbedEnrollmentTemplate |
/libs/fd/af/components/page/tabbedenrollment |
/libs/fd/afaddon/templates/advancedEnrollmentTemplate |
/libs/fd/afaddon/components/page/advancedenrollment |
Sie können die Struktur und den anfänglichen Inhalt eines adaptiven Formulars mithilfe des Vorlagen-Editors angeben. Beispiel: Sie möchten, dass alle Formularersteller in einem Registrierungsformular einige Textfelder, Navigationsschaltflächen und eine Schaltfläche zum Senden verwenden. Sie können eine Vorlage erstellen, die Formularersteller verwenden können, damit ihr Formular konsistent mit anderen Registrierungsformularen ist. Mit dem AEM-Vorlagen-Editor können Sie:
Weitere Informationen finden Sie unter Vorlagen-Editor.
Statt der mit dem Produkt bereitgestellten Vorlagen können Sie für Ihre adaptiven Formulare auch selbst erstellte Vorlagen verwenden. Diese benutzerdefinierten Vorlagen basieren auf verschiedenen Seitenkomponenten, die Container für adaptive Formulare und Seitenelemente wie Kopf- und Fußzeilen referenzieren.
Diese Komponenten können Sie aus der Basisseitenkomponente Ihrer Website erstellen. Alternativ können Sie die Seitenkomponente des adaptiven Formulars erweitern, das von vordefinierten Vorlagen verwendet wird.
Führen Sie die folgenden Schritte aus, um eine benutzerdefinierte Vorlage wie die Vorlage „simpleEnrollmentTemplate“ zu erstellen.
Navigieren Sie auf Ihrer Authoring-Instanz zu CRXDE Lite.
Erstellen Sie im Verzeichnis „/apps“ die Ordnerstruktur für Ihre Anwendung. Lautet der Anwendungsname beispielsweise „mycompany“, so erstellen Sie einen Ordner mit diesem Namen. In der Regel enthält das Anwendungsverzeichnis die Ordner „components“, „configuration“, „templates“, „src“ und „installation“. Für dieses Beispiel reicht es aus, wenn Sie die Ordner „components“, „configuration“ und „templates“ erstellen.
Navigieren Sie zum Ordner „/libs/fd/af/templates“.
Kopieren Sie die simpleEnrollmentTemplate
Knoten.
Navigieren Sie zum Ordner „/apps/mycompany/templates“. Klicken Sie mit der rechten Maustaste darauf und wählen Sie Einfügen aus.
Benennen Sie den kopierten Vorlagenknoten gegebenenfalls um. Nennen Sie ihn zum Beispiel „enrollment-template“.
Navigieren Sie zu „/apps/mycompany/templates/enrollment-template.
Ändern Sie die jcr:title
und jcr:description
-Eigenschaften für jcr:content
-Knoten, um die Vorlage von der kopierten Vorlage zu unterscheiden.
Die jcr:content
Der Knoten der modifizierten Vorlage enthält die guideContainer
und guideformtitle
Komponenten. Der Container guideContainer
enthält das adaptive Formular. Die Komponente guideformtitle
zeigt den Anwendungsnamen, die Beschreibung und ähnliche Details an.
Statt der Komponente guideformtitle
können Sie eine benutzerdefinierte Komponente oder die Komponente parsys
einfügen. Entfernen Sie zum Beispiel guideformtitle
und fügen Sie eine benutzerdefinierte Komponente oder den Komponentenknoten parsys
hinzu. Vergewissern Sie sich, dass die Eigenschaft sling:resourceType
der Komponente auf die Komponente verweist und das Gleiche auch in der Datei component.jsp
der Seite definiert ist.
Navigieren Sie zu „/apps/mycompany/templates/enrollment-template/jcr:content“.
Öffnen Sie die Registerkarte Eigenschaften und setzen Sie die Eigenschaft cq:designPath
auf „/etc/designs/mycompany“.
Erstellen Sie nun für den Typ cq:Page
den Knoten „/etc/designs/mycompany“.
Die benutzerdefinierte Vorlage hat den gleichen Stil wie die Standardvorlage, da die Vorlage auf die Seitenkomponente „/libs/fd/af/components/page/base“ verweist. Der Komponentenverweis befindet sich in der Eigenschaft sling:resourceType
unter dem Knoten „/apps/mycompany/templates/enrollment-template/jcr:content“. Da base eine Kernproduktkomponente ist, dürfen Sie diese Komponente nicht ändern.
Navigieren Sie zum Knoten /apps/mycompany/templates/enrollment-template/jcr:content und ändern Sie den Wert der Eigenschaft sling:resourceType
nach /apps/mycompany/components/page/enrollmentpage
Kopieren Sie den Knoten „/libs/fd/af/components/page/base“ in den Ordner „/apps/mycompany/components/page“.
Benennen Sie die kopierte Komponente in enrollmentpage
um.
(Nur wenn Sie bereits über eine Inhaltsseite verfügen) Führen Sie die folgenden Schritte aus (a-d), falls Sie bereits über eine contentpage
-Komponente für Ihre Website. Wenn die Komponente contentpage
noch nicht für Ihre Website vorhanden ist, können Sie die Eigenschaft resourceSuperType
so einstellen, dass sie auf die OOTB-Basisseite verweist.
Für enrollmentpage
node, legen Sie den Wert der Eigenschaft fest sling:resourceSuperType
zu "mycompany/components/page/contentpage". Die Komponente contentpage
ist die Basisseitenkomponente Ihrer Site. Sie kann durch andere Seitenkomponenten erweitert werden. Entfernen Sie Skriptdateien unter enrollmentpage
, außer head.jsp
, content.jsp
und library.jsp
. Die sling:resourceSuperType
Komponente, die contentpage
in diesem Fall enthält alle solchen Skripte. Kopf- und Fußzeile sowie Navigationsleiste werden aus der Komponente contentpage
übernommen.
Öffnen Sie die Datei head.jsp
.
Die JSP-Datei enthält die Zeile <cq.include script="library.jsp"/>
.
Die Datei library.jsp
enthält die Client-Bibliothek guide.theme.simpleEnrollment
, die wiederum den Stil für das adaptive Formular enthält.
Die Seitenkomponente enrollmentpage
verfügt über eine exklusive head.jsp
-Datei, die die head.jsp
der contentpage
-Komponente.
Schließen Sie alle Skripte in die head.jsp
-Datei für contentpage
-Komponente head.jsp
-Datei für enrollmentpage
-Komponente.
Dem Skript content.jsp
können Sie weiteren Seiteninhalt oder Verweise auf andere Komponenten hinzufügen, die beim Rendern einer Seite wiedergegeben werden. Beispiel: Wenn Sie die benutzerdefinierte Komponente applicationformheader
hinzufügen, fügen Sie der Komponente den folgenden Verweis in der JSP-Datei hinzu:
<cq:include path="applicationformheader" resourceType="mycompany/components/applicationformheader"/>
Die benutzerdefinierte Komponente müssen Sie ebenso einfügen, wenn Sie der Vorlagenknotenstruktur eine parsys
-Komponente hinzufügen.
Die head.jsp
der enrollmentpage
-Komponente für die neue Vorlage enthält eine Client-Bibliothek guide.theme.simpleEnrollment
. Diese Client-Bibliothek wird auch von der Standardvorlage verwendet. Den Stil in der neuen Vorlage können Sie mit einer der folgenden Methoden ändern:
guide.theme.simpleEnrollment
ersetzen.Mit Design wird eine Client-Bibliothek bezeichnet, die in einer zum Rendern eines adaptiven Formulars verwendeten Seitenkomponente enthalten ist. Die Client-Bibliothek bestimmt hauptsächlich das Erscheinungsbild eines adaptiven Formulars.