Tutorial: Erstellen Sie Ihr erstes adaptives Formular tutorial-create-your-first-adaptive-form

Version
Artikel-Link
AEM as a Cloud Service
Hier klicken
AEM 6.5
Dieser Artikel

01-create-first-adaptive-form-hero-image

Einführung introduction

Suchen Sie einen mobilfreundlichen Formularerfahrung die die Registrierung vereinfacht, die Interaktion erhöht und die Bearbeitungszeit verkürzt, adaptive Formulare ist perfekt für dich geeignet. Adaptive Formulare bieten ein mobiles, automatisierungs- und analysefreundliches Formularerlebnis. Sie können auf einfache Weise Formulare erstellen, die reaktionsschnell und interaktiv sind, automatisierte Prozesse verwenden, um administrative und sich wiederholende Aufgaben zu reduzieren, und Datenanalysen verwenden, um das Erlebnis, das Kunden mit Ihren Formularen haben, zu verbessern und zu personalisieren.

Dieses Tutorial bietet ein End-to-End-Framework zum Erstellen eines adaptiven Formulars. Das Tutorial ist in einen Anwendungsfall und mehrere Handbücher unterteilt. Jedes Handbuch hilft Ihnen dabei, neue Funktionen zu erlernen und zum adaptiven Formular hinzuzufügen, das in diesem Tutorial erstellt wird. Sie verfügen nach jedem Handbuch über ein funktionierendes adaptives Formular. Das Handbuch zum Erstellen eines adaptiven Formulars ist verfügbar. Nachfolgende Handbücher werden bald folgen. Am Ende dieses Tutorials sollten Sie zu Folgendem in der Lage sein:

  • Adaptive Formulare und ein Formulardatenmodell erstellen.
  • Adaptive Formulare gestalten.
  • Den Regeleditor für adaptive Formulare zum Erstellen von Geschäftsregeln verwenden.
  • Adaptive Formulare testen und veröffentlichen.

create-adaptive-form-workflow

Die Tour beginnt mit dem Kennenlernen des Anwendungsfalls:

Eine Website bietet eine Reihe von Produkten für verschiedene Kundinnen bzw. Kunden. Kundinnen bzw. Kunden durchsuchen das Portal, wählen die Produkte aus und bestellen sie. Jede Kundin bzw. jeder Kunde erstellt ein Konto und gibt Versand- und Rechnungsadressen an. Eine bestehende Kundin, Sara Rose, möchte ihre Versandadresse zur Website hinzufügen. Die Website bietet ein Online-Formular zum Hinzufügen und Aktualisieren von Versandadressen.

Die Website wird mit Adobe Experience Manager (AEM) ausgeführt und verwendet AEM Forms für die Erfassung und Verarbeitung von Daten. Das Formular zum Hinzufügen und Aktualisieren von Adressen ist ein adaptives Formular. Die Website speichert Kundendetails in einer Datenbank. Das Formular zum Hinzufügen und Aktualisieren von Adressen dient dazu, verfügbare Adressen abzurufen und anzuzeigen. Außerdem wird das adaptive Formular dazu verwendet, aktualisierte und neue Adressen zu akzeptieren.

Voraussetzung prerequisite

  • Richten Sie eine AEM Autoreninstanz

  • Installieren Sie das AEM Forms-Add-On auf der Author-Instanz.

  • Beziehen Sie den JDBC-Datenbanktreiber (JAR-Datei) vom Datenbankanbieter. Die Beispiele im Tutorial basieren auf einer MySQL-Datenbank und verwenden Oracle’s MySQL JDBC-Datenbanktreiber.

  • Richten Sie eine Datenbank ein, die Kundendaten mit den unten angezeigten Feldern enthält. Eine Datenbank ist nicht unbedingt notwendig zum Erstellen eines adaptiven Formulars. In diesem Tutorial wird eine Datenbank zur Demonstration der Formulardatenmodell- und Persistenzfunktionen von AEM Forms verwendet.

adaptiveformdata

Schritt 1: Erstellen Sie ein adaptives Formular step-create-an-adaptive-form

03-create-adaptive-form-main-image_small

Adaptive Formulare repräsentieren eine neue Generation: ansprechend, interaktiv, dynamisch und anpassungsfähig. Mit adaptiven Formularen können Sie personalisierte und zielgerichtete Erlebnisse bieten. AEM Forms bietet einen Drag-and-Drop-WYSIWYG-Editor zum Erstellen von adaptiven Formularen. Weitere Informationen zu adaptiven Formularen finden Sie unter Einführung in das Authoring adaptiver Formulare.

