Erweiterte Logik

Auf der Registerkarte Logik des Formular-Designers können Sie Bedingungen und erweiterte Logikskripts erstellen, die den Status oder das Verhalten der ausgewählten Formularkomponente ändern können.

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 logische Trigger ist die Bedingung, unter der die Actions ausgeführt werden. Möglicherweise möchten Sie beispielsweise ein bestimmtes Formularfeld nur anzeigen, wenn eine Kontrollkästchenoption ausgewählt ist. In diesem Fall ist die Kontrollkästchenoption der Trigger, und das Anzeigen des Formularfelds ist die Actions.

Es gibt vier Arten von Logiktriggern:

Triggertyp	Beschreibung	Beispiel
Simple	Sie definieren eine auslösende Formularkomponente und einen Wert.
Javascript	Sie stellen eine JavaScript-Logik für eine Formularkomponente oder Formulardaten bereit. Verwenden Sie die JavaScript-Syntax, um komplexe Logik zu erstellen, z. B. Schleifen- oder dynamisches Verhalten.
JSON-Logik	Sie stellen eine JSON-Logik für eine Formularkomponente oder Formulardaten bereit. Empfohlen in Fällen, in denen JavaScript nicht zulässig ist. Schleifen oder dynamische Verhaltensweisen 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 JavaScript-Syntax definiert werden.
Komponentenschema zusammenführen	Der Trigger ändert die Komponentenschemaparameter, die in der Komponenten-JSON gefunden werden. Um die Schemaparameter anzuzeigen, die Sie ändern können, zeigen Sie mit der Maus auf die entsprechende Komponente und klicken Sie auf JSON bearbeiten. Sie können mehrere Parameter innerhalb 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. Navigieren Sie zur Registerkarte Logik der Komponente, die Sie ändern möchten (d. h. der Komponente, für die die Actions stattfinden sollen).
4. Klicken Sie auf +Logik hinzufügen. Sie können beliebig viele Logiken hinzufügen.
5. Geben Sie einen Namen für Ihre Logik ein.
6. Wählen Sie im Bereich Trigger den Triggertyp aus, den Sie in Ihrer Logik verwenden möchten. Die verfügbaren Typen sind Simple, Javascript, JSON Logicund Event. Legen Sie die gewünschten Bedingungen fest, um die Aktion auszulösen.
7. Klicken Sie im Bereich Actions auf + Actions. Sie können beliebig viele Actions hinzufügen, die alle von der Logik ausgelöst werden, die sie gruppiert.
8. Geben Sie einen Namen für Ihre Aktion ein.
9. Wählen Sie den Aktionstyp aus, den Sie verwenden möchten. Die verfügbaren Typen sind Eigenschaft, Wert, Komponentenschema zusammenführenund benutzerdefinierte Aktion. Legen Sie den gewünschten Effekt Ihrer Aktion fest.
10. Wenn Sie fertig sind, klicken Sie auf Actionsspeichern.
11. Um Ihre Logik zu speichern, klicken Sie auf Logik speichern.

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.

• Trigger-Typ: JavaScript und Actions : Wert Dynamisches Summieren von zwei Textfeldern
• Trigger-Typ: Einfach und Actions : Eigenschaft Dynamisches Ausblenden eines Felds
• Trigger-Typ: Einfach und Aktionstyp: Zusammenführen Komponentenschema Dynamisches Ändern der Actions
• Trigger-Typ: Ereignis- und Aktionstyp: Benutzerdefinierte Aktion Festlegen eines Formularfelds auf Standardwert mithilfe von Ereignissen
• Trigger-Typ: JSON Logik und Actions : 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. Ziehen Sie drei Textfeldkomponenten in Ihr Formular.
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 Deaktiviertfestlegen, sodass Geschäftsbenutzer nicht damit interagieren können.
4. Wechseln Sie zur Registerkarte Logik der Feldkomponente Total .
5. Fügen Sie eine Logik hinzu und nennen Sie sie „dynamische Summe“.

6. Wählen Sie den JavaScript- Triggertyp aus und geben Sie das folgende Skript im Abschnitt Textbereich ein:

   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. Wählen Sie den Aktionstyp Wert aus, und geben Sie das folgende Skript im Abschnitt Wert (Javascript) ein:

   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

Trigger-Typ: Einfach Actions : 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. Ziehen Sie zwei Textfeldkomponenten und legen Sie sie ab.
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. Wechseln Sie zur Registerkarte Logik der Komponente Child field .
5. Fügen Sie eine Logik hinzu und nennen Sie sie „Eingabe ausblenden“.

6. Wählen Sie den Triggertyp Einfach aus.

   6.1 Wählen Sie im Dropdown-Menü Wenn die Formularkomponente die Option Parent field ({parentField_field_key})aus.

   6.2 Geben Sie im Feld Hat den Wert „hide“ ein.

   Die obige Konfiguration erkennt, ob der Benutzer die Zeichenfolge „hide“ in das übergeordnete Feld eingibt, und löst die Aktion aus, um das untergeordnete Feld auszublenden.

7. Fügen Sie eine Aktion hinzu und nennen Sie sie „hide“.

8. Wählen Sie den Eigenschaftsaktionstyp aus.

   8.1 Wählen Sie im Dropdown-Menü Komponenteneigenschaft die Option Ausgeblendetaus.

   8.2 Wählen Sie im Dropdown-Menü Status festlegen die Option Trueaus.

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

Trigger-Typ: Einfach Actions : 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:

