Overview
Fields that contain a lot of data are usually left out of Galleries since they take up too much space or make the list appear longer than it should. To handle for this, conditional logic can be implemented to expand a gallery row showing all data when the user decides to expand.
YouTube
Gallery Setup
To start, the Gallery will need to be Flexible Height and the field that contains a lot of data will need Auto Height turned to On. This will not work with standard height galleries. Here is an example of a flexible height gallery:
Create Collection
A new collection will need to be created to house an additional column that will identify whether a row needs to be expanded or not. In this case, the collection was created during OnStart of the App.
Here ClearCollect is used for the Accounts table and an additional column is added called ‘expandDesc’ that is set to false for all rows.
ClearCollect(accountList,
AddColumns(Accounts, “expandDesc”, false)
);
Update Gallery
The gallery will need to be updated from the table previously used to the new collection that has the ‘expandDesc’ flag.
After swapping out the data source, ensure all columns are the same as they could be switched out.
Conditional Length of Field
In this scenario, we want to show the first 50 characters of the Description field if the user has not expanded it. Otherwise, the full description will be shown. The snippet below, takes into condition the field length and the expandDesc flag. If the field is being cut off, ‘…’ is concatenated to let the user know that more data exists.
If(Len(ThisItem.Description) > 50 && !ThisItem.expandDesc,
Concatenate(Left(ThisItem.Description, 50), “…”),
ThisItem.Description
)
Expand/Collapse Icon
An Icon will need to be added to the gallery. In this case, the ChevonDown/Up icon is used
For the Icon’s Icon property, if expandDesc is set to true, the up chevron is shown. Otherwise, the down chevron is displayed.
If(ThisItem.expandDesc, Icon.ChevronUp, Icon.ChevronDown)
If the user selects the icon, we want to either set expandDesc to true or false based on the current value of the row. OnSelect property is updated with this simple formula:
Patch(accountList, ThisItem,
{
expandDesc: If(ThisItem.expandDesc, false, true)
}
)
The visibility of the icon can be made conditional as well. If the Description is less than 50 characters, we don’t want to display it by updating the Visible property.
If(Len(ThisItem.Description) <= 50, false, true)
The Results
After updating all the properties, expanding and collapsing the gallery will be seamless for users:
Tooltip
The tooltip can also be used for previous of the data before the user expands the row by updating the Tooltip property:
