Schulung: Wenden Sie Regeln auf adaptive Formularfelder an

Suchen
Experience Manager 6.4 Forms Benutzerhandbuch

Auf dieser Seite

Gilt für: Experience Manager 6.3 Forms

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Sie sehen sich Hilfeinhalte der folgenden Version an:

 

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

  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 per Drag-and-Drop von der Registerkarte „Formularobjekte“ in das Feld Objekt hier einfügen oder auswählen im Feld INPUT.

  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 Feld OUTPUT.

    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.

     

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 und tippen Sie auf das Symbol Bearbeiten. Die Optionen zum Bearbeiten der Submit-Regel werden angezeigt.

    In der WHEN-Option sind die Optionen Submit und is clicked bereits ausgewählt.

  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.

     

  5. Ziehen Sie das Feld Versandadresse, Bundesland und Postleitzahl von der Registerkarte „Formularobjekte“ per Drag-and-Drop in die entsprechende Angabe mittablename.property (z. B.customerdetails.shippingAddress) des Drop-Objekts oder wählen Sie das Feld „hier“ im Feld INPUT. Alle Felder mit dem Präfixtablename (Beispiel:customerdetailsin diesem Anwendungsfall) dienen als Eingabedaten für den Update-Service. 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äfixtablename (Beispiel:customerdetailsin diesem Anwendungsfall) dienen als Suchparameter für den Update-Service. Das Feld ID in diesem Anwendungsfall identifiziert einen Datensatz in der customerdetails-Tabelle.

  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, 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 Formulardatenmodelldienstes, um zu überprüfen, ob die Kunden-ID in der Datenbank vorhanden ist.

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

  2. Tippen Sie auf das Symbol + Erstellen, 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. Tippen Sie auf die Dropdown-Liste Status auswählen und wählen Sie wurde geändert.

    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:


  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.