Schulung: Wenden Sie Regeln auf adaptive Formularfelder an

Letzte Aktualisierung: 2023-05-04
  • Erstellt für:
  • User
VORSICHT

AEM 6.4 hat das Ende der erweiterten Unterstützung erreicht und diese Dokumentation wird nicht mehr aktualisiert. Weitere Informationen finden Sie in unserer technische Unterstützung. Unterstützte Versionen suchen here.

06-apply-rules-to-adaptive-form_main

Dieses Tutorial ist ein Schritt im Erstellen Ihres ersten adaptiven Formulars Reihe. Adobe empfiehlt, der Reihe in chronologischer Abfolge zu folgen, um den vollständigen Anwendungsfall des Tutorials zu verstehen, auszuführen und zu demonstrieren.

Über das Tutorial

Sie können Regeln verwenden, um einem adaptiven Formular Interaktivität, Geschäftslogik und intelligente Validierungen hinzuzufügen. Adaptive Formulare verfügen über einen integrierten Regeleditor. Der Regeleditor bietet eine Drag-and-Drop-Funktion, ähnlich wie bei geführten Touren. Die Drag & Drop-Methode ist die schnellste und einfachste Methode zum Erstellen von Regeln. Der Regeleditor bietet außerdem ein Codefenster für Benutzer, die ihre Kodierungsfähigkeiten testen oder die Regeln auf die nächste Stufe bringen möchten.

Weitere Informationen zum Regeleditor finden Sie unter Regeleditor für adaptive Forms.

Am Ende der Schulung lernen Sie Regeln zu erstellen, um Folgendes zu tun:

  • Rufen Sie einen Formulardatenmodelldienst auf, um Daten aus der Datenbank abzurufen.
  • Rufen Sie einen Formulardatenmodelldienst auf, um Daten zur Datenbank hinzuzufügen.
  • Ausführen einer Validierungsprüfung und Anzeigen von Fehlermeldungen

Interaktive GIF-Bilder am Ende jedes Abschnitts der Schulung helfen Ihnen dabei, die Funktionalität des Formulars, das Sie gerade erstellen, schnell zu lernen und zu validieren.

Schritt 1: Abrufen eines Kundendatensatzes aus der Datenbank

Sie haben ein Formulardatenmodell anhand der folgenden Schritte erstellt: Formulardatenmodell erstellen Artikel. Jetzt können Sie mit dem Regeleditor die Forms-Datenmodelldienste aufrufen, um Informationen abzurufen und zur Datenbank hinzuzufügen.

Jedem Kunden wird eine eindeutige Kunden-ID-Nummer zugewiesen, mit der relevante Kundendaten in einer Datenbank identifiziert werden können. Im folgenden Verfahren wird die Kunden-ID verwendet, um Informationen aus der Datenbank abzurufen:

  1. Öffnen Sie Ihr adaptives Formular zum Bearbeiten.

    http://localhost:4502/editor.html/content/forms/af/change-billing-shipping-address.html

  2. Tippen Sie auf das Feld Kunden-ID und tippen Sie auf das Symbol Regeln bearbeiten. Das Fenster „Regeleditor“ wird geöffnet.

  3. Tippen Sie auf + Erstellen -Symbol, um eine Regel hinzuzufügen. Dadurch wird der Visual Editor geöffnet.

    Im visuellen Editor ist die Anweisung WHEN standardmäßig ausgewählt. Darüber hinaus wird das Formularobjekt (in diesem Fall Kunden-ID), von dem aus Sie den Regeleditor gestartet haben, in der WHEN-Anweisung angegeben.

  4. Tippen Sie auf die Dropdown-Liste Status auswählen und wählen Sie wurde geändert.

    whencustomeridischanged

  5. Im THEN Anweisung, auswählen Aufrufdienst von Aktion auswählen Dropdown-Liste.

  6. Wählen Sie die Versandadresse abrufen Dienst von Auswählen Dropdown-Liste.

  7. Ziehen Sie das Feld Kunden-ID per Drag-and-Drop von der Registerkarte „Formularobjekte“ in das Feld Objekt hier einfügen oder auswählen im INPUT-Bereich.

    dropobjectstoinputfield-retrieveData

  8. Ziehen Sie das Feld Kunden-ID, Name, Versandadresse, Bundesland und Postleitzahl per Drag-and-Drop von der Registerkarte „Formularobjekte“ in das Feld Objekt hier einfügen oder auswählen im Bereich OUTPUT.

    dropobjectstooutputfield-retrieveData

    Tippen Sie auf Fertig, um die Regel zu speichern. Tippen Sie im Fenster des Regeleditors auf Schließen.

  9. Zeigen Sie das adaptive Formular in der Vorschau an. Geben Sie eine ID in die Kunden-ID -Feld. Das Formular kann jetzt Kundendetails aus der Datenbank abrufen.

    retrieve-information

Schritt 2: Die aktualisierte Kundenadresse zur Datenbank hinzufügen

