Erscheinungsbild
Logic Flow
Mit dem Logic Flow implementieren Sie Frontend-Logik direkt im Mobile Builder. Ein Logic Flow wird bei einem definierten Event ausgeführt, das von der Eltern-Komponente abhängt – ein Input hat andere Events als ein Button.
Innerhalb eines Logic Flows verketten Sie Funktionsbausteine, sodass mehrere Frontend-Funktionen sequenziell ausgeführt werden. Zwischenwerte legen Sie in Variablen ab und lesen sie an späterer Stelle wieder aus.
Eine Funktionskette pro Logic Flow
Ein Logic Flow kann nur eine Funktionskette beinhalten. Wird previousFunction = "Start" mehrfach in demselben Logic Flow verwendet, wird die im View-Tree weiter oben stehende Funktion zuerst ausgeführt – die unteren werden ignoriert.
Mögliche Eltern-Komponenten
Ein Logic Flow lässt sich an folgende Komponenten hängen:
- Input
- Button
- Segmented Button / Segmented Button Item
- Step Input
- Time Picker
- TextArea
- CheckBox
- ComboBox
- RadioButtonGroup
- List
- Table
- Grid Table
- Icon
- Image
- Link
- Switch
- Tag
- Tile, Tile Image / Icon, Tile Feed Content, Tile Numeric Content, Numeric Content
- MsgStrip
- IconTabBar
Attribute
| Attribut | Beschreibung |
|---|---|
controlType | Typ des Controls – hier standardmäßig LogicFlow. |
flowId | Automatisch generierte ID des Logic Flows. |
event | Event, bei dem der Logic Flow ausgeführt werden soll. Die verfügbaren Events hängen vom Typ der Eltern-Komponente ab. |
Funktionsweise (Beispiel)
Wir betrachten eine View mit einem Input und einem Label. Ziel: Den Wert aus dem Input live im Label anzeigen, sobald der Input-Text sich ändert.
1. Logic Flow zur Komponente ziehen
Den Logic Flow per Drag-and-Drop auf die gewünschte Komponente ziehen. Im Beispiel auf das Input – dort soll der Flow ausgelöst werden.
2. Event auswählen
Im Logic Flow das Event setzen, bei dem ausgeführt werden soll. Im Beispiel LiveChange.
3. Funktionsbausteine hinzufügen
Per Drag-and-Drop die nötigen Bausteine in den Logic Flow ziehen. Für das Beispiel:
| Baustein | Zweck |
|---|---|
| GetProperty | Liest den value des Inputs |
| Variable | Speichert den ausgelesenen Wert zwischen |
| SetProperty | Schreibt den Wert in das text-Property des Labels |
4. Reihenfolge bestimmen
Die Bausteine im Logic Flow verkettet man über previousFunction und nextFunction:
| Baustein | previousFunction | nextFunction | Eigene Felder |
|---|---|---|---|
| GetProperty | Start | setter | control (Input-ID), property = value, variable = Name der Variable |
| SetProperty | getter | End | control (Label-ID), property = text, variable = Name der Variable |
Die Variable selbst hat keine Position in der Kette – sie wird nur über ihren Namen referenziert.
Die Logik verfolgen
In der Browser-Konsole (in Chrome F12) sehen Sie zur Laufzeit, in welcher Reihenfolge die Funktionen ausgeführt werden und welche Werte Variablen annehmen. Die Ausgaben erscheinen nur, wenn die App mit dem URL-Parameter debug=true aufgerufen wird: Die Designer-Vorschau setzt ihn automatisch, bei einer gebauten App hängen Sie ihn bei Bedarf selbst an die URL.
Die Diagnose-Ausgaben nennen die functionId der jeweiligen Funktion, sodass Sie die Ausführungskette nachvollziehen können.
Nächste Schritte
- Funktionsbausteine – vollständige Attributliste pro Baustein
- Validatoren – ergänzende Eingabeprüfung
- Backend-Anbindung – Event-Methoden – Alternative für komplexere Logik