How to Toggle a Reply Panel Using Assignment Interaction

Overview

Learn how to create a dynamic Show/Hide reply container using the Assignment interaction in the Avonni Dynamic Components App. This example demonstrates how to manage component state declaratively.

---

Objective

Build a UI where:

• Clicking a Reply button displays a panel with input fields.
• Clicking a Close icon inside the panel hides it again.
• The panel visibility is managed using a Boolean variable and two Assignment interactions.

---

Step-by-Step Instructions

1. Create a Boolean Variable for State

In the Resources panel:

• Variable Type: Boolean
• API Name: isReplying
• Initial Value: false

This variable controls whether the reply panel is visible.

---

2. Add the Reply Container

• Drag a Container component onto the canvas.
• Inside the container, add components like a Text Area to compose a reply.

This container will be shown or hidden based on the value of isReplying.

---

3. Add the "Reply" Button

• Place an Avonni Button component outside the container.
• Label: Reply

Interaction Configuration (On Click):

• Action Type: Assignment
• Variable: {!isReplying}
• Operator: equal
• Value: true

Clicking the button sets isReplying to true, which will display the reply panel.

---

4. Add the "Close" Icon Inside the Container

• Drag an Icon component into the reply container.
• Icon: utility:close or utility:delete

Interaction Configuration (On Click):

• Action Type: Assignment
• Variable: {!isReplying}
• Operator: equal
• Value: false

Clicking the icon resets the variable, hiding the container again.

---

5. Set the Container Visibility Rule

• Select the Container component.
• Open the Set Component Visibility settings.
• Add a condition: Show when isReplying is equal to true.

---

Result

• When the page loads, isReplying is false, so the reply container is hidden.
• Clicking the Reply button sets isReplying to true, making the container appear.
• Clicking the Close icon sets it back to false, hiding it again.

All of this logic is handled declaratively with just two Assignment interactions—no custom code required