Component Visibility

Avonni Dynamic Components allow you to control the visibility of components dynamically. Showing or hiding components based on conditions creates a more responsive, tailored, and efficient user interface. Components that are hidden due to visibility conditions are not loaded onto the page, improving performance.

---

Overview

Dynamic visibility is a powerful feature that lets you create user interfaces that adapt to different situations. Instead of always showing all components, you can define rules determining when a component should be visible.

Key Benefits

• Improved User Experience: Create cleaner, less cluttered interfaces by showing only relevant information.

• Enhanced Performance: Components hidden based on visibility rules are not loaded, reducing page load times and server requests.

• More Responsive UI: The interface feels more dynamic and interactive as components appear and disappear based on user actions or data changes.

• Simplified Logic: You can often achieve complex behavior with simple visibility rules, avoiding the need for intricate interactions or custom code.

---

How Dynamic Visibility Works

Every Avonni component has a Set Component Visible property (in the Properties Panel) that controls its display. You can set it to:

• Always Visible (true): The default; the component is always shown.

• Always Hidden (false): The component is never shown.

• Conditional Visibility: The component is shown only when specific conditions are met.

---

Setting Up Conditional Visibility

To make a component's visibility conditional:

1. Select the Component: Click on the component in the canvas whose visibility you want to control.

2. Find the "Set Component Visibility" Property: In the Properties Panel (right side), locate the Visible property.

3. Click the Resource Selector: Click the icon next to the Visible property (usually a variable/tag icon). This opens the resource selection menu. Do not simply type true or false unless you want the component to be always visible or always hidden.

4. Choose your condition:

   • Component Attribute: Select another component and a boolean attribute.

   • Variable: Select a Boolean Variable resource. The component will be visible when the variable is true and hidden when it's false.

   • Formula: Select the data type Formula and create a formula that returns true (visible) or false (hidden). This allows for complex logic.

   • Set the condition: Complete your conditional visibility based on the attribute or variable selected.

---

Example: Conditionally Displaying a Calendar

Let's create an example where an Avonni Calendar component is only visible when the user selects a "Calendar" option from an Avonni Button Menu.

Steps

1. Add a Button Menu:

   • Drag an Avonni Button Menu component onto the canvas.

   • In its properties, configure the Items:

     • Add an item with Label: Table, Value: table

     • Add an item with Label: Calendar, Value: calendar

   • Give the Button Menu a descriptive API Name (e.g., ViewModeMenu).

2. Add the Calendar:

   • Drag an Avonni Calendar component onto the canvas.

3. Set the Calendar's Visibility:

   • Select the Calendar component.

   • In the Properties Panel, find the Visible property.

   • Click the resource selector icon.

   • Select Component Attribute.

   • Select your Button Menu component (e.g., ViewModeMenu).

   • Choose the value attribute.

   • Set the operator to equals

   • Set the value to calendar.

How It Works

The Calendar's Visible property is now directly linked to the value of the ViewModeMenu Button Menu. When the user selects "Calendar" in the Button Menu, the value becomes 'calendar', the condition evaluates to true, and the Calendar component is displayed. If any other option is selected, the condition is false, and the Calendar is not loaded.

---

Common Use Cases

• Conditional Forms: Show/hide form fields based on previous selections.

• Personalized Dashboards: Display different components based on user role or profile.

• Progressive Disclosure: Gradually reveal information as the user interacts.

• Error Messages: Show error messages only when an error occurs.

• Loading Indicators: Show a loading indicator while data is being fetched, then hide it and show the data component.

---

Tips

• Start Simple: Begin with simple conditions and gradually increase complexity.

• Test Thoroughly: Test your visibility conditions with different data and user interactions.

• Use Formulas Carefully: While powerful, complex formulas can be more complicated to maintain.

• Use Boolean Variables: Create boolean variables to make it more readable.

---

In Summary

Dynamic visibility is a core feature of Avonni Dynamic Components, offering a powerful way to create responsive and efficient user interfaces. You can precisely control when components are displayed by linking the Visible property to data, user input, or formulas, optimizing the user experience and application performance.