Nachdem die Kundendetails aus der Datenbank abgerufen wurden, können Sie die Lieferadresse, den Bundesstaat und die Postleitzahl aktualisieren. Das folgende Verfahren ruft einen Formulardatenmodelldienst auf, um Kundeninformationen in der Datenbank zu aktualisieren:

  1. Wählen Sie das Feld Senden und tippen Sie auf das Symbol Regeln bearbeiten. Das Fenster „Regeleditor“ wird geöffnet.

  2. Wählen Sie die Regel Senden - Klicken und tippen Sie auf das Symbol Bearbeiten. Die Optionen zum Bearbeiten der Senden-Regel werden angezeigt.

    submit-rule

    In der WHEN-Option sind die Optionen Senden und wurde angeklickt bereits ausgewählt.

    submit-is-clicked

  3. Im THEN Tippen Sie auf die + Anweisung hinzufügen -Option. Auswählen Aufrufdienst von Aktion auswählen Dropdown-Liste.

  4. Wählen Sie die Versandadresse aktualisieren Dienst von Auswählen Dropdown-Liste.

    update-shipping-address

  5. dropobjectstoinputfield-updatedata

    Ziehen Sie das Feld Versandadresse, Bundesland und Postleitzahl aus der Registerkarte Formularobjekte auf die entsprechende Tabellennameneigenschaft (z. B. customerdetails.shippingAddress) des Feldes Objekt hier einfügen oder auswählen im Bereich INPUT. Alle Felder mit dem Präfix „tablename“ (in diesem Anwendungsbeispiel das Feld „customerdetails“) dienen als Eingabedaten für den Aktualisierungsservice. Der gesamte Inhalt in diesen Feldern wird in der Datenquelle aktualisiert.

    HINWEIS

    Ziehen Sie die Felder Name und Kunden-ID nicht auf die entsprechende tablename.property (z. B. customerdetails.name). Der Name und die ID des Kunden sollten nicht versehentlich aktualisiert werden.

  6. Ziehen Sie das Feld Kunden-ID per Drag-and-Drop von der Registerkarte Formularobjekte in das Feld „ID“ im Feld INPUT. Felder ohne vorangestellten Tabellennamen (in diesem Anwendungsbeispiel das Feld „customerdetails“) dienen als Suchparameter für den Aktualisierungsservice. Das Feld ID in diesem Anwendungsfall identifiziert einen Datensatz in der Tabelle customerdetails.

  7. Tippen Sie auf Fertig, um die Regel zu speichern. Tippen Sie im Fenster des Regeleditors auf Schließen.

  8. Zeigen Sie das adaptive Formular in der Vorschau an. Rufen Sie Details zu einem Kunden ab, aktualisieren Sie die Lieferadresse und senden Sie das Formular. Wenn Sie die Details desselben Kunden erneut abrufen, wird die aktualisierte Versandadresse angezeigt.

Schritt 3: (Bonusabschnitt) Verwenden Sie den Code-Editor, um Validierungen auszuführen und Fehlermeldungen anzuzeigen.

Sie sollten eine Validierung für das Formular durchführen, um sicherzustellen, dass die im Formular eingegebenen Daten korrekt sind und bei falschen Daten eine Fehlermeldung angezeigt wird. Wenn beispielsweise eine nicht vorhandene Kunden-ID in das Formular eingegeben wird, sollte eine Fehlermeldung angezeigt werden.

Adaptive Formulare bieten mehrere Komponenten mit integrierten Validierungen, z. B. E-Mail und numerische Felder, die Sie für häufige Anwendungsfälle verwenden können. Verwenden Sie den Regeleditor für erweiterte Anwendungsfälle, um z. B. eine Fehlermeldung anzuzeigen, wenn die Datenbank null (0) Datensätze (keine Datensätze) zurückgibt.

Das folgende Verfahren zeigt, wie eine Regel erstellt wird, um eine Fehlermeldung anzuzeigen, wenn die im Formular eingegebene Kunden-ID nicht in der Datenbank vorhanden ist. Die Regel bringt auch den Fokus auf das Feld Kunden-ID und setzt es zurück. Die Regel verwendet die dataIntegrationUtils-API des Formulardatenmodell-Services, um zu überprüfen, ob die Kunden-ID in der Datenbank vorhanden ist.

  1. Tippen Sie auf das Feld Kunden-ID und dann auf das Symbol Edit Rules. Das Fenster „Regeleditor“ wird geöffnet.

  2. Tippen Sie auf + Erstellen -Symbol, um eine Regel hinzuzufügen. Dadurch wird der Visual Editor geöffnet.

    Im visuellen Editor ist die Anweisung WHEN standardmäßig ausgewählt. Darüber hinaus wird das Formularobjekt (in diesem Fall Kunden-ID), von dem aus Sie den Regeleditor gestartet haben, in der WHEN-Anweisung angegeben.

  3. Tippen Sie auf die Dropdown-Liste Status auswählen und wählen Sie wurde geändert.

    whencustomeridischanged

    Im THEN Anweisung, auswählen Aufrufdienst von Aktion auswählen Dropdown-Liste.

  4. Zwischen Visual Editor nach Code-Editor. Die Umschalttaste befindet sich auf der rechten Seite des Fensters. Der Code-Editor wird geöffnet und zeigt Code ähnlich dem folgenden an:

    code-editor

  5. Ersetzen Sie den Eingabevariablenabschnitt durch den folgenden Code:

    var inputs = {
        "id" : this
    };
    
  6. Ersetzen Sie den Abschnitt guidelib.dataIntegrationUtils.executeOperation (operationInfo, input, output) durch den folgenden Code:

    guidelib.dataIntegrationUtils.executeOperation(operationInfo, inputs, outputs, function (result) {
      if (result) {
          result = JSON.parse(result);
        customer_Name.value = result.name;
        customer_Shipping_Address = result.shippingAddress;
      } else {
        if(window.confirm("Invalid Customer ID. Provide a valid customer ID")) {
              customer_Name.value = " ";
             guideBridge.setFocus(customer_ID);
        }
      }
    });
    
  7. Zeigen Sie das adaptive Formular in der Vorschau an. Geben Sie eine falsche Kunden-ID ein. Eine Fehlermeldung wird angezeigt.

    display-validation-error

Auf dieser Seite