Assignment

Overview

Think of the Assignment interaction as a command that says, "Take this variable and change its value in this specific way." While many input components (like Text Input or Toggle) can update a variable automatically through data binding, the Assignment interaction is used when you need to change a variable's value as a direct result of an action.

Key Purpose

• State Management: Set a variable to control the state of your component (e.g., set isPanelVisible to true when a button is clicked).

• Data Manipulation: Modify data stored in a variable (e.g., increment a number, add text to a string, or replace parts of a string).

• Resetting Values: Easily clear user input or reset a component to its initial state.

When to Use the Assignment Interaction

• Toggling Visibility: On a "Show/Hide Details" button, use Assignment to toggle a Boolean variable between true and false.

• Dynamic Text Building: Concatenate (add) strings together in a variable in response to different user actions.

• Data Cleanup: Use replace operators to format or clean up data stored in a variable before using it elsewhere.

Configuration

You add the Assignment interaction as an Action within another component's event (e.g., On Click, On Change).

1. Select the Triggering Component: Choose the component (e.g., a Button) that will initiate the variable change.

2. Access Interactions: In the Properties Panel, go to the Interactions section.

3. Choose the Event: Select the event that should trigger the assignment (e.g., On Click).

4. Add Action: Click "Add Action".

5. Set Action Type: Select Assignment (or a similar name like "Set Variable Value").

6. Configure the Assignment Properties:

   • Variable: (Resource - Essential) Select the target Variable resource whose value you want to change (e.g., {!myCounterVariable}, {!isDetailsVisible}). This variable must already exist in your Resources panel.

   • Operator: (Select) Choose how you want to modify the variable:

     • equal: Replaces the current value of the variable with a new one. This is the most common operator.

     • add: Adds to the existing value. Behavior depends on the data type:

       • For Numbers, it performs mathematical addition (e.g., 2 add 1 becomes 3).

       • For Text, it concatenates (appends) the text (e.g., "Hello" add " World" becomes "Hello World").

       • For Collections, it adds a new item to the list.

     • replace first occurrence: Finds the first instance of a specified string and replaces it.

     • replace all occurrences: Finds all instances of a specified string and replaces them.

     • replace regex: For advanced text manipulation using Regular Expressions.

   • Value: (Resource or Static) Provide the value to be used by the operator. For example, if the operator is equal, this is the new value. If the operator is add, this is the value to be added. This can be a static value (e.g., 1, true, "Active") or a dynamic value from another resource (e.g., {!anotherVariable}, @MyInput.value).

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.

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