Erstellen von adaptiven Formularen auf Grundlage der Kernkomponenten creating-an-adaptive-form-core-components
Adobe empfiehlt die Verwendung von Kernkomponenten, um adaptive Formulare zu einer AEM Sites-Seite hinzuzufügenoder eigenständige adaptive Formulare zu erstellen.
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 note 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 create-an-adaptive-form
-
Melden Sie sich bei Ihrer lokalen AEM-Autoreninstanz an.
-
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.
-
Wählen Sie Erstellen > Adaptives Formular erstellen aus.
-
Wählen Sie eine Vorlage mit Kernkomponenten für adaptive Formulare aus und klicken Sie auf Weiter.
-
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.canvas3ausgewä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.
-
Wählen Sie Erstellen. Es wird ein adaptives Formular erstellt und ein Dialogfeld zum Öffnen der Formularbearbeitung angezeigt.
-
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 configure-submit-action-for-form
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:
-
Öffnen Sie den Inhalts-Browser und wählen Sie die Guide-Container-Komponente Ihres adaptiven Formulars aus.
-
Klicken Sie auf das Symbol für die Guide-Container-Eigenschaften
-
Klicken Sie auf die Registerkarte Übermittlung.
-
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:
-
Öffnen Sie den Inhalts-Browser und wählen Sie die Guide-Container-Komponente Ihres adaptiven Formulars.
-
Klicken Sie auf das Symbol für die Guide-Container-Eigenschaften
-
Öffnen Sie die Registerkarte Übermittlung.
-
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 configure-schema-or-data-model-for-form
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:
Konfigurieren eines JSON-Schemas oder Formulardatenmodells für das Formular:
So konfigurieren Sie ein JSON-Schema oder ein Formulardatenmodell für Ihr Formular:
-
Öffnen Sie den Inhalts-Browser und wählen Sie die Guide-Container-Komponente Ihres adaptiven Formulars.
-
Klicken Sie auf das Symbol für die Guide-Container-Eigenschaften
-
Öffnen Sie die Registerkarte Datenmodell.
-
Wählen Sie ein JSON-Schema oder ein Formulardatenmodell aus und konfigurieren Sie es entsprechend Ihren Anforderungen:
- Wenn Sie die Option Formularmodell wählen, können Sie mit der Option Formulardatenmodell auswählen ein vorkonfiguriertes Formulardatenmodell auswählen.
- Wenn Sie die Option Schema wählen, verwenden Sie die Option Schema, um ein JSON-Schema für Ihr Formular auszuwählen.
-
Klicken Sie auf Fertig.
Konfigurieren eines Vorbefüllungsdienstes configure-prefill-service-for-form
Sie können den Vorbefüllungsdienst verwenden, um Felder eines adaptiven Formulars automatisch mit vorhandenen Daten auszufüllen. Wenn eine Benutzerin oder ein Benutzer ein Formular öffnet, sind die Werte für diese Felder schon vorbefüllt. Sie haben folgende Möglichkeiten:
Verwenden des Vorbefüllungsdienstes für Formulardatenmodelle zum Ausfüllen von Feldern eines adaptiven Formulars im Voraus fdm-prefill-service
Sie können den Vorbefüllungsdienst für Formulardatenmodelle verwenden, um Felder eines adaptiven Formulars mit einem Formulardatenmodell oder einem benutzerdefinierten Vorbefüllungsdienst im Voraus auszufüllen. Der Vorbefüllungsdienst für das Formulardatenmodell verwendet den Get-Dienst des konfigurierten Formulardatenmodells zum Abrufen von Daten. So verwenden Sie für ein adaptives Formular den Vorbefüllungsdienst für Formulardatenmodelle:
- Öffnen Sie den Inhalts-Browser und wählen Sie die Guide-Container-Komponente Ihres adaptiven Formulars.
- Klicken Sie auf das Symbol für die Guide-Container-Eigenschaften
- Klicken Sie auf das Symbol für die Eigenschaften des Containers für adaptive Formulare
- Wählen Sie ein Formulardatenmodell aus. Öffnen Sie die Registerkarte Allgemein. Wählen Sie im Vorbefüllungsdienst die Option Vorbefüllungsdienst für Formulardatenmodell.
- Klicken Sie auf Fertig. Ihr adaptives Formular ist jetzt so konfiguriert, dass es die Vorbefüllung für Formulardatenmodelle verwendet. Sie können nun den Regeleditor verwenden, um Regeln zu erstellen, nach denen Felder des Formulars vorausgefüllt werden.
Wie erfolgt das Umbenennen eines adaptiven AEM-Formulars? rename-an-AEM-Adaptive-Form
Führen Sie zum Umbenennen eines adaptiven Formulars die folgenden Schritte aus:
-
Wählen Sie ein adaptives Formular in Ihrer AEM Forms-Benutzeroberfläche aus.
-
Klicken Sie auf Eigenschaften in der oberen Leiste.
-
Ändern Sie den Formularnamen auf der Registerkarte Titel, wie in der Abbildung unten dargestellt.
-
Klicken Sie auf Speichern und schließen.
