Add accordion effect in the detail view

Suvrutt_Gurjar · 09-02-2023 05:09 AM

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

Gustavo_Eduardo

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