Expand/Collapse Button Groups

As an app grows in functionality, action buttons can proliferate in some tables' detail views. Here's a technique for showing and hiding related actions as expandable/collapsible groups.

Note: This technique utilizes the INPUT function, which is a beta feature. The same app behavior could be achieved without using this function, although the implementation would be more cumbersome.

Demo

Demo: expand and collapse button groupsDemo: expand and collapse button groups

Sample app: Collapsible Button Groups

Steps

  1. Users table: In a Users table, add a column to hold a value representing each user's current selection of an expanded (i.e., not collapsed) button group--e.g., [Button_Group]--and add an action (that need not be displayed) to set the value of this column. In the action, use the INPUT function in the expression to set the column value--e.g., INPUT("ButtonGroupValue", "").
  2. Button groups: For another table's actions whose Prominence property is set to "Display prominently", organize the actions into groups by putting them in the desired order. In each action's Only if this condition is true property, require that the column from step 1 for the current user's row have the value of the button group's name--e.g., INDEX(Current_User[Button_Group], 1) = "Home".
  3. Button group anchors: Precede each action group with an additional action titled using the name of the group--e.g., "Home", "Data", "Reports".--that executes an action on a set of rows. For the Referenced Rows property, enter an expression yielding a single-item list for the current user's row in the Users table. For the Referenced Action property, select the action from step 1 that sets the value of the column for the selected button group. For the With these inputs property (which is available because the referenced action uses the INPUT function--although if you haven't saved since step 1, you may need to do so for this property to appear), enter an expression that returns the button group's name if that's not already the column's value and a blank value if it is--e.g., IF(INDEX(Current_User[Button_Group], 1) <> "Home", "Home", "").
  4. Format rules: Create format rules to modify the appearance--e.g., icon, color--of each group's buttons when the group is expanded--i.e., when the group name is the value of the column from step 1 for the current user's row.

Step 1 action example

dbaum_2-1671684654920.png

 

Step 3 action example

dbaum_1-1671684550526.png

 

10 1 1,149
  • UX
1 REPLY 1

Thank you @dbaum this is very nice. It reminded me of a tip that @Koichi_Tsuji shared with us:
https://www.googlecloudcommunity.com/gc/Tips-Tricks/Show-Hide-Toggle-Icon-Overlay/m-p/229828
When you scroll down you can see a gif.

Top Labels in this Space