Erstellen einer benutzerdefinierten adaptiven Formularvorlage

Voraussetzungen

Adaptive Formularvorlage

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.

Nachdem Sie ein Formular erstellt haben, werden Änderungen an der Inhaltsstruktur der ursprünglichen Vorlage nicht im Formular übernommen.

Adaptive Standardformularvorlagen

AEM Erste Schritte bietet die folgenden adaptiven Formularvorlagen:

  • Basis: Ermöglicht die Erstellung eines adaptiven Formulars mit mehreren Registerkarten mit einem Layout mit Registerkarten auf der linken Seite, in dem Sie Registerkarten in beliebiger Reihenfolge aufrufen können.
  • Einfach mit Adobe Sign: Hiermit können Sie ein Formular mit mehreren Registerkarten und Assistenten erstellen. Es wird ein Layout, bei dem sich die Registerkarten links befinden, verwendet. Dabei können die Registerkarten in beliebiger Reihenfolge aufgerufen werden. Es werden Adobe Document Cloud eSign-Dienste zum Signieren und zur Prüfung verwendet.
  • Leere Vorlage: Hiermit können Sie ein Formular ohne Kopf- und Fußzeile sowie ohne Anfangsinhalt erstellen. Sie können Komponenten wie Textfelder, Schaltflächen und Bilder hinzufügen. Mit der leeren Vorlage können Sie ein Formular erstellen, das Sie in AEM Site-Seiten einbetten können.

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

Erstellen einer Vorlage für ein adaptives Formular mithilfe des Vorlageneditors

Sie können die Struktur und den anfänglichen Inhalt eines adaptiven Formulars mit dem Vorlageneditor 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:

  • Hinzufügen von Kopf- und Fußzeilenkomponenten eines Formulars in der Strukturebene
  • Den anfänglichen Inhalt für das Formular angeben.
  • Legen Sie ein Design fest.
  • Geben Sie Aktionen wie Senden, Zurücksetzen und Navigation fest.

Weitere Informationen finden Sie unter Vorlagen-Editor.

Erstellen einer Vorlage für ein adaptives Formular aus CRXDE

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, die von den Standardvorlagen verwendet wird.

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

  1. Navigieren Sie auf Ihrer Authoring-Instanz 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. Navigieren Sie zum Ordner „/libs/fd/af/templates“.

  4. Copy the simpleEnrollmentTemplate node.

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

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

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

  8. Modify the jcr:title and jcr:description properties for the jcr:content node to distinguish the template from the template you copied.

  9. The jcr:content node of the modified template contains the guideContainer and guideformtitle components. 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.

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

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

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

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 base eine Kernproduktkomponente ist, sollten Sie diese Komponente nicht ändern.

  1. Navigate to the node /apps/mycompany/templates/enrollment-template/jcr:content and modify the value of the property sling:resourceType to /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 wenn Sie bereits über eine Inhaltsseite verfügen) Führen Sie die folgenden Schritte (a-d) durch, wenn Sie eine vorhandene contentpageKomponente für Ihre Website haben. 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. For the enrollmentpage node, set value of the property sling:resourceSuperType to mycompany/components/page/contentpage. Die Komponente contentpage ist die Basisseitenkomponente Ihrer Site. Sie kann durch andere Seitenkomponenten erweitert werden. Remove script files under enrollmentpage, except head.jsp, content.jsp, and library.jsp. The sling:resourceSuperType component, which is contentpage in this case, includes all such scripts. Kopf- und Fußzeile sowie Navigationsleiste werden aus der Komponente contentpage übernommen.

    2. Öffnen Sie die Datei head.jsp.

      The JSP file contains the line <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.

      The page component enrollmentpage has an exclusive head.jsp file that overrides the head.jsp file of the contentpage component.

    3. Include all scripts in the head.jsp file for the contentpage component to the head.jsp file for the enrollmentpage component.

    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 einer Client-Bibliothek für adaptive Formulare

The head.jsp file of the enrollmentpage component for the new template includes a client library 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 diese Client-Bibliothek ein.
Hinweis

Mit Design wird eine Client-Bibliothek bezeichnet, die in einer zum Rendern eines adaptiven Formulars verwendeten Seitenkomponente enthalten ist. Die Client-Bibliothek regelt hauptsächlich das Erscheinungsbild eines adaptiven Formulars.

Auf dieser Seite