Erstellen Sie eine CSS-Datei, die die neue Farbe für die Textfeldbeschriftung enthält, und verweisen Sie in der Aktivität Create Form in der Eigenschaft LocalCSSFilePath darauf .

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. Ziehen Sie eine Textfeldkomponente und eine Radiokomponente per Drag & Drop. Achten Sie auf deren Feldschlüssel, wenn Sie diese in Ihrer erweiterten Logik verwenden.
3. Legen Sie auf der Registerkarte Anzeige der Textfeldkomponente eine standardmäßige benutzerdefinierte CSS-Klassefest. Um beispielsweise Rot als Standardfarbe für das Textfeld festzulegen, verwenden Sie die textFieldLabel-red -Klasse. Die Klasse muss in der CSS-Datei anhand der oben dokumentierten Voraussetzungen definiert werden.
   
   

   

   
   
4. Für die Komponente Radio fügen Sie zwei Werte für die Farben green und redhinzu.
5. Wechseln Sie zur Registerkarte Logik der Komponente Textfeld .
6. Fügen Sie eine Logik hinzu und nennen Sie sie „Farbauswahl“.

7. Wählen Sie den Triggertyp Einfach aus.

   7.1 Wählen Sie im Dropdown-Menü Wenn die Formularkomponente die Option Radio ({radio_field_key})aus.

   7.2 Geben Sie im Feld Hat den Wert „grün“ ein.

   Die obige Konfiguration erkennt, ob der Benutzer „Grün“ aus den Optionsfeldern auswählt, und löst die Aktion aus, um die Farbe der Textfeldbeschriftung zu ändern.

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

9. Wählen Sie den Aktionstyp Schemakomponente zusammenführen aus und geben Sie das folgende Snippet ein:

   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: Ereignis Aktionstyp: 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. Ziehen Sie eine Textfeldkomponente und eine Schaltflächenkomponente per Drag & Drop. Achten Sie auf die Komponentenfeldschlüssel, wenn Sie diese in Ihrer erweiterten Logik verwenden.

3. Auf der Registerkarte Anzeige der Schaltflächenkomponente:

   3.1. Beschriften Sie die Schaltflächenkomponente als Change value to "Default"

   3.2. Actions als Klick festlegen

   3.3. Aktivieren Sie das Kontrollkästchen Für lokales Update verwenden.

   3.4 Geben Sie das folgende Snippet im Abschnitt Datenlogik aktualisieren ein. Dadurch wird jedes Mal das Ereignis resetTextField ausgegeben, wenn der Benutzer auf die Schaltfläche klickt.

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

   3.5. Speichern Sie die Schaltflächenkomponente.

4. Wechseln Sie zur Registerkarte Logik der Textfeldkomponente.
5. Fügen Sie eine Logik hinzu, und nennen Sie sie „reset“.
6. Wählen Sie den Ereignistriggertyp aus.
7. Geben Sie im Feld Ereignisname den Namen des Ereignisses ein, das beim Klicken auf die Schaltfläche ausgegeben wird. (d. h. 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. Wählen Sie den Aktionstyp Benutzerdefinierte Actions Actions .

10. Geben Sie das folgende Snippet in den Abschnitt Benutzerdefinierte Aktion (Javascript) ein.

    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

Trigger-Typ: JSON Logik Actions : 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. Ziehen Sie eine Textfeldkomponente und eine HTML-Elementkomponente per Drag & Drop. Achten Sie auf die Komponentenfeldschlüssel, wenn Sie diese in Ihrer erweiterten Logik verwenden.

3. Auf der Registerkarte Anzeige der Textfeldkomponente:

   3.1. Beschriften Sie die Textfeldkomponente mit „Type „Show Me““.

   3.2. Fügen Sie die Beschreibung „Muss eine genaue Übereinstimmung sein (Groß-/Kleinschreibung beachten)“ hinzu, um anzugeben, dass Benutzer den Text wie erforderlich eingeben müssen.

   3.3. Speichern Sie die Textfeldkomponente.

4. Auf der Registerkarte Anzeige der HTML-Elementkomponente:

   4.1. Verweisen Sie im Abschnitt Inhalt auf das Bild, das Sie anzeigen möchten. Beispiel: <img href="https://picsum.photos/200/300" />.

   4.2. Aktivieren Sie das Kontrollkästchen Ausgeblendet , um das Bild standardmäßig für die Anzeige auszublenden. 4.3. Speichern Sie die HTML-Elementkomponente.

5. Wechseln Sie zur Registerkarte Logik der HTML-Elementkomponente.
6. Fügen Sie eine Logik hinzu und nennen Sie sie „Benutzereingabe“.
7. Wählen Sie den Triggertyp „ JSON-Logik “ aus.
8. Geben Sie das folgende Snippet im Abschnitt JSON-Logik ein und ersetzen Sie {text_field_component_field_key} durch den Feldschlüsselwert, den Sie für Ihre Textfeldkomponente festgelegt haben.

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

   Die obige Konfiguration erkennt, wenn der Benutzer eingibt „Zeigen“ und erst dann legt der Wert der Ausgeblendete Eigenschaft des HTML-Elements auf False fest, wodurch der entsprechende HTML-Inhalt angezeigt wird.

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

10. Wählen Sie den Eigenschaftsaktionstyp aus.

    10.1. Wählen Sie im Dropdownmenü Komponenteneigenschaft die Option Ausgeblendetaus.

    10.2. Wählen Sie im Dropdownmenü „ Set State “ 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

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