Zuweisung

Überblick

Betrachten Sie die Zuweisungs-Interaktion als einen Befehl, der sagt: „Nehmen Sie diese Variable und ändern Sie ihren Wert auf diese bestimmte Weise.“ Während viele Eingabekomponenten (wie Texteingabe oder Umschalter) eine Variable automatisch durch Datenbindung aktualisieren können, wird die Zuweisungs-Interaktion verwendet, wenn Sie den Wert einer Variable als direkte Folge einer Aktion ändern müssen.

Hauptzweck

• Zustandsverwaltung: Setzen Sie eine Variable, um den Zustand Ihrer Komponente zu steuern (z. B. setzen Sie isPanelVisible auf true wenn ein Button geklickt wird).

• Datenmanipulation: Ändern Sie Daten, die in einer Variable gespeichert sind (z. B. eine Zahl erhöhen, Text an einen String anhängen oder Teile eines Strings ersetzen).

• Zurücksetzen von Werten: Benutzer eingaben einfach löschen oder eine Komponente in ihren Anfangszustand zurücksetzen.

Wann die Zuweisungs-Interaktion verwenden

• Sichtbarkeit umschalten: Bei einem „Anzeigen/Verbergen Details“-Button verwenden Sie Zuweisung, um eine Boolesche Variable zwischen true und false.

• dynamischer Textaufbau: Verketten (Hinzufügen) von Strings in einer Variable als Reaktion auf verschiedene Benutzeraktionen.

• Datenbereinigung: Verwenden Sie replace Operatoren, um Daten, die in einer Variable gespeichert sind, zu formatieren oder zu bereinigen, bevor Sie sie anderswo verwenden.

Konfiguration

Sie fügen die Zuweisungs-Interaktion als Aktion innerhalb des Ereignisses einer anderen Komponente hinzu (z. B. On Click, On Change).

1. Wählen Sie die auslösende Komponente: Wählen Sie die Komponente (z. B. einen Button), die die Variablenänderung auslösen soll.

2. Zugriff auf Interaktionen: Gehen Sie im Eigenschaftenbereich zur Interaktionen Sektion.

3. Wählen Sie das Ereignis: Wählen Sie das Ereignis aus, das die Zuweisung auslösen soll (z. B. On Click).

4. Aktion hinzufügen: Klicken Sie auf „Aktion hinzufügen“.

