Voraussetzungen

Adaptive Formularvorlage

Eine Vorlage ist eine hierarchische Knotenstruktur ohne tatsächlichen Inhalt; diese Hierarchie wird kopiert und dient dann als Grundlage für die Erstellung eines adaptiven Formulars. Die Vorlage hat vorkonfigurierte Layouts, Stile, eine Komponentenhierarchie und eine einfache, bereits vorgegebene Inhaltsstruktur.  

Änderungen an der Inhaltsstruktur einer Formularvorlage werden in der Struktur von aus der Vorlage erstellten adaptiven Formularen oder Dokumenten nicht übernommen.

Adaptive Standardformularvorlagen

AEM Erste Schritte bietet die folgenden adaptiven Formularvorlagen:

Adaptive Formularvorlagen

  • Vorlage für eine Umfrage: Ermöglicht die Erstellung eines einseitigen adaptiven Formulars mit einem responsiven Layout bestehend aus mehreren vorkonfigurierten Spalten. Das Layout passt sich automatisch an die jeweilige Bildschirmgröße an.
  • Einfache Registrierungsvorlage: Ermöglicht die Erstellung eines aus mehreren Schritten bestehenden adaptiven Formulars mit einem Assistentenlayout. In diesem Layout können Sie für jeden Schritt einen Terminierungsausdruck festlegen, der vor dem Übergang zum nächsten Schritt überprüft wird.
  • Registrierungsvorlage mit Registerkarten: Ermöglicht die Erstellung eines aus mehreren Registerkarten bestehenden adaptiven Formulars mit einem Layout, in dem sich links Registerkarten befinden, über die die Register in beliebiger Reihenfolge aufgerufen werden können.

Vorlagen für adaptive Dokumente

  • Einfache Vorlage: Ermöglicht die Erstellung eines aus mehreren Schritten bestehenden adaptiven Dokuments mit einem Akkordeonlayout.

Eine erweiterte Registrierungsvorlage mit dem Add-on „AEM forms“ stellt AEM unter „/libs/fd/afaddon/templates/advancedEnrollmentTemplate“ bereit.

(Nur adaptive Formulare) Die Vorlage weist die zusätzliche Eigenschaft guideComponentType mit dem Wert „fd/af/templates“ auf, der explizit auf die Verwendung für adaptive Formulare hinweist.

(Nur adaptive Dokumente) Die Vorlage weist die zusätzliche Eigenschaft guideComponentType mit dem Wert „fd/ad/templates“ auf, der explizit auf die Verwendung für adaptive Dokumente hinweist.

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

Hinweis:

Jede benutzerdefinierte Vorlage von adaptiven Formularen muss den HTML5-Spezifikationen entsprechen und den -<!DOCTPE Html>Tag auf der Seite einfügen

Erstellen einer adaptiven Formularvorlage

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 auch die Seitenkomponente des adaptiven Formulars erweitern, das von den mit dem Produkt bereitgestellten Vorlagen verwendet wird.

Führen Sie die folgenden Schritte aus, um eine benutzerdefinierte Vorlage wie die Vorlage „simpleEnrollmentTemplate“ zu erstellen.

  1. Navigieren Sie auf Ihrer Erstellungsinstanz zu CRXDE Lite.

  2. 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.

  3. Klicken Sie auf Alle speichern, um die Ordnerstruktur zu speichern, die Sie erstellt haben.

  4. Navigieren Sie zum Ordner „/libs/fd/af/templates“.

  5. Kopieren Sie den Knoten simpleEnrollmentTemplate.

  6. Navigieren Sie zum Ordner „/apps/mycompany/templates“. Klicken Sie mit der rechten Maustaste darauf und wählen Sie Einfügen aus.

  7. Benennen Sie den kopierten Vorlagenknoten gegebenenfalls um. Nennen Sie ihn zum Beispiel „enrollment-template“.

  8. Navigieren Sie zu „/apps/mycompany/templates/enrollment-template.

  9. Ändern Sie die Eigenschaften jcr:title und jcr:description des Knotens jcr:content, um die Vorlage von der kopierten Vorlage zu unterscheiden.

  10. Der Knoten jcr:content der modifizierten 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.

  11. Navigieren Sie zu „/apps/mycompany/templates/enrollment-template/jcr:content“.

  12. Öffnen Sie die Registerkarte Eigenschaften und setzen Sie die Eigenschaft cq:designPath auf „/etc/designs/mycompany“.

  13. Erstellen Sie nun für den Typ cq:Page den Knoten „/etc/designs/mycompany“.

  14. Klicken Sie auf Alle speichern, um die Änderungen zu speichern.

Erstellen einer adaptiven Formularseitenkomponente

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 die Seitenkomponente „base“ eine Komponente des Kernprodukts ist, dürfen Sie diese nicht ändern.

  1. Navigieren Sie zum Knoten /apps/mycompany/templates/enrollment-template/jcr:content und setzen Sie die Eigenschaft sling:resourceType auf „/apps/mycompany/components/page/enrollmentpage“.

  2. Kopieren Sie den Knoten „/libs/fd/af/components/page/base“ in den Ordner „/apps/mycompany/components/page“.

  3. Benennen Sie die kopierte Komponente in enrollmentpage um.

  4. (Nur bei bereits vorhandener Inhaltsseite) Führen Sie die folgenden Schritte (a – d) durch, 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.

    1. 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 die Skriptdateien unter enrollmentpage, mit Ausnahme von head.jsp, content.jsp und library.jsp. Die Komponente sling:resourceSuperType, in diesem Fall contentpage, enthält alle diese Skripts. Kopf- und Fußzeile sowie Navigationsleiste werden aus der Komponente contentpage übernommen.

    2. Ö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.

    3. Fügen Sie daher der head.jsp-Datei der Komponente enrollmentpage alle Skripts der head.jsp-Datei der Komponente contentpage hinzu.

    4. 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.

Erstellen von Client-Bibliotheken für adaptive Formulare und Dokumente

Die head.jsp-Datei der Komponente enrollmentpage der neuen Vorlage enthält eine Client-Bibliothek namens 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:

  • Definieren Sie ein benutzerdefiniertes Design, durch das Sie das Standarddesignguide.theme.simpleEnrollment ersetzen.
  • Definieren Sie unter „/etc/designs/mycompany“ eine neue Client-Bibliothek. Schließen Sie die Client-Bibliothek nach dem Eintrag des Standarddesigns in der JSP-Seite ein. Schließen Sie alle überschriebenen Stile und zusätzlichen JavaScript-Dateien in dieser Client-Bibliothek ein.

Hinweis:

Mit Design wird eine CQ-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.

(Nur adaptive Dokumente) Die Client-Bibliothek für adaptive Dokumente muss die Datei /etc/clientlibs/fd/adaddon/adtheme/common/less/adField.less in der entsprechenden style.less-Datei zusammen mit allen Elementen importieren, die für adaptive Formulare importiert wurden.

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie