Aktualisieren von Formulardaten

Clicking buttons in forms usually triggered the execution of the Do block. A new functionality called Use for Local Update is available for the Click action of a Button component. It allows you to update the form without executing the Do block.

Tutorial

Im nächsten Tutorial wird erläutert, wie Schaltflächen erstellt werden, um zwischen mehreren Seiten eines Formulars zu navigieren.

1. Open the Form Designer from the Create Form activity.

2. Ziehen Sie mehrere Panel- Komponenten oder andere Komponenten Ihrer Wahl per Drag-and-drop. In diesem Beispiel stellt jede Panel-Komponente eine andere Seite des Formulars dar, auf der unterschiedliche Informationen gesammelt werden.

3. Drag and drop a Hidden component (from the Data category). This is used to track the current panel number.

   Legen Sie in diesem Beispiel die Komponentenbezeichnung als StepId fest. Standardmäßig ist der Feldschlüsselname als stepId festgelegt.

   

4. Navigieren Sie zu jeder Panel- Komponente > Registerkarte Bedingung und legen Sie die Bedingungen für die Anzeige des Panels fest. In diesem Beispiel wird jeder Bereich nur angezeigt, wenn stepId der Bereichsnummer entspricht. Um dies zu erreichen:

   • Wählen Sie im Abschnitt Einfache Bedingungen > Feld Diese Komponente soll anzeigen die Option True aus.

   • Wählen Sie im Feld Wenn die Formularkomponente die Option StepId aus.

   • Geben Sie im Feld Hat der Wert die Nummer des Panels ein (z. B. erstes Panel –1, zweites Panel –2 usw.).

     

5. Inside each Panel component, drag and drop Button components, as follows:

   • For the first panel, add one Button component to navigate to the second panel (e.g, Next Step).
   • For the last panel, add one Button component to navigate to the previous panel (e.g., Prev Step).
   • For the in-between panels, add two Button components: one to navigate to the previous panel, and one to navigate to the next one.

6. Navigate to each button Display tab. Set the button Action to Click. The Use for Local Update checkbox is displayed. This is the feature that allows the navigation between form panels on button click, without executing the Do block.

7. Check the Use for Local Update box. The Update Data Logic code editor is displayed.

8. Verwenden Sie das vordefinierte JavaScript-Snippet und geben Sie die Daten, die Sie aktualisieren möchten, zwischen den geschweiften Klammern ein. Stellen Sie sicher, dass Sie die Feldschlüsselnamen der Formularkomponenten verwenden, die Sie aktualisieren möchten (die in Schritt 3 festgelegten). Das JavaScript-Snippet hat die folgende Vorlage: instance.emit('updateData', {[field_key_name]:[field_key_update_value]});, wobei [field_key_name] den Komponentenfeldschlüssel und [field_key_update_value] den neuen Wert für die Komponente darstellt. In diesem Beispiel verwenden Sie die folgenden Snippets:

   • Für Next Step -Schaltflächen:instance.emit('updateData', {stepId:X});und ersetzen Sie X durch die Nummer des nächsten Panels (z. B. für die Schaltfläche im zweiten Panel verwenden Sie instance.emit('updateData', {stepId:3});)
   • Für Prev Step -Schaltflächen:instance.emit('updateData', {stepId:Y});und ersetzen Sie Y durch die Nummer des vorherigen Panels (z. B. für die Schaltfläche im zweiten Panel verwenden Sie instance.emit('updateData', {stepId:1});)

Beispielworkflow

Laden Sie das XAML-Beispielherunter, um den vollständigen Workflow zu überprüfen oder später darauf zurückgreifen zu können