Component Visibility
Last updated
Was this helpful?
Last updated
Was this helpful?
Dynamic visibility is a powerful feature that enables you to create user interfaces that adapt to various situations. Instead of always showing all components, you can define rules determining when a component should be visible.
Improved User Experience: Create cleaner interfaces by showing only relevant information at the right time.
Enhanced Performance: Hidden components aren't loaded, reducing page load times and server requests.
Responsive Design: Tailor layouts and component display for different devices (Desktop, Tablet, Phone).
More Responsive UI: The interface feels dynamic as components appear/disappear based on actions, data, or device.
Simplified Logic: Achieve complex conditional displays without intricate interactions or code
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.
To make a component's visibility conditional:
Select the Component: Click on the component in the canvas whose visibility you want to control.
Find the "Set Component Visibility" Property: In the Properties Panel (right side), locate the Visible property.
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.
Choose your condition:
Component Attribute: Base visibility on the state or value of another component (e.g., show Component B only if @MyCheckbox.checked is true).
Variable: Use a Boolean Variable resource you created. The component shows when the variable is true.
Formula: Use a Formula resource that evaluates to true (visible) or false (hidden). Allows complex logic.
Global Variable: Use system-provided information.
New: For Device Type: Select $Component, then choose the FormFactor attribute. This holds the current device type as text: 'Desktop', 'Tablet', or 'Phone'.
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).
Add the Calendar:
Drag an Avonni Calendar component onto the canvas.
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.
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.
Let's show a detailed Data Table on desktops/tablets but a simpler List component on phones.
Add Data Table: Add your Data Table component (e.g., MyDataTable).
Set Data Table Visibility:
Select MyDataTable.
In the Visible property, set the condition: Global Variable $Component.FormFactor not equal to 'Phone'.
Add List Component: Add your List component (e.g., MyList) designed for mobile viewing.
Set List Visibility:
Select MyList.
In the Visible property, set the condition: Global Variable $Component.FormFactor equals 'Phone'.
Result: Users on desktops or tablets will see the Data Table, while users viewing on a phone will see the List component, providing an optimized view for each device form factor.
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.
Creating Responsive Layouts that adapt to Desktop, Tablet, and Phone screens
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.
Dynamic visibility is a core feature of Avonni Dynamic Components, offering a powerful way to create responsive and efficient user interfaces. By linking the Visible property to data, component attributes, formulas, or the new $Component.FormFactor global variable, you can precisely control when components are displayed, optimizing performance and tailoring the user experience for different conditions and devices.
Let's create an example where an Avonni Calendar component is only visible when the user selects a "Calendar" option from an .
