Collapsible panel using State Variable and Conditional UI demo

[poirazis]

In this demo, i use an on Click Action on the Icon Element to set a State Variable
Then i use the Condition UI of the Enclosed Data Provider, to conditionally set its Limit to 1 or 5, depending on the State Variable set in step 1.

Screen.Recording.2022-05-07.at.4.39.46.PM.mov

[EuanRW]

Wow this is great, would you mind sharing how you did this?

[poirazis]

Hello @EuanRW and sorry for the late reply

The process is as follows
You use an action ( in the above case its an Icon Click Action )
When the Icon is clicked, i set an App State Variable.

I use the following JS code, to reverse the App State on consecutive clicks
return ! $("State.consultationsExpanded");
So, each click will invert the value of that App State Variable.
You can find more info on setting an App State Variable here : https://docs.budibase.com/docs/app-state

Then, i use the Conditional UI formatting to change the number of rows the nested DataProvider will show.
The DataProvider, has a default Limit of 1, and I use the conditional UI to change this setting to 5 ( or how many rows you want ) if the State Variable is set to True.

You can find out more about Conditional Ui here : https://docs.budibase.com/docs/conditions

I hope this helps!

[kasgithub8]

Hey @poirazis,

I'm really wondering how you displayed the rows with links like that?

[poirazis]

Hey @kasgithub8
you can achieve this in different ways
Use Data Provider -> Repeater
Inside the Repeater you can place a container and use the OnClick action to navigate !

Alternatively, you can use a Button, and make use custom CSS via an wmbed

[kasgithub8]

Wait so Provider, Repeater and then a Container? Then what, I'm stuck

[poirazis]

Hey @kasgithub8 i may have misunderstood your question ..
can you tell me what is it you need to achieve exactly so i can make a sample app for you ?

[kasgithub8]

@poirazis, nevermind.
I just added a table to what you have proposed and added some CSS. I really like what you did and your ideas in general!

[poirazis]

Thank you kind sir 🙏 @kasgithub8