# 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

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

***

## 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 operator's behavior depends on the variable's data type.

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

### **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

### Clear Field on Button Click

{% content-ref url="/pages/mDGupgzP7ukmuI1ZKpmN" %}
[Clear Fields on Button Click](/dynamic-components/tutorials/interactions/assignment/clear-fields-on-button-click.md)
{% endcontent-ref %}

***

### **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.

<figure><img src="/files/Z1tE0lhLywMDLpbu5tOP" alt=""><figcaption></figcaption></figure>

{% stepper %}
{% step %}

#### **Create a Boolean Variable for State**

* In **Resources**, create a new **Boolean Variable**.
* **API Name:** `isReplying`
* **Initial Value:** Set to `false`.

<figure><img src="/files/7luTiyyNuzPUAJ13duHQ" alt="" width="563"><figcaption></figcaption></figure>
{% endstep %}

{% step %}

#### **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.
  {% endstep %}

{% step %}

#### **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`&#x20;

<figure><img src="/files/XJleGdSGEyO3DCvakSRG" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**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`

<figure><img src="/files/PERrgOxu4EsiDRpEUXn4" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
**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`.

<figure><img src="/files/CEcbFXDf8rBoOCuGOoPA" alt=""><figcaption></figcaption></figure>

{% endstep %}
{% endstepper %}

**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.

{% stepper %}
{% step %}

#### **Create Number Variable**

In Resources, add a Number Variable named likeCount with initial value 0
{% endstep %}

{% step %}

#### **Add Display Text**

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

{% step %}

#### **Add "Like" Button**

Add a Button labeled "Like".

* On Click: Add Assignment action.
* Variable: {!likeCount}
* Operator: add
* Value: 1
  {% endstep %}

{% step %}

#### **(Optional) Add Reset Button**

Add another Button labeled "Reset Likes".

* On Click: Add Assignment action.
* Variable: {!likeCount}
* Operator: equal
* Value: 0
  {% endstep %}
  {% endstepper %}

**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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/component-builder/interactions/variable-operations/assignment.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.