Erstellen von adaptiven Formularen auf Grundlage der Kernkomponenten

Letzte Aktualisierung: 15. Juli 2024
  • Themen:

Erstellt für:

  • Admin
  • Entwickler

Adobe empfiehlt die Verwendung von Kernkomponenten, um adaptive Formulare zu einer AEM Sites-Seite hinzuzufügenoder eigenständige adaptive Formulare zu erstellen.

VersionArtikel-Link
AEM as a Cloud ServiceHier klicken
AEM 6.5Dieser Artikel

Mit adaptiven Formularen können Sie Formulare erstellen, die ansprechend, reaktionsfähig, dynamisch und anpassungsfähig sind. AEM Forms bietet eine benutzerfreundliche Benutzeroberfläche für Unternehmen zur schnellen Erstellung adaptiver Formulare.  Die Benutzeroberfläche bietet eine schnelle Registerkartennavigation, mit der Sie vorkonfigurierte Vorlagen, Stile, Felder und Übermittlungsoptionen einfach auswählen können, um ein adaptives Formular zu erstellen.

Bevor Sie beginnen, erfahren Sie mehr über die Arten der Formular-Komponenten, die Ihnen zur Verfügung stehen:

  • Kernkomponenten adaptiver Formulare: Dies sind standardisierte Datenerfassungskomponenten. Diese Komponenten bieten Anpassungsfunktionen, kürzere Entwicklungszeiten und niedrigere Wartungskosten für Ihre Erlebnisse bei der digitalen Registrierung. Entwickelnde können diese Komponenten einfach anpassen und gestalten. Adobe empfiehlt die Nutzung dieser modernen und erweiterbaren Komponenten zur Entwicklung von adaptiven Formularen.

  • Foundation-Komponenten adaptiver Formulare: Hierbei handelt es sich um klassische (alte) Datenerfassungskomponenten. Sie können diese weiterhin verwenden, um Ihre vorhandenen Foundation-Komponenten auf Grundlage des adaptiven Formulars zu bearbeiten. Für die Erstellung neuer Formulare empfiehlt Adobe die Verwendung von Kernkomponenten für adaptive Formulare, um ein adaptives Formular zu erstellen.

Voraussetzungen

Zum Erstellen eines adaptiven Formulars benötigen Sie Folgendes:

  • Aktivieren der Kernkomponenten für adaptive Formulare für Ihre Umgebung: Der AEM-Projektarchetyp Version 41 oder höher ist erforderlich, um Kernkomponenten für Ihre Umgebung zu aktivieren. Sobald Sie die Kernkomponenten für Ihre Umgebung aktivieren, werden die Vorlage und das Canvas-Design für adaptive Formulare (Kernkomponente) zu Ihrer Umgebung hinzugefügt.

  • Eine adaptive Formularvorlage: Eine Vorlage liefert eine Grundstruktur und definiert das Erscheinungsbild (Layouts und Stile) eines adaptiven Formulars. Es enthält vorformatierte Komponenten einschließlich bestimmter Eigenschaften und einer Struktur für Inhalte. Es bietet außerdem die Optionen zum Definieren eines Designs und einer Übermittlungsaktion. Das Design definiert den Look-and-Feel und die Übermittlungsaktion definiert die Aktion, die bei der Übermittlung eines adaptiven Formulars ausgeführt werden soll. Sie können auch Beispielvorlagen in Ihre Umgebung implementieren. Diese helfen Ihnen dabei, Formulare schnell zu erstellen.

    NOTE
    Wenn Sie über keine Vorlage für adaptive Formulare (Kernkomponente) in Ihrer Umgebung verfügen, aktivieren Sie die Kernkomponenten für adaptive Formulare für Ihre Umgebung. Sobald Sie die Kernkomponenten für Ihre Umgebung aktivieren, wird die Vorlage für adaptive Formulare (Kernkomponente) zu Ihrer Umgebung hinzugefügt.

  • Ein adaptives Formular: Ein Design enthält Stildetails für die Komponenten und Bedienfelder. Die Stile umfassen Eigenschaften wie Hintergrundfarben, Statusfarben, Transparenz, Ausrichtung und Größe. Wenn Sie ein Design anwenden, spiegeln die entsprechenden Komponenten den angegebenen Stil wider. Das Canvas-Design wird standardmäßig hinzugefügt, wenn Sie Kernkomponenten für Ihre Umgebung aktivieren. Sie können die Standard-Designs herunterladen und anpassen. Sie können Beispiel-Designs für vorkonfigurierte Designs in Ihrer Umgebung implementieren. Diese helfen Ihnen dabei, mit der Formatierung Ihrer Formulare zu beginnen und eine Basisstruktur bereitzustellen, mit der Sie ein Design gemäß Ihren Geschäftsanforderungen erstellen oder anpassen können.

  • Berechtigungen: Fügen Sie Ihre Benutzerinnen und Benutzer zur Gruppe forms-users hinzu. Die Mitglieder der forms-users-Gruppe sind berechtigt, ein adaptives Formular zu erstellen. Eine detaillierte Liste der formularspezifischen Benutzergruppen finden Sie unter Gruppen und Berechtigungen.

