Smoother Transitions on Conditional UI

[poirazis]

In this example, I implemented using an Embed, transition animations when a Container appear and when the Form Steps are changed from on to another.

Screen.Recording.2022-08-30.at.3.07.35.PM.mov

[ryzam]

Hi @poirazis , which components you are using to display a tab?

[poirazis]

Hey @ryzam
The "tabs" are actually Buttons and the "tabContents" are Form Steps.
I use the buttons to navigate between the steps, and conditional UI to make it look li a Tab Control!

Hope this helps!

[ryzam]

If possible to share step by step, i think because its involve in custom css and conditional UI to achieve right?

[poirazis]

yes, let me create a small app with the implementation and post it here so you can play around with it.
I will revert with a sample app.

[poirazis]

Hey Ryzam,
you can find the sample app here :
TabsAndTransitions-export-1661959085587.txt

A preview here :
https://user-images.githubusercontent.com/80512170/187715775-8b0a3e77-b3f7-4efa-a182-de2232a23630.mov

Please note that i use the names of the components to target them in the CSS i inject with the Embed and not alter the Spectrum classes.

Hope this helps

Have a blessed day.

[ryzam]

@poirazis thank you so much .

[melohagan]

This is really slick 😎

[kasgithub8]

Hey @poirazis,

about the preview video, are you using a number to search through a table?
If yes, how did you do that?

[poirazis]

Hey @kasgithub8 , I explain that process here #6294 (comment)

Hope this helps!

[kasgithub8]

Hey @kasgithub8 , I explain that process here #6294 (comment)

Hope this helps!

Im using internal tables unfortunately.
Do you have a tip on that?

[poirazis]

Sure! There's @melohagan original solution here #6294 (comment) for internal tables!

[kasgithub8]

@kasgithub8 let me know of the basic scenario of what you need to achieve and i will try and make a sample app for you

I basically really dislike the dynamic filter because you have to click so many times just to filter, I really wanted to find out how to implement a text field/number field (f.e. Auto ID) to filter that table with.

[poirazis]

have you checked out Static Filtering from the documentation ? https://docs.budibase.com/docs/searchfilter-data

[kasgithub8]

But the filter is pre-entered, no?

[poirazis]

Yes, the filter is pre-defined and the value the filter is looking for is bound to an input field.

Please see this sample app below

FilteringSample-export-1662550345400.txt

[kasgithub8]

Oh my god, that is so beautiful. You're a goat.