Bedingte Komponenten

The Conditional tab in the Form Designer allows you to place conditions on components in your form, in order to hide or display them.

Die Registerkarte Bedingt besteht aus zwei Abschnitten:

• Simple
• Erweiterte Bedingungen

Einfache Bedingungen

Im Abschnitt „Einfach“ der Registerkarte „Bedingt“ können Sie eine Komponente basierend auf dem Wert einer anderen Komponente ausblenden oder anzeigen.

Der Abschnitt „Einfach“ besteht aus drei Feldern:

1. This component should Display - from this dropdown list, choose:

   • True if you want to condition when the component displays.
   • False if you want to condition when the component hides.

2. When the form component - from this dropdown list, choose a component in the form to act as a condition.

3. Has the value - type in the value that conditions the component when to display or hide.

   

Erweiterte Bedingungen

Im Abschnitt Erweiterte Bedingungen können Sie JavaScript-Code verwenden, um Kombinationen von Bedingungen zu erstellen.

Die erweiterte Logik überschreibt die Ergebnisse der einfachen bedingten Logik.

Geben Sie im Abschnitt JavaScript-Code einen benutzerdefinierten JavaScript-Code ein.

The show variable must be given a true or false value. The data variable is used to access other components in the form, through the API key.

Tutorial

Einfache Bedingungen

So konfigurieren Sie eine einfache Bedingungslogik:

1. Open the Form Designer in the Create Form activity.
2. Ziehen Sie Komponenten per Drag-and-drop in Ihr Formular. Ziehen Sie für dieses Beispiel Folgendes per Drag & Drop:
   1. Zwei Kontrollkästchenkomponenten .
   2. Komponente mit einer Zahl .
   3. Eine Textfeld- Komponente. Achten Sie auf die Feldschlüssel jeder Komponente. Sie benötigen sie, um Ihre bedingte Logik zu erstellen.
3. Navigate to the Conditional tab of the Text Field component and go to the Simple section.
   1. Diese Komponente sollte anzeigen – Wählen Sie „True“ aus der Dropdownliste aus. Dadurch wird die Bedingung erstellt, unter der die Komponente Textfeld angezeigt wird. Wenn Sie die Komponente ausblenden möchten, wählen Sie False aus.
   2. Bei der Formularkomponente – Wählen Sie die Komponente Nummer aus der Dropdownliste aus.
   3. Hat den Wert – Geben Sie den Wert der Zahlenkomponente ein, die das anzuzeigende Textfeld bestimmt.
4. Speichern Sie die Komponente.

Erweiterte Bedingungen

So konfigurieren Sie eine erweiterte Bedingungslogik:

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

2. Ziehen Sie Komponenten per Drag-and-drop in Ihr Formular. Ziehen Sie für dieses Beispiel Folgendes per Drag & Drop:

   1. Zwei Kontrollkästchenkomponenten .
   2. Komponente mit einer Zahl .
   3. Eine Textfeld- Komponente. Achten Sie auf die Feldschlüssel jeder Komponente. Sie benötigen sie, um Ihre bedingte Logik zu erstellen.

3. Navigate to the Conditional tab of the Number component.

4. Click Advanced Conditions and go to the JavaScript section.

5. Wenn Sie eine Bedingung erstellen möchten, verwenden Sie die Variable show und weisen Sie ihr eine Bedingung mit dem Gleichheitszeichen = zu. Verwenden Sie die Variable data.field_key_component , um auf die Daten in anderen Formularkomponenten zuzugreifen. Um die Komponente Zahl anzuzeigen, können Sie in diesem Skript Folgendes eingeben:

   show = (data.checkbox1 === true && data.checkbox === true)
   

   Wenn Sie eine Komponente unter einer Bedingung ausblenden möchten, setzen Sie ein Ausrufezeichen ! nach dem Gleichheitszeichen = und vor der Bedingung.

6. For this example, to hide the Number component, you can type in this script:

   show = !(data.checkbox1 === true && data.checkbox === true)
   

7. Speichern Sie die Komponente.

Beispielworkflow

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