I am trying to create a sidebar with a couple of buttons. I have one container and what I would like to do is on click of one of the buttons in the sidebar, it will show a different tabbed container that is within the main container component. For example, the container is called "main_window" and I want to add 3 tabbed containers called "foo", "bar", "fizz".
My thought was to create a [temporary state] (Temporary state) called "window_selected" and assign a state per window. In other words:
{{state1.value}} == 1 then "foo"
{{state1.value}} == 2 then "bar"
{{state1.value}} == 3 then "fizz"
The docs also references setting these values running javascript code, but where do you actually run that code? For example, if I want to set a constructor for first load of the page, for example, to set state.setValue(value: 0) by default, where do I run this?
In the documentation it also states: If you refresh your app (with a āR), your temporary states will be lost. If you're looking to persist state between app refreshes, you should write back results to a database!
Therefore, I was considering using localstorage as I see there is a localstorage section, but the only reference to localstorage in the docs is here.
Where do I set values for localstorage? And, is there a way to run a transformer or query "onload"?
Ultimately, how do I create a dashboard where the page dynamically changes in a main window depending on which button I have highlighted in the sidebar.
Hey @anobody! (we typically don't answer stuff on StackOverflow, this is your place to ask questions)
There's a much simpler way to do this: you can dynamically set which tabbed container tab should be open through the component inspector. I built a little demo where I set the active tab via a dropdown:
If you click on your tabbed container, the inspector has a property called "Selected tab index" -- I used JS to reference the value of a dropdown component to the left.
The reason I wanted to have a method to do this is because Iām probably going to need something like 15 tabs. But those tabs can actually be grouped by 5 subjects of 3 tabs each. So I wanted a sidebar to pick the tabbed container with the tabbed container having 3 tabs each. Otherwise, the tabs start to become a bit unweildy.
Hi @anobody, I wanted to share an exciting update-- we've just rolled out a new Sidebar and improved navigation component that serve exactly what you ask for! You can see this new Sidebar in the left panel under Components:
i just cant understand the flow of this, im tyring to implement SPA and currently im checking the route with a state the hiding the components that i dont want to show for each route.
please let me know if theres a better way.
Hiding a lot of components in a single app can lead to performance issues so it's recommended in these docs that you break your app up into multiple smaller apps where possible. When doing so, modules can help with reusing components, and you can use local storage or URL parameters to share data (more info here).
That being said, for cases where you end up finding it best to have multiple views in a single app, you can try using a tabbed container. The container links to a tabs component which can exist outside of the container, or you can dynamically set the current view if you'd like.
There isn't exactly a one-size-fits-all solution at the moment but if you wouldn't mind sharing a bit more about use case we can try making more specific recommendations!