Erstellen eines adaptiven Formulars

  1. Melden Sie sich bei Ihrer lokalen AEM-Autoreninstanz an.

  2. Geben Sie Ihre Anmeldedaten auf der Experience Manager-Anmeldeseite ein. Wenn Sie sich angemeldet haben, wählen Sie in der oberen linken Ecke Adobe Experience Manager > Formulare > Formulare und Dokumente aus.

  3. Wählen Sie Erstellen > Adaptives Formular erstellen aus.

  4. Wählen Sie eine Vorlage mit Kernkomponenten für adaptive Formulare aus und klicken Sie auf Weiter.

  5. Es wird Eigenschaften hinzufügen angezeigt. Geben Sie die Werte für die folgenden Eigenschaftenfelder an. Die Felder „Titel“ und „Name“ sind obligatorisch.

    • Titel: Gibt den Anzeigenamen des Formulars an. Der Titel erleichtert Ihnen die Identifizierung des Formulars in der Benutzeroberfläche von Experience Manager Forms.
    • Name:  Gibt den Namen des Formulars an. Im Repository wird ein Knoten mit dem angegebenen Namen erstellt. Wenn Sie mit der Eingabe des Titels beginnen, wird automatisch ein Wert für das Feld „Name“ vorgeschlagen. Sie können den vorgeschlagenen Wert gegebenenfalls ändern. Im Feld „Name“ dürfen nur alphanumerische Zeichen, Bindestriche und Unterstriche eingegeben werden.
    • Beschreibung: Gibt detaillierte Informationen zum Formular an.
    • Design-Client-Bibliothek: Gibt das Design für ein adaptives Formular an. Standardmäßig wird das Design adaptiveform.theme.canvas3 ausgewählt. Sie können auch ein anderes Design im Dropdown-Menü Design-Client-Bibliothek auswählen.
    • Konfigurations-Container: Definiert einen Speicherort, an dem Konfigurationsdateien für adaptive Formulare gespeichert werden. Diese Konfigurationsdateien enthalten Einstellungen und Eigenschaften, die sich auf das Verhalten und das Erscheinungsbild von adaptiven Formularen beziehen.
    • Tags: Gibt Tags an, die eine eindeutige Identifizierung des adaptiven Formulars ermöglichen. Tags erleichtern die Suche nach dem Formular. Um die Tags zu erstellen, geben Sie neue Tag-Namen in das Feld Tags ein.

  6. Wählen Sie Erstellen. Es wird ein adaptives Formular erstellt und ein Dialogfeld zum Öffnen der Formularbearbeitung angezeigt.

  7. Wählen Sie Bearbeiten aus, um das neu erstellte Formular auf einer neuen Registerkarte zu öffnen. Das Formular wird zur Bearbeitung geöffnet und zeigt den Inhalt an, der in der Vorlage verfügbar ist. Außerdem wird die Seitenleiste angezeigt, um das neu erstellte Formular anzupassen.

Verwenden der Kernkomponenten für adaptive Formulare zum Erstellen Ihres Formulars

