Schulung: Wenden Sie Regeln auf adaptive Formularfelder an tutorial-apply-rules-to-adaptive-form-fields

06-apply-rules-to-adaptive-form_main

Dieses Tutorial ist ein Teil der Serie Erstellen Ihres ersten adaptiven Formulars. Adobe empfiehlt, die Serie in chronologischer Reihenfolge durchzugehen, um den vollständigen Anwendungsfall des Tutorials zu verstehen, auszuführen und zu demonstrieren.

Über das Tutorial about-the-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-Funktionalität, ähnlich wie bei Einführungen.  Die Drag-and-Drop-Methode ist die schnellste und einfachste Methode zum Erstellen von Regeln.  Der Regeleditor bietet außerdem ein Code-Fenster für Benutzende, die ihre Programmierfähigkeiten testen oder die Regeln weiterentwickeln möchten.

Unter Regeleditor für adaptive Formulare erfahren Sie mehr über den Regeleditor.

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

  • Aufrufen eines Formulardatenmodell-Dienstes zum Abrufen von Daten aus der Datenbank
  • Aufrufen eines Formulardatenmodell-Dienstes zum Hinzufügen von Daten zur Datenbank
  • 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 benutzerdefinierten Eintrags aus der Datenbank retrieve-customer-record

Sie haben ein Formulardatenmodell erstellt, wie im Artikel Formulardatenmodell erstellen beschrieben. Jetzt können Sie den Regeleditor verwenden, um die Formulardatenmodelldienste aufzurufen, um Informationen aus der Datenbank abzurufen und ihr hinzuzufügen.

Jeder Kundin und jedem Kunden ist eine eindeutige Kunden-ID-Nummer zugeordnet, anhand derer sich relevante Kundendaten in einer Datenbank identifizieren lassen.  Das folgende Verfahren verwendet die Kunden-ID, 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. Wählen Sie das Feld Kunden-ID und dann das Symbol Regeln bearbeiten  aus. Das Fenster „Regeleditor“ wird geöffnet.

  3. Wählen Sie das Symbol  + Erstellen aus, um eine Regel hinzuzufügen. Es öffnet den visuellen Editor.

    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. Wählen Sie die Dropdown-Liste  Status auswählen  und dann wurde geändert aus.

    whencustomeridischanged

  5. Wählen Sie im Abschnitt DANN die Option Dienst aufrufen  aus der Dropdown-Liste Aktion auswählen aus.

  6. Wählen Sie den Dienst  Versandadresse abrufen aus der Dropdown-Liste Auswählen aus.

  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

    Wählen Sie  Fertig  aus, um die Regel zu speichern. Wählen Sie im Regeleditor-Fenster die Option  Schließen aus.

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

    retrieve-information

Schritt 2: Hinzufügen der aktualisierten Kundenadresse zur Datenbank updated-customer-address

Nachdem die Kundendaten aus der Datenbank abgerufen wurden, können Sie die Lieferadresse, das Bundesland und die Postleitzahl aktualisieren. Mit dem folgenden Verfahren wird ein Formulardatenmodelldienst aufgerufen, um Kundeninformationen in der Datenbank zu aktualisieren:

  1. Wählen Sie das Feld Absenden und dann das Symbol Regeln bearbeiten  aus. Das Fenster „Regeleditor“ wird geöffnet.

  2. Wählen Sie die Regel Senden – Klicken und dann das Symbol Bearbeiten aus. 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. Wählen Sie unter DANN die Option + Anweisung hinzufügen aus. Wählen Sie aus der Dropdown-Liste Aktion auswählen die Option Dienst aufrufen aus.

  4. Wählen Sie aus der Dropdown-Liste Auswählen den Dienst Versandadresse aktualisieren aus.

    update-shipping-address

    dropobjectstoinputfield-updatedata

  5. 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.

    note note
    NOTE
    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. Klicken Sie auf Fertig, um die Regel zu speichern. Wählen Sie im Regeleditor-Fenster die Option  Schließen aus.

  8. Zeigen Sie das adaptive Formular in der Vorschau an. Rufen Sie Details einer Kundin oder eines Kunden ab, aktualisieren Sie die Versandadresse und senden Sie das Formular ab. Wenn Sie Details derselben Person erneut abrufen, wird die aktualisierte Versandadresse angezeigt.

Schritt 3: (Abschnitt „Bonus“) Ausführen von Validierungen und Anzeigen von Fehlermeldungen mit dem Code-Editor step-bonus-section-use-the-code-editor-to-run-validations-and-display-error-messages

Sie sollten eine Validierung des Formulars durchführen, um sicherzustellen, dass die im Formular eingegebenen Daten korrekt sind und im Falle fehlerhafter 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, sowie 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. Wählen Sie das Feld Kunden-ID und dann das Symbol Edit Rules aus. Das Fenster des Regeleditors wird geöffnet.

  2. Wählen Sie das Symbol + Erstellen aus, um eine Regel hinzuzufügen. Es öffnet den visuellen Editor.

    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. Wählen Sie die Dropdown-Liste  Status auswählen  und dann wurde geändert aus.

    whencustomeridischanged

    Wählen Sie in der DANN-Anweisung aus der Dropdown-Liste Aktion auswählen die Option Dienst aufrufen aus.

  4. Wechseln Sie vom Visual Editor zum Code-Editor. Die Schaltersteuerung 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:

    code language-javascript
    var inputs = {
        "id" : this
    };
    
  6. Ersetzen Sie den Abschnitt guidelib.dataIntegrationUtils.executeOperation (operationInfo, inputs, outputs) durch den folgenden Code:

    code language-javascript
    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

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