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 adaptives Formulars. 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 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-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
  • Aufrufen eines Formulardatenmodelldienstes, 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 retrieve-customer-record

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. Wählen Sie die Kunden-ID und wählen Sie die Regeln bearbeiten Symbol. Das Fenster „Regeleditor“ wird geöffnet.

  3. Wählen Sie die + 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. Wählen Sie die Status auswählen und wählen Sie geändert wird.

    whencustomeridischanged

  5. Im THEN Anweisung, auswählen Aufrufdienst aus dem Aktion auswählen angezeigt.

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

  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

    Auswählen Fertig , um die Regel zu speichern. Wählen Sie im Fenster des Regeleditors 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: Hinzufügen der aktualisierten Kundenadresse zur Datenbank updated-customer-address

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 die Einsenden und wählen Sie die Regeln bearbeiten Symbol. Das Fenster „Regeleditor“ wird geöffnet.

  2. Wählen Sie die Submit - Click und wählen Sie die Bearbeiten Symbol. 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 auswählen, wählen Sie die + Anweisung hinzufügen -Option. Auswählen Aufrufdienst aus dem Aktion auswählen angezeigt.

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

    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. Auswählen Fertig , um die Regel zu speichern. Wählen Sie im Fenster des Regeleditors 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: (Abschnitt "Bonus") Verwenden Sie den Code-Editor, um Überprüfungen auszuführen und Fehlermeldungen anzuzeigen. step-bonus-section-use-the-code-editor-to-run-validations-and-display-error-messages

Sie sollten eine Validierung für das Formular durchführen, um sicherzustellen, dass die im Formular eingegebenen Daten korrekt sind und eine Fehlermeldung angezeigt wird, wenn falsche Daten vorliegen. 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. Wählen Sie die Kunden-ID und wählen Sie die Edit Rules Symbol. Das Fenster Regeleditor wird geöffnet.

  2. Wählen Sie die + 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. Wählen Sie die Status auswählen und wählen Sie geändert wird.

    whencustomeridischanged

    Im THEN Anweisung, auswählen Aufrufdienst aus dem Aktion auswählen angezeigt.

  4. Zwischen Visual Editor nach Code-Editor. Die Umschalttaste befindet sich rechts im Fenster. 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