Nachdem Sie das Formular zur Bearbeitung geöffnet haben, können Sie verfügbare Kernkomponenten für adaptive Formulare verwenden, um Ihrem Formular Formularfelder hinzuzufügen. Sie können Drag-and-Drop oder die Option + [Komponente einfügen] verwenden, um diese Komponenten einem Formular hinzuzufügen. In der Dokumentation zu AEM-Kernkomponenten finden Sie weitere Informationen zu den Kernkomponenten für adaptive Formulare. Sie können auch https://aemcomponents.dev/ besuchen, um die verfügbaren Kernkomponenten in Aktion zu sehen.

Konfigurieren der Übermittlungsaktion für ein adaptives Formular

Mit einer Übermittlungsaktion können Sie das Ziel der Daten auswählen, die über ein adaptives Formular erfasst werden. Eine Übermittlungsaktion wird ausgelöst, wenn eine Benutzerin bzw. ein Benutzer in einem adaptiven Formular auf die Schaltfläche „Senden“ klickt. Adaptive Formulare enthalten einige vordefinierte Sendeaktionen. Sie können außerdem die standardmäßigen Sendeaktionen erweitern, um Ihre eigene benutzerdefinierte Sendeaktion zu erstellen. So konfigurieren Sie eine Sendeaktion für Ihr Formular:

  1. Öffnen Sie den Inhalts-Browser und wählen Sie die Guide-Container-Komponente Ihres adaptiven Formulars aus.

  2. Klicken Sie auf das Symbol für die Guide-Container-Eigenschaften Guide-Eigenschaften . Das Dialogfeld „Container für ein adaptives Formular“ wird geöffnet.

  3. Klicken Sie auf die Registerkarte Übermittlung.

    Klicken Sie auf das Schraubenschlüsselsymbol, um das Dialogfeld „Container für ein adaptives Formular“ zu öffnen und eine Übermittlungsaktion zu konfigurieren.

  4. Wählen Sie je nach Ihren Anforderungen eine  Übermittlungsaktion aus und konfigurieren Sie sie. Detaillierte Informationen zu Übermittlungsaktionen finden Sie unter Übermittlungsaktion für adaptive Formulare

Leiten Sie bei der Formularübermittlung die Benutzerin oder den Benutzer auf eine Seite um oder zeigen Sie eine Dankesnachricht an

Beim Senden eines Formulars können Sie die Benutzenden zu einer anderen Web-Seite oder Nachricht umleiten. So leiten Sie die Benutzenden um oder konfigurieren die Dankesnachricht:

  1. Öffnen Sie den Inhalts-Browser und wählen Sie die Guide-Container-Komponente Ihres adaptiven Formulars.

  2. Klicken Sie auf das Symbol für die Guide-Container-Eigenschaften Guide-Eigenschaften . Das Dialogfeld „Container für ein adaptives Formular“ wird geöffnet.

  3. Öffnen Sie die Registerkarte Übermittlung.

    Klicken Sie auf das Schraubenschlüsselsymbol, um das Dialogfeld „Container für ein adaptives Formular“ zu öffnen und eine Umleitungsseite oder Dankesnachricht zu konfigurieren.

    • Wählen Sie zum Konfigurieren einer Umleitungs-URL für die Senden-Option die Option Zu URL umleiten aus, durchsuchen Sie eine AEM Sites-Seite und wählen Sie sie aus oder geben Sie die URL einer externen Seite an.

    • Wählen Sie zum Konfigurieren einer benutzerdefinierten Nachricht oder einer Dankesnachricht für die Senden-Option die Option  Nachricht anzeigen und geben Sie im Feld Nachrichteninhalt eine Nachricht ein. Es handelt sich um ein Rich-Text-Feld. Sie können die Vollbildoption verwenden, um alle verfügbaren Rich-Text-Elemente anzuzeigen.

Konfigurieren eines Schemas oder Formulardatenmodells für ein adaptives Formular

Sie können das Formulardatenmodell verwenden, um ein Formular mit einer Datenquelle zu verbinden und Daten basierend auf Benutzeraktionen zu senden und zu empfangen. Sie können auch ein Formular mit einem JSON-Schema verbinden, um die gesendeten Daten in einem vordefinierten Format zu empfangen. Verbinden Sie Ihr Formular je nach Anforderung mit einem JSON-Schema oder Formulardatenmodell: