Bedingte Komponenten

Auf der Registerkarte Bedingt im Formular-Designer können Sie Bedingungen für Komponenten in Ihrem Formular platzieren, um sie auszublenden oder anzuzeigen.

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. Diese Komponente sollte angezeigt werden. Wählen Sie in dieser Dropdownliste Folgendes aus:

   • True , wenn Sie die Anzeige der Komponente bedingen möchten.
   • False , wenn Sie das Ausblenden der Komponente bedingen möchten.
2. Wenn die Formularkomponente – Wählen Sie aus dieser Dropdownliste eine Komponente im Formular aus, die als Bedingung fungieren soll.

3. Hat den Wert – Geben Sie den Wert ein, der bestimmt, wann die Komponente angezeigt oder ausgeblendet werden soll.

   
   

   

   
   

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.

Der Show- Variablen muss der Wert „ true “ oder „ false “ zugewiesen werden. Die Datenvariable wird verwendet, um über den API-Schlüssel auf andere Komponenten im Formular zuzugreifen.

Tutorial

Einfache Bedingungen

So konfigurieren Sie eine einfache Bedingungslogik:

1. Öffnen Sie den Formular-Designer in der Aktivität Formular erstellen .

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

   1. Zwei Checkbox- Komponenten 2.2. One Number -Komponente 2.3. Eine Textfeldkomponente .

      Achten Sie auf die Feldschlüssel jeder Komponente. Sie benötigen sie, um Ihre bedingte Logik zu erstellen.
3. Navigieren Sie zur Registerkarte Bedingt der Komponente Textfeld , und wechseln Sie zum Abschnitt Einfach .
   1. Diese Komponente sollte angezeigt werden – wählen Sie „ True “ aus der Dropdownliste aus. Dadurch wird die Bedingung erstellt, unter der die Textfeldkomponente angezeigt wird. Wenn Sie die Komponente ausblenden möchten, wählen Sie False 3.2 aus. Wenn die Formularkomponente – Wählen Sie die Zahlkomponente aus der Dropdownliste aus.
   2. Hat den Wert – Geben Sie den Wert der Number-Komponente ein, die das Textfeld für die Anzeige bestimmt. 4. Speichern Sie die Komponente.

Erweiterte Bedingungen

So konfigurieren Sie eine erweiterte Bedingungslogik:

1. Öffnen Sie den Formular-Designer in der Aktivität Formular erstellen .

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

   1. Zwei Checkbox- Komponenten 2.2. One Number -Komponente 2.3. Eine Textfeldkomponente .

      Achten Sie auf die Feldschlüssel jeder Komponente. Sie benötigen sie, um Ihre bedingte Logik zu erstellen.
3. Navigieren Sie zur Registerkarte Bedingt der Komponente Zahl .
4. Klicken Sie auf Erweiterte Bedingungen und wechseln Sie zum Abschnitt JavaScript.
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 in diesem Beispiel die Number -Komponente anzuzeigen, können Sie dieses Skript 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. Um die Number -Komponente in diesem Beispiel auszublenden, können Sie dieses Skript eingeben:

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

7. 7. Speichern Sie die Komponente.

Beispielworkflow

Um den vollständigen Workflow zu überprüfen oder eine zukünftige Referenz zu haben, laden Sie das XAML-Beispielherunter