Create A FAQ Page with Card Views

Suvrutt_Gurjar · 12-13-2022 01:19 AM

We can create a simple FAQ page that expands /collapses the question answer pane using card views.

Implementation is simple:

1. There are two simple data change toggle actions to hide/show the answer column for the selected question and those actions only are selected to be shown in the card view configuration.

2. The question column is assigned to Header column and the answer column is assigned to the sub-header column in large card type view configuration.

Edit: 3. Include this card view in another Dashboard view with interactive mode on. This will ensure on tapping on any card of the FAQ card view , the detail view does not open up and the view stays on the card view. The dashboard view will have only FAQ card view as the constituent view.

The FAQ page looks like below in tab view

The FAQ page looks much more elegant and useful in mobile view as shown below.

Note: Card views have some bugs that surface at times. So please use it with thorough testing and at your own risk, especially on production apps. I tried above for some time and seems to consistently work for the card view configuration described above.

jyothis_m

That's a brilliant idea 😊👍

What does the action actually do. Does it changes some column value to True / False?

Suvrutt_Gurjar

Yes , correct. There is an additional (YN) column that toggles with those actions. That column is used in show_if of answer column. So answer column shows/hides with toggled actions.

In the test app the [Show Answer] column is set to TRUE/FALSE with those toggeling actions.

The column in turn is used in show_if property of the [Answer] column.

jyothis_m

Brilliance 😎🤝

SkrOYC

I love it. It's simple, elegant and very useful.

Thanks for sharing!

jyothis_m

Hi @Suvrutt_Gurjar Is there a way to limit these actions to the device alone and not do the sync. Actions such as these which are used for UX effects are needed only locally. Is there anything that can be done to achieve this or any workout.

Suvrutt_Gurjar

Hi @jyothis_m : If we wish to build the FAQ page from detail or summary views, then I believe actions are inevitable. One could possibly try a pre-filled form view with questions and answers of FAQ page but it does not look elegant as a UX because enum buttons are very large in form view.

jyothis_m

Hi @Suvrutt_Gurjar Sorry for my poor explanation. What i meant was, is there any way to prevent the data change i.e. TRUE / FALSE from actually syncing to server. The Action is inevitable as u said and the its a great implementation you did with the action. But the data change need not be reflected in the sheet. That's what i was asking.

Suvrutt_Gurjar

Hi @jyothis_m ,

I believe, once you invoke action, the device will attempt to update the data changes in the sheet when the device is online. Actions are meant for that. I believe there are no "device limited local" actions.

That is why I discussed the option of form view that can simply show/hide columns based on enum selection without updating sheets like actions till changes are saved by form save. But the implementation with form view is not elegant with many associated issues like big enum buttons, hiding "Save" button on form and so on....

jyothis_m

Got the point now.👍 Sorry that i didn't understand the form option first.

Fabian_Weller

Hi @Suvrutt_Gurjar that's very cool.
I just tested some things and came out with this:

With this, you don't have to click on the action icon. You can click anywhere in the card.
And you don't need to put the card view in an interactive dashboard to restrict opening the detail view.

Create the Action with the expression IF([Yes/No]=FALSE,TRUE,FALSE) or with the shorter version from @dbaum NOT([Yes/No])
This Action has no icon and is Display inline.
Set this Action in the Card View as the "On Click" and as the bottom right action.
Create 2 Format Rules to show an ᐯ Icon when [Yes/No]=FALSE or an ᐱ Icon when [Yes/No]=TRUE

Suvrutt_Gurjar

Elegant, practical improvements @Fabian_Weller . The FAQ page is more user friendly with your additions. Thank you very much for those improvements.

dbaum

Thanks for that refinement. This is a good technique.

@Fabian_Weller wrote:

IF([Yes/No]=FALSE,TRUE,FALSE)

I use this concept frequently to toggle a column value--e.g., to trigger an automation or, as you've done, in show/hide scenarios. FWIW, my standard version is:

NOT([Yes/No])

Fabian_Weller

Hi @dbaum what does this mean?

NOT([Yes/No])

Is it the same as

[Yes/No]=FALSE

?

jyothis_m

No, i guess @dbaum is toggling the value of the column [yes/no] by putting NOT in front.

If the value is True (yes) then it will be changed to False (no) and vice versa.

Fabian_Weller

Oh wow that's cool. Thank you @dbaum and @jyothis_m I've updated my post.

dbaum

Exactly--thanks for explaining.

Collectiumbro

Is it possible to create a link to a Chat with historical prices??

dbaum

Your question is sparse enough that at least I don't understand it, and it's seemingly unrelated to this tip. You should initiate a new conversation in the AppSheet Q&A - Google Cloud Community forum and elaborate what you're asking about.