Erweiterte Logik

The Logic tab of the Form Designer allows you to create conditions and advanced logic scripts that can change the state or the behavior of the selected form component.

Mit erweiterter Logik können Sie die Steuerelemente, das Aussehen und das Verhalten einer Formularkomponente dynamisch ändern.

Eine Formularlogik besteht aus zwei Teilen: dem Trigger und der Aktion.

Trigger Der Logik-Trigger ist die Bedingung, aufgrund der die Aktion ausgeführt wird. Beispielsweise möchten Sie ein bestimmtes Formularfeld nur anzeigen, wenn eine Kontrollkästchenoption aktiviert ist. In diesem Fall ist die Kontrollkästchenoption der Trigger und das Anzeigen des Formularfelds die Aktion.

Es gibt vier Arten von Logiktriggern:

Triggertyp	Beschreibung	Beispiel
Simple	Sie definieren eine auslösende Formularkomponente und einen Wert.
Javascript	Sie geben eine JavaScript-Logik für eine Formularkomponente oder Formulardaten an. Verwenden Sie die JavaScript-Syntax, um komplexe Logik zu erstellen, z. B. Schleife oder dynamisches Verhalten.
JSON-Logik	Sie geben eine JSON-Logik für eine Formularkomponente oder Formulardaten an. Empfohlen für Fälle, in denen JavaScript nicht zulässig ist. Schleifen oder dynamisches Verhalten können nicht unterstützt werden.
Ereignis (Event)	Sie definieren ein Komponentenereignis, das, sobald es von der entsprechenden Komponente ausgegeben wurde, die gewünschte Aktion auslöst.

Aktion

Die logische Aktion ist das Verhalten der Formularkomponente, das basierend auf den von Ihnen festgelegten logischen Bedingungen (z. B. dem Trigger) erfolgen soll. Sie können beispielsweise eine Schaltfläche für Benutzer eines bestimmten Alters aktivieren. In diesem Fall ist die Altersgruppe der Auslöser und das Aktivieren der Schaltfläche die Aktion.

Es gibt vier Arten von Logikaktionen:

Aktionstyp	Beschreibung	Beispiel
Eigenschaften	Der Trigger ändert eine der verfügbaren Komponenteneigenschaften, z. B. Tooltip, Beschreibung, CSS-Klasse usw. Die verfügbaren Eigenschaften hängen vom Typ der auslösenden Komponente ab.
Wert	Der Trigger ändert den Wert der entsprechenden Komponente. Die Aktion muss mit der JavaScript-Syntax definiert werden.
Komponentenschema zusammenführen	Der Trigger ändert die Schemaparameter der Komponente, die in der JSON-Datei der Komponente zu finden sind. Um die Schemaparameter anzuzeigen, die Sie ändern können, zeigen Sie mit der entsprechenden Komponente auf die entsprechende Komponente und klicken Sie auf JSON bearbeiten. Sie können mehrere Parameter in einer Aktion ändern.
Benutzerdefinierte Aktion	Sie definieren eine benutzerdefinierte Aktion mithilfe von JavaScript-Syntax, genauso wie Sie den JavaScript-Triggertyp definieren würden.

Tutorial

So konfigurieren Sie eine erweiterte Logik:

1. Öffnen Sie den Formular-Designer in der Aktivität Formular erstellen.
2. Ziehen Sie Komponenten per Drag-and-drop in Ihr Formular. Achten Sie auf deren Feldschlüssel, da Sie diese in Ihrer erweiterten Logik verwenden können.
3. Navigate to the Logic tab of the component you want to change (i.e., the component upon which the action should take place).
4. Click +Add Logic. You can add as many logics as you want.
5. Geben Sie einen Namen für Ihre Logik ein.
6. In the Trigger pane, select the type of trigger you want to use in your logic. The available types are Simple, Javascript, JSON Logic, and Event. Set the desired conditions to trigger the action.
7. In the Action pane, click +Add Action. You can add as many actions as you want, all triggered by the logic that groups them.
8. Geben Sie einen Namen für Ihre Aktion ein.
9. Select the type of action you want to use. The available types are Property, Value, Merge Component Schema, and Custom Action. Set the desired effect of your action.
10. When you are all set, click Save Action.
11. To save your logic, click Save Logic.

Das obige Verfahren gilt allgemein für jeden Trigger- oder Aktionstyp. Ein detailliertes Verfahren finden Sie in den spezifischen Tutorials, die Beispiele für die einzelnen Trigger- und Aktionstypen enthalten.

• Triggertyp: Javascript und Aktionstyp: Wert Dynamische Summe von zwei Textfeldern
• Triggertyp: Einfach und Aktionstyp: Eigenschaft Dynamisches Ausblenden eines Felds
• Triggertyp: Einfach und Aktionstyp: Zusammenführen Komponentenschema Dynamisches Ändern der Titelfarbe
• Triggertyp: Ereignis- und Aktionstyp: Benutzerdefinierte Aktion Festlegen eines Formularfelds auf den Standardwert mithilfe von Ereignissen
• Triggertyp: JSON Logik- und Aktionstyp: Eigenschaft Anzeigen einer Komponente basierend auf Benutzereingaben

Dynamisches Summieren von zwei Textfeldern

Triggertyp: JavaScript- Aktionstyp: Wert

Diese erweiterte Logik fasst zwei Textfelder basierend auf der Bedingung zusammen, dass der Benutzer mit den entsprechenden Textfeldern interagiert.

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

2. Drag and drop three Text Field components into your form.

3. Nennen Sie zwei der Textfeldkomponenten als A und Bund die dritte als Total. Achten Sie auf deren Feldschlüssel, wenn Sie diese in Ihrer erweiterten Logik verwenden.

   Optional können Sie die Textfeldkomponente Total als Deaktiviert festlegen, sodass Geschäftsanwender nicht mit ihr interagieren können.

4. Go to the Logic tab of the Total field component.

5. Fügen Sie eine Logik hinzu und nennen Sie sie „dynamische Summe“.

6. Select the Javascript trigger type, and enter the following script in the Text Area section:

   result = true;
   return result;
   

   Das obige Snippet erkennt Änderungen in den Textfeldern, d. h. der Benutzer interagiert mit den Textfeldern, und löst die Actions aus, um die Felder zu addieren.

7. Fügen Sie eine Aktion hinzu und nennen Sie sie „a+b“.

8. Select the Value action type, and enter the following script in the Value (Javascript) section:

   result = (+data.a) + (+data.b);
   return result;
   

   Ersetzen Sie a und b durch die Feldschlüsselwerte der Textfeldkomponenten.

9. Speichern Sie die Aktion und die Logik.

10. Speichern Sie die Komponente.

Wenn der Geschäftsbenutzer zur Laufzeit mit den Textfeldern A und Binteragiert, wird das Feld Total automatisch ausgefüllt und zeigt die Summe von A und B an.

Ein Feld dynamisch ausblenden

Triggertyp: Einfacher Aktionstyp: Eigenschaft

Diese erweiterte Logik blendet ein Formularfeld (z. B. Child field) aus, wenn der Benutzer „hide“ in ein anderes Formularfeld (z. B. Parent field) eingibt.

1. Öffnen Sie den Formular-Designer in der Aktivität Formular erstellen.
2. Drag and drop two Text Field components.
3. Benennen Sie eine der Textfeldkomponenten als Parent fieldund die andere als Child field. Achten Sie auf deren Feldschlüssel, wenn Sie diese in Ihrer erweiterten Logik verwenden.
4. Go to the Logic tab of the Child field component.
5. Fügen Sie eine Logik hinzu und nennen Sie sie „Eingabe ausblenden“.
6. Select the Simple trigger type.
   1. Wählen Sie im Dropdown-Menü Wenn die Formularkomponente die Option Parent field ({parentField_field_key}) aus.
   2. Geben Sie im Feld Hat der Wert „hide“ ein. Die obige Konfiguration erkennt, ob der Benutzer die Zeichenfolge „hide“ in das übergeordnete Feld eingegeben hat und löst die Aktion zum Ausblenden des untergeordneten Felds aus.
