Asynchrone Übermittlung von adaptiven Formularen

Adobe empfiehlt die Verwendung der modernen und erweiterbaren Datenerfassung Kernkomponenten für Erstellen neuer adaptiver Forms oder Hinzufügen von Adaptive Forms zu AEM Sites-Seiten. Diese Komponenten stellen einen bedeutenden Fortschritt bei der Erstellung adaptiver Forms dar und sorgen für beeindruckende Benutzererlebnisse. In diesem Artikel wird der ältere Ansatz zum Erstellen von Adaptive Forms mithilfe von Foundation-Komponenten beschrieben.

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

Web-Formulare werden herkömmlicherweise für die synchrone Übermittlung konfiguriert. Wenn Benutzer ein Formular synchron übermitteln, werden sie zu einer Bestätigungsseite, zu einer Dankeseite oder bei einer fehlgeschlagener Übermittlung zu einer Fehlerseite umgeleitet. Allerdings sind moderne Web-Abläufe wie Einzelseitenanwendungen zunehmend beliebt. Dabei bleibt die Web-Seite unverändert, während die Client-Server-Interaktion im Hintergrund abläuft. Sie können diese Erfahrung jetzt in adaptiven Formularen bieten, indem Sie die asynchrone Übermittlung konfigurieren.

Bei der asynchronen Übermittlung fügt der Formularentwickler beim Absenden des Formulars durch den Benutzer ein separates Erlebnis ein, wie etwa die Weiterleitung zu einem anderen Formular oder einem separaten Bereich der Website. Der Autor kann auch separate Services einbinden, z. B. das Senden von Daten an einen anderen Datenspeicher, oder eine benutzerdefinierte Analyse-Engine hinzufügen. Bei asynchroner Übermittlung verhält sich ein adaptives Formular wie ein Programm mit einer einzelnen Seite, da das Formular nicht neu geladen wird oder sich seine URL nicht ändert, wenn die übermittelten Formulardaten auf dem Server validiert werden.

Weitere Informationen zur asynchronen Übermittlung in adaptiven Formularen finden Sie im Abschnitt .

Asynchrone Übermittlung konfigurieren

So konfigurieren Sie die asynchrone Übermittlung für ein adaptives Formular:

  1. Wählen Sie im Authoring-Modus des adaptiven Formulars den Formular-Container aus und tippen Sie auf cmppr1, um dessen Eigenschaften anzuzeigen.

  2. Aktivieren Sie im Eigenschaftenbereich Übermittlung die Option Asynchrone Übermittlung verwenden.

  3. Im Beim Senden wählen Sie eine der folgenden Optionen aus, die bei erfolgreicher Formularübermittlung ausgeführt werden sollen.

    • Zu URL umleiten: Leitet beim Senden des Formulars zur angegebenen URL oder Seite um. Sie können eine URL angeben oder mit der Funktion zum Durchsuchen den Pfad zu einer Seite im Feld Umleitungs-URL/Pfad wählen.
    • Nachricht anzeigen: Zeigt eine Meldung beim Senden des Formulars an. Sie können eine Nachricht in das Textfeld unterhalb der Option Nachricht anzeigen eingeben. Das Textfeld unterstützt Rich-Text-Formatierung.

  4. Tippen Sie auf check-button1, um die Eigenschaften zu speichern.

Funktionsweise der asynchronen Übermittlung

AEM Forms bietet vordefinierte Erfolgs- und Fehler-Handler für die Formularübermittlung. Handler sind clientseitige Funktionen, die basierend auf der Serverantwort ausgeführt werden. Wenn ein Formular gesendet wird, werden die Daten zur Validierung an den Server übermittelt, der eine Antwort mit Informationen zum Erfolgs- oder Fehlerereignis für die Übermittlung an den Client zurückgibt. Die Informationen werden als Parameter an den relevanten Handler übergeben, um die Funktion auszuführen.

Darüber hinaus können Formularautoren und -entwickler formularspezifische Regeln schreiben, die die Standard-Handler überschreiben. Weitere Informationen finden Sie unter Standard-Handler mithilfe von Regeln überschreiben.

Lassen Sie uns zunächst die Serverantwort auf Erfolgs- und Fehlerereignisse überprüfen.

Server-Antwort für Erfolgsereignis bei Übermittlung

Die Server-Antwort für Erfolgsereignis bei Übermittlung weist folgende Struktur auf:

{
  contentType : "<xmlschema or jsonschema>",
  data : "<dataXML or dataJson>" ,
  thankYouOption : <page/message>,
  thankYouContent : "<thank you page url/thank you message>"
}

Die Serverantwort im Falle einer erfolgreichen Formularübermittlung umfasst Folgendes:

  • Form data format type: XML oder JSON
  • Formulardaten im XML- oder JSON-Format
  • Ausgewählte Option, um zu einer Seite umzuleiten oder eine Nachricht wie im Formular konfiguriert anzuzeigen
  • Seiten-URL oder Nachrichteninhalt, wie im Formular konfiguriert

Der Erfolgshandler liest die Serverantwort und leitet entsprechend zur konfigurierten Seiten-URL weiter oder zeigt eine Nachricht an.

Serverantwort für Fehlerereignis bei Übermittlung

Die Struktur der Serverantwort für das Ereignis bei Übertragungsfehlern sieht wie folgt aus:

{
   errorCausedBy : "<CAPTCHA_VALIDATION or SERVER_SIDE_VALIDATION>",

   errors : [
               { "somExpression" : "<SOM Expression>",
                 "errorMessage"  : "<Error Message>"
               },
               ...
             ]
 }

Die Serverantwort im Fall eines Fehlers bei der Formularübermittlung umfasst Folgendes:

  • Grund für den Fehler, falsche Antwort in CAPTCHA oder fehlgeschlagene Server-seitige Validierung
  • Liste der Fehlerobjekte, einschließlich des SOM-Ausdrucks des Felds, bei dem die Validierung fehlgeschlagen ist, und der entsprechenden Fehlermeldung

Der Fehler-Handler liest die Serverantwort und zeigt dementsprechend die Fehlermeldung im Formular an.

Standard-Handler mithilfe von Regeln außer Kraft setzen

Formularentwickler und -autoren können im Code-Editor auf Formularebene Regeln schreiben, um Standard-Handler zu überschreiben. Die Antwort des Servers bei Erfolgs- und Fehlerereignissen wird auf Formularebene bereitgestellt, auf die Entwickler mithilfe von $event.data in Regeln zugreifen können.

Führen Sie die folgenden Schritte aus, um im Codeeditor Regeln zu schreiben, um die Erfolgs- und Fehlerereignisse zu verarbeiten.

  1. Öffnen Sie das adaptive Formular im Authoring-Modus, wählen Sie ein Formularobjekt aus und tippen Sie auf edit-rules1, um den Regeleditor zu öffnen.
  2. Wählen Sie Formular in der Struktur „Formularobjekte“ und tippen Sie auf Erstellen.
  3. Auswählen Code-Editor aus der Dropdown-Liste der Modusauswahl.
  4. Tippen Sie im Codeeditor auf Code bearbeiten. Tippen Bearbeiten im Bestätigungsdialogfeld angezeigt.
  5. Auswählen Erfolgreiche Übermittlung oder Fehler bei Übermittlung von Ereignis Dropdown-Liste.
  6. Eine Regel für das ausgewählte Ereignis schreiben und auf tippen Fertig , um die Regel zu speichern.

Auf dieser Seite