Making group components hidden

App Building
1

  • Goal: I'm trying to toggle different views within my app using a button click e.g. I click on Customers and a Customers group component appears, then I click on Orders and an Orders group component appears, while the Customers group component disappears, etc.

  • Steps: First, I created a variable called currentView with an initial value of 'Customers' . Then, I went into the inspector of my Customers group component and set the "Hidden" value to {{ currentView !== 'Customers' }}. Then I created a button called Customers with a Click event handler with action Set variable, state = currentView, Method = Set value and value = 'Customers'. I did the same thing for a Orders and Products button / group component, respectively. I thought this should surely be enough to toggle between the different views, but all it's done is caused all my components to not be visible. I must be missing something.

image
image1920×781 95.1 KB

Plz halp

2 Likes
2

Hi there @t2na, and welcome to the forum,

I think the easiest (and probably intended Retool) way of achieving this would be to add your groups within a "tabbed container" component, and use the buttons to set the currentView.

  1. Add tabbed Container
  2. Define your views' keys so that you can easily set currentViewKey
  3. Within your buttons, trigger an event handler that controls your container, which is set current view key
  4. Do the same for all the other buttons

If your user case doesn't allow for this solution, I think what is going wrong with your current set up is that you're not referring to your variable's value, so you should change the code you have in the hidden field to {{ currentView.value !== 'Customers' }}

Hope this helps!

3

You're a godsend. Thank you!!

1 Like