DokumentationAEM 6.5Benutzerhandbuch

Erstellen einer benutzerdefinierten adaptiven Formularvorlage creating-a-custom-adaptive-form-template

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Themen:

Erstellt für:

  • Benutzende
  • Entwickler
NOTE
AEM Forms hat dynamische Vorlagen eingeführt. Mit dem AEM Sites-Vorlageneditor können Sie dynamische Vorlagen erstellen oder bearbeiten. Bei den im folgenden Artikel genannten Vorlagen handelt es sich um statische Vorlagen. Diese sind bei einer Standardinstallation nicht verfügbar. Kompatibilitätspaket installieren, um diese Vorlagen in Ihrer Umgebung zu erhalten.

Voraussetzungen prerequisites

Adaptive Formularvorlage adaptive-form-template

Eine adaptive Formularvorlage ist eine spezielle AEM-Seitenvorlage mit bestimmten Eigenschaften und einer vorgegebenen Inhaltsstruktur, aus der ein adaptives Formular erstellt wird. Die Vorlage hat vorkonfigurierte Layouts, Stile und eine einfache, bereits vorgegebene Inhaltsstruktur.

Änderungen an der Inhaltsstruktur einer Formularvorlage werden nicht in das aus der Vorlage erstellte Formular übernommen.

Adaptive Standardformularvorlagen default-adaptive-form-templates

Ein AEM-Schnellstart bietet die folgenden adaptiven Formularvorlagen:

  • Vorlage für eine Umfrage: Ermöglicht die Erstellung eines einseitigen adaptiven Formulars mithilfe eines responsiven Layouts mit mehreren vorkonfigurierten Spalten. Das Layout passt sich automatisch an die jeweilige Bildschirmgröße an.
  • Einfache Registrierungsvorlage: Ermöglicht die Erstellung eines mehrere Schritte erfordernden adaptiven Formulars mithilfe eines Assistenten-Layouts. 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 mithilfe eines Layouts, in dem sich links Registerkarten befinden, über die die Register in beliebiger Reihenfolge aufgerufen werden können.
  • Erweiterte Registrierungsvorlage: Ermöglicht die Erstellung eines Formulars mit mehreren Registerkarten und Assistenten. Es wird ein Layout verwendet, bei dem sich die Registerkarten links befinden. 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: Ermöglicht die Erstellung eines Formulars ohne Kopf- und Fußzeile sowie ohne Anfangsinhalt. 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.

Die 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 adaptiven Formularvorlage mithilfe des Vorlageneditors creating-an-adaptive-form-template-using-template-editor

Sie können die Struktur und den anfänglichen Inhalt eines adaptiven Formulars unter Verwendung des Vorlagen-Editors angeben. Beispiel: Sie möchten, dass alle Formularautorinnen und Formularautoren in einem Registrierungsformular Textfelder, Navigationsschaltflächen und eine Schaltfläche zum Senden verwenden. Sie können eine Vorlage erstellen, die Autorinnen und Autoren verwenden können, damit ihr Formular konsistent mit anderen Registrierungsformularen ist. Mit dem AEM-Vorlageneditor haben Sie folgende Möglichkeiten:

  • Kopf- und Fußzeilenkomponenten eines Formulars in der Strukturebene hinzufügen.
  • 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 adaptiven Formularvorlage aus CRXDE creating-an-adaptive-form-template-from-crxde

Anstatt die verfügbaren Vorlagen zu verwenden, können Sie auch eine Vorlage erstellen und diese für die Erstellung 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.

  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. Kopieren Sie den Knoten simpleEnrollmentTemplate.

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

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

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

  8. Ändern Sie die Eigenschaften jcr:title und jcr:description für den Knoten jcr:content, um die Vorlage von der kopierten Vorlage zu unterscheiden.

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

  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 create-an-adaptive-form-page-component

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 es sich bei der Basis um eine Kernproduktkomponente handelt, sollten Sie diese Komponente 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) 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 vorkonfigurierte 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 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.

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

    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 creating-an-adaptive-form-client-library

Die head.jsp-Datei der Komponente enrollmentpage der neuen Vorlage enthält eine Client-Bibliothek namens guide.theme.simpleEnrollment. Die Standardvorlage verwendet ebenfalls diese Client-Bibliothek. Ändern Sie den Stil in der neuen Vorlage mit einer der folgenden Methoden:

  • 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 Standard-Designs in der JSP-Seite ein. Binden Sie alle überschriebenen Stile und zusätzlichen JavaScript-Dateien in dieser Client-Bibliothek ein.
NOTE
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.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2