Ziele:

  • Erstellen Sie ein adaptives Formular, mit dem ein Kunde eine Versandadresse hinzufügen kann.
  • Layout-Felder eines adaptiven Formulars zur Anzeige und Annahme von Informationen von einem Kunden.
  • Erstellen Sie eine Sendeaktion, um eine E-Mail mit Formularinhalt zu senden.
  • Anzeigen einer Vorschau und Senden eines adaptiven Formulars

Siehe Handbuch

Schritt 2: Erstellen Sie ein Formulardatenmodell step-create-form-data-model

05-create-form-data-model-main_small

Mit einem Formulardatenmodell können Sie ein adaptives Formular mit unterschiedlichen Datenquellen verbinden. z. B. mit AEM-Benutzerprofilen, RESTful-Web-Diensten, SOAP-basierten Web-Diensten, OData-Diensten und relationalen Datenbanken. Ein Formulardatenmodell ist ein einheitliches Datenrepräsentationsschema von Geschäftseinheiten und Diensten, die in verbundenen Datenquellen verfügbar sind. Sie können das Formulardatenmodell mit einem adaptiven Formular verwenden, um Daten von verbundenen Datenquellen abzurufen, zu aktualisieren, zu löschen und ihnen hinzuzufügen.

Ziele:

  • Konfigurieren Sie die Datenbankinstanz der Website (MySQL Datenbank) als Datenquelle.
  • Erstellen Sie das Formulardatenmodell mit MySQL Datenbank als Datenquelle.
  • Fügen Sie Datenmodellobjekte hinzu, damit Sie das Datenmodell bilden können.
  • Konfigurieren Sie Lese- und Schreibdienste für das Formulardatenmodell.
  • Testen Sie das Formulardatenmodell und die konfigurierten Dienste mit Testdaten.

Siehe Handbuch

Schritt 3: Wenden Sie Regeln auf adaptive Formularfelder an step-apply-rules-to-adaptive-form-fields

07-apply-rules-to-adaptive-form_small

Adaptive Formulare stellen einen Editor zum Schreiben von Regeln für adaptive Formularobjekte bereit. Diese Regeln definieren Aktionen für Formularobjekte, die durch voreingestellte Bedingungen, Benutzereingaben und Benutzeraktionen im Formular ausgelöst werden. Dadurch wird die Genauigkeit gewährleistet und das Ausfüllen von Formularen beschleunigt.

Ziele:

  • Erstellen Sie Regeln und wenden Sie sie auf adaptive Formularfelder an.
  • Verwenden Sie Regeln zum Trigger von Formulardatenmodelldiensten, um die Daten in die Datenbank zu aktualisieren.

Siehe Handbuch

Schritt 4: Gestalten Sie Ihr adaptives Formular step-style-your-adaptive-form

adaptive-form-styling

Adaptive Formulare bieten Designs und einen Editor, um Designs für die adaptiven Formulare zu erstellen. Ein Design umfasst Formatierungsdetails für Komponenten und Bereiche, und Sie können ein Design in verschiedenen Formularen wiederverwenden. Die Stile umfassen Eigenschaften wie Hintergrundfarben, Statusfarben, Transparenz, Ausrichtung und Größe. Wenn Sie das Design auf ein Formular anwenden, wird der festgelegte Stil auf die entsprechenden Komponenten des Formulars angewendet. Adaptive Formulare unterstützen auch das Inline-Styling für Designs, die spezifisch für ein Formular sind.

Ziele:

  • Wenden Sie ein Standarddesign auf ein adaptives Formular an.
  • Erstellen Sie ein Design für das adaptive Formular mit dem Design-Editor.
  • Verwenden Sie Web Fonts in einem benutzerdefinierten Design.

Siehe Handbuch

Schritt 5: Veröffentlichen Sie Ihr adaptives Formular step-publish-your-adaptive-form

12-publish-your-adaptive-form-_small

Sie können adaptive Formulare als eigenständiges Formular (Einzelseitenprogramm) veröffentlichen, in eine AEM Sites-Seite einbinden oder mithilfe des Formularportals in einer AEM-Site auflisten.

Ziele:

  • Veröffentlichen Sie das adaptive Formular als AEM Seite.
  • Einbetten des adaptiven Formulars in ein AEM Sites Seite.
  • Betten Sie das adaptive Formular in eine externe Webseite ein (eine nicht AEM Webseite, die außerhalb von AEM gehostet wird).

Siehe Handbuch

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2