AEM 6.4 hat das Ende der erweiterten Unterstützung erreicht und diese Dokumentation wird nicht mehr aktualisiert. Weitere Informationen finden Sie in unserer technische Unterstützung. Unterstützte Versionen suchen here.
Grundlagen zu den Seitenvorlagen und zum Authoring adaptiver Formulare
Grundlegendes zu AEM Client-seitige Bibliotheken
Eine Vorlage für adaptive Formulare ist AEM Seitenvorlage mit bestimmten Eigenschaften und Inhaltsstruktur spezialisiert, die zum Erstellen adaptiver Formulare verwendet werden. Die Vorlage verfügt über vorkonfigurierte Layouts, Stile und eine grundlegende anfängliche Inhaltsstruktur.
Änderungen an der Inhaltsstruktur einer Formularvorlage werden nicht in das aus der Vorlage erstellte Formular übernommen.
AEM QuickStart 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 für adaptive Formulare, der wiederum adaptive Formulare rendert.
In der folgenden Tabelle wird die Verknüpfung zwischen Vorlagen und Seitenkomponenten aufgezählt:
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 unter Verwendung des Vorlagen-Editors angeben. Sie möchten beispielsweise, dass alle Formularautoren nur über wenige Textfelder, Navigationsschaltflächen und eine Senden-Schaltfläche in einem Registrierungsformular verfügen. Sie können eine Vorlage erstellen, mit der Autoren ein Formular erstellen können, das mit anderen Registrierungsformularen konsistent ist. Mit dem AEM Vorlagen-Editor können Sie:
Weitere Informationen finden Sie unter Vorlagen-Editor.
Anstatt die verfügbaren Vorlagen zu verwenden, können Sie eine Vorlage erstellen und sie zum Erstellen adaptiver Formulare verwenden. Benutzerdefinierte 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 auch die Seitenkomponente des adaptiven Formulars erweitern, das in den mitgelieferten 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 Ordner /apps die Ordnerstruktur für Ihre Anwendung. Wenn der Anwendungsname beispielsweise "mycompany"lautet, erstellen Sie einen Ordner mit diesem Namen. Normalerweise enthält der Anwendungsordner Komponenten, Konfigurationen, Vorlagen, src und Installationsordner. 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 den Knoten simpleEnrollmentTemplate
.
Navigieren Sie zum Ordner /apps/mycompany/templates . Klicken Sie mit der rechten Maustaste darauf und wählen Sie Einfügen.
Benennen Sie bei Bedarf den kopierten Vorlagenknoten um. Nennen Sie ihn zum Beispiel „enrollment-template“.
Navigieren Sie zu „/apps/mycompany/templates/enrollment-template“.
Ändern Sie die Eigenschaften jcr:title
und jcr:description
für den Knoten jcr:content
, um die Vorlage von der kopierten Vorlage zu unterscheiden.
Der Knoten jcr:content
der geänderten Vorlage enthält die Komponenten guideContainer
und guideformtitle
. 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 denselben 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 es sich bei der Basis um eine Kernproduktkomponente handelt, sollten Sie diese Komponente nicht ändern.
Navigieren Sie zum Knoten /apps/mycompany/templates/enrollment-template/jcr:content und setzen Sie die Eigenschaft sling:resourceType
auf „/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 bei bereits vorhandener Inhaltsseite) Führen Sie die folgenden Schritte (a-d) aus, wenn die Komponente contentpage
bereits für Ihre Website vorhanden ist. 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.
Setzen Sie die Eigenschaft sling:resourceSuperType
für den Knoten enrollmentpage
auf „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 Komponente sling:resourceSuperType
, in diesem Fall contentpage
, enthält alle diese 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
enthält eine exklusive head.jsp
-Datei, durch die die head.jsp
-Datei der Komponente contentpage
überschrieben wird.
Binden Sie alle Skripte in der Datei head.jsp
für die Komponente contentpage
in die Datei head.jsp
für die Komponente enrollmentpage
ein.
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
-Datei der Komponente enrollmentpage
der neuen Vorlage enthält eine Client-Bibliothek namens guide.theme.simpleEnrollment
. Die Standardvorlage verwendet auch diese Client-Bibliothek. Ändern Sie den Stil in der neuen Vorlage mit einer der folgenden Methoden:
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 wirkt sich in erster Linie auf das Erscheinungsbild des adaptiven Formulars aus.