Folks, I need your help, this is more of a design best practice thought, my application has several screens, they are evoked from each other and when an action is taken, script or query. The component with the chart is a tabbed container, I want it not to show till some one hit's the "Vitals" link, when "Dashboard" is hit, the "Vital" chart is hidden and dashboard is shown, how can I do this, thanks.
Hi @naveen07, all components have their own "Hidden" field under Layout. You can set your logic on controlling that component to be visible/hidden. Say for example, you can write this on the Hidden field of the chart component: {{tabbedContainer1.value === 0 }}.
This assumes that tabbedContainer1 is the Dashboard, Vitals, etc. Menu.
I also assumed that 0 is the value of Dashboard in your tabbedContainer.
Let me know if this helps.
Hi jocen, thank you, so if I am thinking right, {{tabbedContainer1.value === 0 }} would be telling tabbedContainer1.value is being set to Dashboard, a "1" would be the "Vitals" tab, and must be programed when i click the trigger to chance view? for dashboard - 0, vitals 1 and so on, correct? hope I made sense, thanks.
Hi @naveen07, got a proper view now of the tabbedContainer component so you wouldn't be calling value but rather currentViewKey. You can check this on the tabbedContainer component and check the keys you are using for each tab there.
Say for example you have "dashboard" as key for the first tab, you would be doing something like this:
{{ tabbedContainer1.currentViewKey === "dashboard" }}. This is only a comparison and not setting anything, essentially a single line if statement. This line returns either true or false, explicitly showing {{ tabbedContainer1.currentViewKey === "dashboard" ? true : false }} and you are putting this on the Hidden field of the component you don't want to show.
That aside, I forgot to ask, what component are you using for the [Dashboard, Vitals, Schedule Visit, Visit Now, ...] menu? Are they individual link button or another tabbed container? Because you can use a tabbedContainer inside a tabbed container.
Couple of things here, 1) the tabbed container has Blood Pressure, Blood Glucose... and so on. The "Dashboard", 'Vitals" and so on are on a "Navigation" bar. If the "Dashboard" link is clicked, i want the current view to close and open the dashboard component, could be a different contatiner. I will have one for schedule visit and so on. I just want to create a workflow by opening and closing components. Let me know if that made more sense, thanks.
Ahhh, I see. The menu in the navigation bar doesn't have the property similar to the tabbedContainer hence it's difficult to use the hidden property of any components. I have no clue on how to use the navigation bar to show/hide a container/view in retool.
What I would suggest though is that you
- Change the navigation bar to a tab component (attach the urls on trigger query on respective menu button or you can create an iFrame component in their view so you can access internal links inside your retool app).
- Wrap your tabbedContainer in another container
- Enable multiple view for this outer container to the views you want:
Vitals (adjusted the css of this to mimic the navigation bar to not be highlighted when the menu is selected, you can change that if you want)
Dashboard:
Visit Now:
Not sure if this is what you want. You can remove the transition as well if that annoys you.
jocen, perfect! I am complicating things, your idea makes perfect sense, and something I'm going to try and probably use as I did for other components. Yes, tabbed container in a tabbed container would work well. I will use Modals to create a workflow. Thank you so much, I appreciate it!
1 Like