5. Aktionstyp festlegen: Wählen Sie Zuweisung (oder einen ähnlichen Namen wie „Variablenwert setzen").

6. Konfigurieren Sie die Zuweisungs-Eigenschaften:

   • Variable: (Ressource - Essential) Wählen Sie die Ziel-Variable-Ressource deren Wert Sie ändern möchten (z. B. {!myCounterVariable}, {!isDetailsVisible}). Diese Variable muss bereits in Ihrem Ressourcen-Panel existieren.

   • Operator: (Auswählen) Wählen Sie wie Sie die Variable ändern möchten:

     • equal: Ersetzt den aktuellen Wert der Variable durch einen neuen. Dies ist der gebräuchlichste Operator.

     • add: Fügt zum vorhandenen Wert hinzu. Das Verhalten hängt vom Datentyp ab:

       • Für Zahlenführt es eine mathematische Addition durch (z. B. 2 add 1 wird zu 3).

       • Für Text, verkettet es (fügt an) den Text an (z. B. "Hello" add " World" wird zu "Hello World").

       • Für Sammlungen, fügt es ein neues Element zur Liste hinzu.

     • erstes Vorkommen ersetzen: Findet das erste Vorkommen eines angegebenen Strings und ersetzt es.

     • alle Vorkommen ersetzen: Findet alle Vorkommen eines angegebenen Strings und ersetzt sie.

     • regex ersetzen: Für fortgeschrittene Textmanipulation mit regulären Ausdrücken.

   • Wert: (Ressource oder statisch) Geben Sie den Wert an, der vom Operator verwendet werden soll. Wenn der Operator z. B. equalist, ist dies der neue Wert. Wenn der Operator addist, ist dies der hinzuzufügende Wert. Dies kann ein statischer Wert sein (z. B. 1, true, "Active") oder ein dynamischer Wert aus einer anderen Ressource (z. B. {!anotherVariable}, @MyInput.value).

Beispiele

Erstellen eines dynamischen Antworten-Containers zum Ein-/Ausblenden

Bauen wir den genau von Ihnen beschriebenen Anwendungsfall: einen „Antworten“-Button, der einen Container mit einem Antwortformular anzeigt, und ein „Schließen“-Symbol innerhalb dieses Panels, um ihn wieder zu verbergen. Dies zeigt, wie man den Komponentenstatus verwaltet.

1

Erstellen Sie eine Boolesche Variable für den Zustand

• Im Ressourcenerstellen Sie eine neue Boolesche Variable.

• API-Name: isReplying

• Anfangswert: Setzen Sie auf false.

2

Erstellen Sie das Panel und binden Sie dessen Sichtbarkeit

• Ziehen Sie einen Container Komponente auf Ihre Leinwand. Dies wird Ihr Antwortpanel sein.

• Platzieren Sie im Container andere Komponenten, wie ein Textfeld für die Antwortnachricht.

3

Erstellen Sie den „Antworten“-Button

• Fügen Sie eine Avonni Schaltfläche Komponente außerhalb des Containers hinzu.

• Beschriftung: "Antworten"

• On Click-Interaktion:

  1. Fügen Sie eine Zuweisung Aktion hinzu.

  2. Konfigurieren Sie sie:

     • Variable: {!isReplying}

     • Operator: equal

     • Wert: false

4

Erstellen Sie das „Papierkorb“-Symbol

• Innerhalb der Antwort Containerfügen Sie ein Symbol Komponente hinzu.

• Symbolname: utility:close (oder utility:delete wenn Sie ein Papierkorbsymbol bevorzugen). Machen Sie es anklickbar.

• On Click-Interaktion:

  1. Fügen Sie eine Zuweisung Aktion hinzu.

  2. Konfigurieren Sie sie:

     • Variable: {!isReplying}

     • Operator: equal

     • Wert: true

5

Wählen Sie die Container-Komponente

Fügen Sie in den Einstellungen „Komponenten-Sichtbarkeit festlegen“ eine Bedingung hinzu, die den Container nur anzeigt, wenn der Antworten-Button geklickt wurde und die isReplying Variable nicht auf true.

Ergebnis

Beim Laden der Seite ist isReplying ist false, sodass der Container ausgeblendet ist. Das Klicken des „Antworten“-Buttons setzt die Variable auf true, wodurch der Container und sein Inhalt erscheinen. Das Klicken des „Schließen“-Symbols innerhalb setzt die Variable zurück auf false, wodurch sie wieder ausgeblendet wird. Diese gesamte Zustandsänderung wird deklarativ mit zwei einfachen Zuweisungs-Interaktionen gesteuert

Erhöhung eines Like-Zählers

Dieses Beispiel verwendet einen „Gefällt mir“-Button, um einen in einer Textkomponente angezeigten Zähler zu erhöhen und damit die numerische Manipulation zu demonstrieren.

Ergebnis: Jeder „Gefällt mir“-Klick erhöht die Anzahl (z. B. 0 → 1 → 2). Der Text wird sofort aktualisiert. Zurücksetzen setzt ihn auf 0 zurück.

Wichtige Überlegungen

• Datentypen sind wichtig: Der add Operator verhält sich bei Zahlen anders als bei Text. Stellen Sie sicher, dass der Datentyp Ihrer Variable der beabsichtigten Operation entspricht.

• Variable muss existieren: Sie müssen die Variable-Ressource erstellen, bevor Sie sie in einer Zuweisungsaktion verwenden können.

• Verkettung von Aktionen: Zuweisung ist oft ein Schritt in einer Folge von Interaktionen. Zum Beispiel könnten Sie zuerst Zuweisen einen Wert zu einer Variable und dann Flow ausführen und diesen neuen Wert als Eingabe verwenden.

Zusammenfassend

Die Zuweisungs-Interaktion ist das grundlegende Werkzeug zur Steuerung und Manipulation der in Ihren Variablen gespeicherten Daten. Sie ist der Schlüssel zur Verwaltung von Komponentenstaten, dem Erstellen von Zählern, dem Zurücksetzen von Formularen und dem Aufbau dynamischer Logik als Reaktion auf Benutzeraktionen, alles deklarativ