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.

    In the Visual Editor, the WHEN statement is selected by default. Also, the form object (in this case, Customer ID) from where you launched the rule editor is specified in the WHEN statement.

  4. Tap the Select State drop-down and select is changed.

    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. Drag-and-drop the Customer ID field from the Form Objects tab to the Drop object or select here field in the INPUT box.

    dropobjectstoinputfield-reuevedata

  8. Drag-and-drop the Customer ID, Name, Shipping Address, State, and Zip Code field from the Form Objects tab to the Drop object or select here field in the OUTPUT box.

    dropobjectstooutputfield-reuevedata

    Tippen Sie auf Fertig, um die Regel zu speichern. On the rule editor window, tap Close.

  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. Select the Submit - Click rule and tap the Edit icon. Die Optionen zum Bearbeiten der Übermittlungsregel werden angezeigt.

    submit-rule

    In the WHEN option, the Submit and is clicked options are already selected.

    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

    dropobjectstoinputfield-updatedata

  5. Ziehen Sie das Feld Lieferadresse, Status und Postleitzahl aus der Registerkarte " Formularobjekte "in die entsprechende Tabelleneigenschaft ".property"(z. B. customerdetails.shippingAddress) des Drop-Objekts 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

    Do not drag-and-drop the Name and Customer ID fields to the corresponding tablename.property (for example, 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 vordefinierten Tabellennamen (in diesem Anwendungsfall z. B. Kundendetails) dienen als Suchparameter für den Updateservice. The id field in this use case uniquely identifies a record in the customerdetails table.

  7. Tippen Sie auf Fertig, um die Regel zu speichern. On the rule editor window, tap Close.

  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. The rule also brings the focus to and resets the Customer ID field. The rule uses the dataIntegrationUtils API of the form data model service to check if the Customer ID exists in the database.

  1. Tap the Customer ID field and tap the Edit Rules icon. The Rule Editor window opens.

  2. Tippen Sie auf das Symbol + Erstellen, um eine Regel hinzuzufügen. Es öffnet den visuellen Editor.

    In the Visual Editor, the WHEN statement is selected by default. Also, the form object (in this case, Customer ID) from where you launched the rule editor is specified in the WHEN statement.

  3. Tap the Select State drop-down and select is changed.

    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. Replace the guidelib.dataIntegrationUtils.executeOperation (operationInfo, inputs, outputs) section with the following 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