Overview

Show/hide UI elements declaratively using the Assignment interaction in Avonni Dynamic Components. This pattern manages component visibility through state without custom code.

Objective

Build a toggle pattern where:

• Clicking Reply displays a panel with input fields.

• Clicking a Close icon hides the panel.

• A Boolean variable and two Assignment interactions handle all state management.

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 visibility of the reply panel.

2. Add the reply container

• Drag a Container component onto the canvas.

• Add input components inside—Text Area, inputs, whatever the reply needs.

This container displays or hides based on isReplying.

3. Add the Reply button

• Place an Avonni Button component outside the container.

• Label: Reply

Interaction (On Click):

• Action Type: Assignment

• Variable: {!isReplying}

• Operator: equal

• Value: true

Clicking sets isReplying to true. The panel appears.

4. Add the Close icon inside the container

• Drag an Icon component into the reply container.

• Icon: utility:close or utility:delete

Interaction (On Click):

• Action Type: Assignment

• Variable: {!isReplying}

• Operator: equal

• Value: false

Clicking resets the variable and hides the container.

5. Configure container visibility

• Select the Container component.

• Open Set Component Visibility.

• Add condition: Show when isReplying equals true.

Result

• Page load: isReplying is false. Panel hidden.

• Click Reply: isReplying becomes true. Panel appears.

• Click Close: isReplying becomes false. Panel hides.

Two Assignment interactions. No custom code. Done.