Google App maker List view grouping

Question

In App maker we don't have any out of box widget for grouping. We have accordion for list view but it does not filter the list based on grouping.

We want to group the list data and the grouping will contain the relevant data based on the grouping. Please find the below link for image reference. SharePoint grouping image

Answer 1

Grouping

If you have relational data and you have reasonable amount of related records, then you can achieve this result by nesting list inside another list. Inner list can be easily be bound to a relation of the main record.

Collapse/Expand All

You can toggle nested items by toggling CSS class:

// onClick event of the 'collapse all' button  
app.currentPage.OuterList.styles = ['collapseAll'];

// onClick event of the 'expand all' button  
app.currentPage.OuterList.styles = [];

/* CSS rules */
.collapseAll .app-SomePage-InnerList {
  display: none !important;
}

Collapse/Expand individual row

This is a little bit trickier. Pure CSS solution most likely will not work, because of conflict with Collapse/Expand All. At this moment I don't see elegant App Maker-way solution.

Note

if you have considerably large amount of related records, then implementation will be significantly more complex, since at this time AM doesn't support pagination for relations.