7. Fügen Sie eine Aktion hinzu und nennen Sie sie „hide“.
8. Select the Property action type.
   1. Wählen Sie im Dropdownmenü Komponenteneigenschaft die Option Ausgeblendet aus .
   2. Wählen Sie im Dropdown-Menü Status festlegen die Option True aus .
9. Speichern Sie die Aktion und die Logik.
10. Speichern Sie die Komponente.

Wenn der Geschäftsbenutzer zur Laufzeit „hide“ in das übergeordnete Feld eingibt, wird das untergeordnete Feld ausgeblendet.

Dynamisches Ändern der Titelfarbe

Triggertyp: Einfach Aktionstyp: Komponentenschema zusammenführen

Diese erweiterte Logik ändert die Beschriftungsfarbe einer Textfeldkomponente, wenn der Benutzer die gewünschte Farbe aus einer Liste auswählt. Die Änderung wird mithilfe einer benutzerdefinierten CSS-Datei angewendet.

Voraussetzungen:

Create a CSS file containing the new color for the text field label and reference it in the Create Form activity, in the LocalCSSFilePath activity property.

Das folgende CSS-Snippet enthält beispielsweise eine Klasse, die die Beschriftungsfarbe auf Grün oder Rot festlegt:

.textFieldLabel-green 
{
   color : green;
}
.textFieldLabel-red 
{
   color : red;
}

Nachdem Sie in den Eigenschaften zum Erstellen von Formularen auf die CSS-Datei verwiesen haben, entwerfen Sie Ihr Formular mit den folgenden Schritten:

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

2. Drag and drop one Text Field component and one Radio component. Pay attention to their field keys, as you use those in your advanced logic.

3. Legen Sie auf der Registerkarte Anzeige der Textfeldkomponente eine standardmäßige benutzerdefinierte CSS-Klasse fest. Um beispielsweise Rot als Standardfarbe des Textfelds festzulegen, verwenden Sie die Klasse textFieldLabel-red . Die Klasse muss in der CSS-Datei aus den oben dokumentierten Voraussetzungen definiert werden.

   

4. For the Radio component, add two values for the colors green and red.

5. Go to the Logic tab of the Text Field component.

6. Fügen Sie eine Logik hinzu und nennen Sie sie „Farbauswahl“.

7. Select the Simple trigger type.

   1. Wählen Sie im Dropdown-Menü Wenn die Formularkomponente die Option Radio ({radio_field_key}) aus.
   2. Geben Sie im Feld Hat der Wert „ green“ ein. Die obige Konfiguration erkennt, ob der Benutzer in den Optionsfeldern „ grün“ auswählt, und löst die Aktion zur Änderung der Farbe der Textfeldbeschriftung aus.

8. Fügen Sie eine Aktion hinzu und nennen Sie sie „Farbe mit CSS ändern“.

9. Select the Merge Schema Component action type and enter the following snippet:

   return { customClass: "textFieldLabel-green" }
   

10. Speichern Sie die Aktion und die Logik.

11. Speichern Sie die Komponente.

Wenn der Geschäftsbenutzer zur Laufzeit das Optionsfeld „grün“ auswählt, wird die Beschriftung des Textfelds grün. Wenn der Benutzer das „rote“ Optionsfeld auswählt, wird die Beschriftung des Textfelds rot.

Festlegen eines Formularfelds auf Standard mithilfe von Ereignissen

Triggertyp: Ereignisaktionstyp : Benutzerdefinierte Aktion

Diese erweiterte Logik ändert den Inhalt eines Textfelds, wenn der Benutzer auf eine Schaltfläche klickt. Die Schaltfläche gibt ein Ereignis aus, auf dessen Grundlage sich der Inhalt des Textfelds in einen Standardtext ändert.

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

2. Drag and drop one Text Field component and one Button component. Pay attention to the components field keys, as you use those in your advanced logic.

3. Auf der Registerkarte Anzeige der Schaltflächenkomponente:

   1. Die Schaltflächenkomponente als Change value to "Default"
   2. Legen Sie die Schaltflächenaktion als Klicken fest.
   3. Aktivieren Sie das Kontrollkästchen Für lokale Aktualisierung verwenden.
   4. Geben Sie das folgende Snippet in den Abschnitt Datenlogik aktualisieren ein. Dadurch wird das Ereignis mit dem Namen resetTextField jedes Mal ausgegeben, wenn der Benutzer auf die Schaltfläche klickt.

      instance.emit('resetTextField', {});
      

   5. Speichern Sie die Schaltflächenkomponente.

4. Go to the Logic tab of the text field component.

5. Fügen Sie eine Logik hinzu, und nennen Sie sie „reset“.

6. Select the Event trigger type.

7. In the Event Name field, enter the name of the event emitted when clicking the button. (i.e., resetTextField).

   Die obige Konfiguration erkennt, wenn der Benutzer auf die Schaltfläche Change value to "Default" klickt, und ersetzt den vorhandenen Inhalt des Textfelds durch „Standard“.

8. Fügen Sie eine Aktion hinzu und nennen Sie sie „Standard“.

9. Select the Custom Action action type.

10. Input the following snippet in the Custom Action (Javascript) section.

    return "Default"
    

11. Speichern Sie die Aktion und die Logik.

12. Speichern Sie die Komponente.

Wenn der Geschäftsbenutzer zur Laufzeit auf die Schaltfläche Change value to "Default" klickt, wird das Ereignis resetTextField ausgegeben. Der Trigger überwacht das Ereignis und ersetzt den vorhandenen Textfeldinhalt durch „Standard“.

Anzeigen einer Komponente basierend auf Benutzereingaben

Triggertyp: JSON-Logik Aktionstyp: Eigenschaft

Diese erweiterte Logik zeigt den Inhalt einer HTML-Komponente (in diesem Fall ein Bild) an, wenn der Benutzer den erforderlichen Text eingibt.

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

2. Drag and drop one Text Field component and one HTML Element component. Pay attention to the components field keys, as you use those in your advanced logic.

3. In the Display tab of the text field component:

   1. Beschriften Sie die Textfeldkomponente als „Typ „Anzeigen““.
   2. Fügen Sie die Beschreibung „Muss eine exakte Übereinstimmung sein (Groß-/Kleinschreibung wird beachtet)“ hinzu, um Benutzern anzugeben, dass sie den Text nach Bedarf eingeben müssen.
   3. Speichern Sie die Textfeldkomponente.

4. In the Display tab of the HTML element component:

   1. Verweisen Sie im Abschnitt Inhalt auf das Bild, das Sie anzeigen möchten. Zum Beispiel: <img href="https://picsum.photos/200/300" />.
   2. Aktivieren Sie das Kontrollkästchen Ausgeblendet , um das Bild standardmäßig auszublenden.
   3. Speichern Sie die HTML-Elementkomponente.

5. Go to the Logic tab of the HTML element component.

6. Fügen Sie eine Logik hinzu und nennen Sie sie „Benutzereingabe“.

7. Select the JSON Logic trigger type.

8. Input the following snippet in the JSON Logic section, and replace {text_field_component_field_key} with the field key value you set for your text field component.

   {
     "===": [
       {
         "var": "data.{text_field_component_field_key}"
       },
       "Show me"
     ]
   }
   

   The above configuration detects when the user inputs "Show me" and only then sets the value of the HTML element Hidden property to False, thus displaying the corresponding HTML content.

9. Fügen Sie eine Aktion hinzu und nennen Sie sie „Bild anzeigen“.

10. Select the Property action type.

    1. Wählen Sie im Dropdownmenü Komponenteneigenschaft die Option Ausgeblendet aus .
    2. Wählen Sie im Dropdown-Menü Status festlegen die Option False aus.

11. Speichern Sie die Aktion und die Logik.

12. Speichern Sie die Komponente.

Wenn der Benutzer zur Laufzeit den erforderlichen Text in das Textfeld eingibt, zeigt das Formular den HTML-Inhalt an.

Beispielworkflow

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