Add accordion effect in the detail view

[Suvrutt_Gurjar]

At times the detail view of a record has multiple fields and as such scrolling down an entire record can be a bit problematic for the user.

The below tip shows how one can implement accordion effect in detail view.

1. The trick revolves around a toggle action that toggles the value from 11 to 12 and then back from 12 to 11. One will need as many toggle actions as sections in the detail view. If there are 4 sections, 4 toggle actions. Each toggle action to be attached to each section of the detail view as inline action.

2. Two format rules per section heading to show those forward ( ) and down ( ) arrows, when the action toggles.

3. One VC as section heading per section because one cannot attach inline actions to show columns. If there are 4 section headings, the 4 Vcs as section headings.

4. One real column of enumlist type to store the status of toggles for each section for each user.

The general expression of each section’s toggle action is

[Section_Control]+(IF(CONTAINS([Section_Control],TEXT(USEREMAIL())&“12”),LIST(TEXT(USEREMAIL())&“11”), LIST(TEXT(USEREMAIL())&“12” )))
-IFS(CONTAINS([Section_Control],TEXT(USEREMAIL())&“11”),LIST(TEXT(USEREMAIL())&“11”))
-IFS(CONTAINS([Section_Control],TEXT(USEREMAIL())&“12”),LIST(TEXT(USEREMAIL())&“12”))

Here [Section_Control] is an enumlist column that stores the status of each section. It basically toggles between abc,email.com11 and abc.email.com12 where abc,email.com, user’s email is captured by the USEREMAIL() function. This the column that stores each user’s choice on a section with the user email.

For another action the toggle action could be setting the toggle values between 21 and 22, third section 31 and 32 and so on. Basically any two distinct values.

5. A show_if for the columns within each section as follows.

IF(CONTEXT(“ViewType”)=“Detail”,
CONTAINS([Section_Control],TEXT(USEREMAIL())&“12”),
TRUE)

For the next section’s columns , the show if can be

IF(CONTEXT(“ViewType”)=“Detail”,
CONTAINS([Section_Control],TEXT(USEREMAIL())&“22”),
TRUE)

So whenever the action toggle’s the stored value in enumlist to abc.email.com12 ( for section 1) or abc.email.com22 ( for section 2) , the columns show and hide on the toggled values, captured in the enumlist column.

I have tested it in a test app with 2 users simultaneously.

[SuyashG]

Really, need this for some of my Ref Views under a Details view, but I am unable to understand the above descriptions. A little to new to AppSheet so unable to comprehend the actually detailed post above.

[Aurelien]

Neat!

Thanks for sharing @Suvrutt_Gurjar

I created something similar for an “information” toggle.

I used Yes/No columns and toggle buttons.

Then, according to the value of the Yes/No column, I display a specific “Yes/No display values”.

To do so, I used a combination of format rule such as yours, and this action:

The display values are as this:

and to avoid any unnecessay column name display, I use this:

[Suvrutt_Gurjar]

Thank you very much @Aurelien for sharing. Yours is another good way to implement those toggles. Just out of curiosity, have you implemented it in multi user environment? I found that the extra logic of making it user specific added some more complexity to the action’s column value changing expression.

[Aurelien]

Excellent question. I did not implemented it in a multi user environment, as it is only for displaying a short information.

Your question is relevant though.

For a similar context, I implemented a security-filter based table, that would create a set of control buttons for each user. It can be tedious, but eventually that does the job

[Suvrutt_Gurjar]

Okay got it. Thank you @Aurelien .

[dbaum]

FYI: Related ideas for action buttons

• Expand/Collapse Button Groups - Google Cloud Community
• Re: Show Hide (Toggle) Icon Overlay - Google Cloud Community

[Gustavo_Eduardo]

Awesome, @Suvrutt_Gurjar ! You’ve earned my like. Well deserved!