Assignment

Overview

The Assignment interaction modifies the value of a target variable in response to a specific event.

While input components (like Text Input or Toggle) update variables passively through data binding, the Assignment interaction allows you to actively force a value change based on logic or user triggers. It acts as a command: "When this event happens, change this variable to that value."

---

Common Use Cases

Use Case	Description	Example
UI State Management	Control the visibility or status of interface elements by toggling Boolean variables.	Set isPanelVisible to true when a "Show Details" button is clicked.
Data Calculation	Perform math operations or string concatenation on existing data.	Increment a counter variable by 1, or append a username to a greeting string.
Reset & Clear	Revert a component or form to its initial state by overwriting the current value.	Set a searchString variable back to an empty string "" when a "Clear" button is clicked.
Data Cleanup	Format or sanitize data before processing it using replace operators.	Remove specific characters from a user's input string before passing it to a flow.

---

Configuration

To use the Assignment interaction, select your triggering component (e.g., a Button), navigate to the Interactions tab in the Properties Panel, and add an Assignment action to your desired event (e.g., On Click).

Once selected, configure the three core properties below:

1. Variable

(Resource - Required) Select the target variable you wish to modify. This resource must already exist in your Resources panel before it can be selected here.

• Example: {!myCounterVariable}, {!isDetailsVisible}

2. Operator

Choose the method used to modify the variable. The behavior of the operator changes based on the data type of the variable selected.

Operator	Description
Equal	Replaces the current value entirely with the new value provided. This is the standard setting for toggles or resetting state.
Add	Appends or Sums data based on the variable type: • Numbers: Performs addition (e.g., 2 + 1 = 3). • Text: Concatenates strings (e.g., "Hello" + " World" = "Hello World"). • Collections: Appends a new item to the list.
Replace (First)	Finds the first instance of a specific string sequence and replaces only that instance.
Replace (All)	Finds every instance of a specific string sequence and replaces them all.
Replace (Regex)	Advanced text manipulation using Regular Expressions for complex pattern matching.

3. Value

Define the data to be used by the Operator.

• Static Value: A fixed value entered manually (e.g., true, 10, "Active").

• Dynamic Resource: A value pulled from another component or variable (e.g., {!anotherVariable}, @MyInput.value).

Note on Logic: If the operator is Equal, this field represents the new value. If the operator is Add, this field represents the value to be added to the existing one

---

Examples

Creating a Dynamic Show/Hide Reply Container

Let's build the exact use case you described: a "Reply" button that shows a container with a reply form, and a "close" icon inside that panel to hide it again. This demonstrates how to manage component state.

1

Create a Boolean Variable for State

• In Resources, create a new Boolean Variable.

• API Name: isReplying

• Initial Value: Set to false.

2

Create the Panel and Bind its Visibility

• Drag a Container component onto your canvas. This will be your reply panel.

• Inside the Container, place other components, like a Text Area for the reply message.

3

Create the "Reply" Button

• Add an Avonni Button component outside the container.

• Label: "Reply"

• On Click Interaction:

  1. Add an Assignment action.

  2. Configure it:

     • Variable: {!isReplying}

     • Operator: equal

     • Value: false

4

Create the "Trash" Icon

• Inside the reply Container, add an Icon component.

• Icon Name: utility:close (or utility:delete if you prefer a trash icon). Make it clickable.

• On Click Interaction:

  1. Add an Assignment action.

  2. Configure it:

     • Variable: {!isReplying}

     • Operator: equal

     • Value: true

5

Select the container component

In the “Set Component Visibility” settings, add a condition that shows the container only when the Reply button has been clicked and the isReplying variable is not set to true.

Result

When the page loads, isReplying is false, so the container is hidden. Clicking the "Reply" button sets the variable to true, making the container and its contents appear. Clicking the "close" icon inside sets the variable back to false, hiding it again. This entire state change is managed declaratively with two simple Assignment interactions

Incrementing a Like Counter

This example uses a "Like" button to increment a counter displayed in a Text component, demonstrating numeric manipulation.

1

Create Number Variable

In Resources, add a Number Variable named likeCount with initial value 0

2

Add Display Text

Drag a Text component; bind its Value to {!likeCount} to show the current count

3

Add "Like" Button

Add a Button labeled "Like".

• On Click: Add Assignment action.

• Variable: {!likeCount}

• Operator: add

• Value: 1

4

(Optional) Add Reset Button

Add another Button labeled "Reset Likes".

• On Click: Add Assignment action.

• Variable: {!likeCount}

• Operator: equal

• Value: 0

Result: Each "Like" click increments the count (e.g., 0 → 1 → 2). The Text updates instantly. Reset sets it back to 0.

---

Key Considerations

• Data Types are Important: The add operator behaves differently on Numbers versus Text. Ensure your variable's data type matches the operation you intend to perform.

• Variable Must Exist: You must create the Variable resource before you can use it in an Assignment action.

• Chaining Actions: Assignment is often one step in a sequence of interactions. For example, you might first Assign a value to a variable, then Execute Flow using that new value as an input.

---

In Summary

The Assignment interaction is the fundamental tool for controlling and manipulating the data stored in your variables. It's the key to managing component states, creating counters, resetting forms, and building dynamic logic in response to user actions, all declaratively