How to Grayscale Header Actions Dynamically in Avonni Data Table
Last updated
Last updated
Sometimes, you may want to restrict actions within your Avonni Data Table until the user has selected at least one record. For instance, a "Delete Selected" header action should only be available when rows are chosen.
In this tutorial, you'll learn how to:
Dynamically disable or enable header actions depending on whether records are selected.
Prevent users from attempting actions that don't apply to the current data selection.
Improve user experience by offering clear visual cues about what actions are available.
Once the "Reactive components" setting is enabled, go to your flow, where you have the Avonni data table.
Create a new resource and select Formula as a resource type.
Name your formula "isRowSelected".
Data Type: select > Boolean.
In the formula input field, write the following formula:
This formula checks if any row is selected in the data table. If one or more rows are selected ({!datatable.nbSelectedRows}>0), the formula returns false, otherwise, it returns true.
Replace datatable in the formula with the API name associated with the Avonni Data Table.
Click "Save" to save your formula.
You must map this "isRowSelected" formula to Disabled Actions in the Avonni data table.
Navigate to your flow, open the screen element, and select the Avonni data table.
Open the Component Builder
In the right sidebar, expand the Header section.
Find the "Disable Action" Toggle.
Make sure you're not connecting the "disabled" attribute to the one that's inside the specific action settings. Instead, connect your formula to the "Disabled" attribute in the main Header section (see the screenshot below).
Select "Mapped" from the option icon.
Select the "isRowSelected" formula from the dropdown menu.
Save your changes.
When no rows are selected in your data table, the Header Actions are disabled. They are enabled only when one or more rows are selected.
