Schulung: Wenden Sie Regeln auf adaptive Formularfelder an

06-apply-rules-to-adaptive-form_main

Diese Schulung ist ein Schritt in der Reihe Erstellen Ihres ersten adaptives Formulars. Adobe empfiehlt, die Serie in chronologischer Reihenfolge zu verfolgen, um den vollständigen Anwendungsfall der Schulung zu verstehen, auszuführen und zu demonstrieren.

Über die Schulung

Sie können Regeln erstellen, 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 Benutzer, die ihre Programmierfähigkeiten testen oder die Regeln weiterentwickeln möchten.

Sie können mehr über den Regeleditor unter Regeleditor für adaptive Formulare erfahren.

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

  • Aufrufen eines Formulardatenmodell-Dienstes, um Daten aus der Datenbank abzurufen
  • Aufrufen eines Formulardatenmodell-Dienstes, 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 benutzerdefinierten Datensatzes aus der Datenbank

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.

Jedem Kunden ist eine eindeutige Kunden-ID-Nummer zugeordnet, anhand derer er relevante Kundendaten in einer Datenbank identifizieren kann. 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. 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 das Symbol + Erstellen, um eine Regel hinzuzufügen. Es öffnet den visuellen Editor.

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

  4. Tippen Sie auf die Dropdownliste Status auswählen und wählen Sie Ist geändert.

    whencustomeridischanged

  5. In der Anweisung THEN wählen Sie Dienst aufrufen aus der Dropdown-Liste Aktion auswählen.

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

  7. Ziehen Sie das Feld Kunden-ID aus der Registerkarte "Formularobjekte"in das Feld Objekt ablegen oder wählen Sie hier im Feld INPUT aus.

    dropobjectstoinputfield-reuevedata

  8. Ziehen Sie das Feld Kunden-ID, Name, Versandadresse, Bundesland und Postleitzahl aus der Registerkarte "Formularobjekte"in das Feld Objekt ablegen oder hier im Feld AUSGABE auswählen.

    dropobjectstooutputfield-reuevedata

    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 im Feld Kunden-ID ein. Das Formular kann nun Kundendaten aus der Datenbank abrufen.

    retrieve-information

Schritt 2: Fügen Sie die aktualisierte Kundenadresse zur Datenbank hinzu

Nachdem die Kundendaten aus der Datenbank abgerufen wurden, können Sie die Lieferadresse, das Bundesland 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 Sie auf und tippen Sie auf das Symbol Bearbeiten. Die Optionen zum Bearbeiten der Übermittlungsregel werden angezeigt.

    submit-rule

    In der Option "WHEN"sind die Optionen Submit und bereits ausgewählt.

    submit-is-clicked

  3. Tippen Sie in der Option THEN auf + Anweisung hinzufügen. Wählen Sie Dienst aufrufen aus der Dropdown-Liste Aktion auswählen.

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

    update-shipping-address

  5. dropobjectstoinputfield-updatedata

    Ziehen Sie das Feld Versandadresse, Bundesland und Postleitzahl aus der Registerkarte "Formularobjekte"in die entsprechende Tabelleneigenschaft ".property"(z. B. customerdetails .shippingAddress) des Felds Drop"oder wählen Sie hier im Feld INPUT aus. Alle Felder mit dem Präfix tableName (in diesem Anwendungsfall z. B. Kundendetails) dienen als Eingabedaten für den Updateservice. Der gesamte Inhalt in diesen Feldern wird in der Datenquelle aktualisiert.

    HINWEIS

    Ziehen Sie die Felder Name und Kunden-ID nicht in 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 Präfix tablename (z. B. Kundendetails in diesem Anwendungsfall) dient als Suchparameter für den Updateservice. Das Feld id in diesem Verwendungsfall identifiziert einen Datensatz in der Tabelle "kundenspezifische Details"eindeutig.

  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 eines Kunden ab, aktualisieren Sie die Lieferadresse und senden Sie das Formular ab. Wenn Sie Details des gleichen Kunden erneut abrufen, wird die aktualisierte Lieferadresse angezeigt.

Schritt 3: (Abschnitt „Bonus“) Verwenden Sie den Code-Editor, um Validierungen auszuführen und Fehlermeldungen anzuzeigen

Sie sollten die Validierung des Formulars durchführen, um sicherzustellen, dass die im Formular eingegebenen Daten korrekt sind und im Falle von fehlerhaften 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, die eine Fehlermeldung anzeigt, wenn die im Formular eingegebene Kunden-ID nicht in der Datenbank vorhanden ist. Mit der Regel wird auch das Feld für die Kunden-ID aktiviert und zurückgesetzt. Die Regel verwendet die dataIntegrationUtils-API des Formulardatenmodelldiensts, 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 das Symbol + Erstellen, um eine Regel hinzuzufügen. Es öffnet den visuellen Editor.

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

  3. Tippen Sie auf die Dropdownliste Status auswählen und wählen Sie Ist geändert.

    whencustomeridischanged

    In der Anweisung THEN wählen Sie Dienst aufrufen aus der Dropdown-Liste Aktion auswählen.

  4. Wechseln Sie von Visual Editor zu 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:

    var inputs = {
        "id" : this
    };
    
  6. Ersetzen Sie den Abschnitt guidelib.dataIntegrationUtils.executeOperation (operationInfo, Eingaben, Ausgaben) 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

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now