Switching tabs in tabbed container based on output of other elements

💬 App Building
1

Sorry for the simple question, just started using Retool.

I have a tabbed container with 2/3 tabs. I simply wish to switch the tab which is displayed based on information answered in another element.

So if the user inputs a value, I wish to show one tab within the tabbed container, if they enter a second value, I wish to show a different tab etc.

Thanks!

2

Hi @rjb2000 and welcome to the Retool community!

You can set the tabbedContainer1 view with this tabbedContainer1.setCurrentViewIndex(0).

So in this basic example, depending on the value in the number input box, you can switch views:

if (numberInput1.value === 0) {
  tabbedContainer1.setCurrentViewIndex(0);
} else if (numberInput1.value === 2) {
  tabbedContainer1.setCurrentViewIndex(1);
} else if (numberInput1.value === 3) {
  tabbedContainer1.setCurrentViewIndex(2);
} 
// else do nothing

chrome_pCK7g6Y9Tn
chrome_pCK7g6Y9Tn1055×555 50.3 KB

If you have a more specific case, feel free to share a screenshot.

Hopefully this helps!

2 Likes
3

Really helpful!

Got that working, I'm currently setting the value of the input (on your example (numberinput1) using this JS in default value.

{{ formatDataAsArray(get_item_by_sku.data)[0]?.item_type || "" }}

How would I integrate that so it can function alongside the script you posted?

Functionality goal is:

Adjust "numberinput1" (in your example) based on input in another text field. This then sets the correct view in the tabbed container which can be adjusted if the user wants to change the initial input of "numberinput1"

Much appreciated!

4

In this case I'd suggest making the current view of the tabbed container use the value of your number input rather than handle it with the onchange of the numberinput component.

This would allow you to add more views without changing code and allow you to set/reset/programatically change the view by only altering the value of numberinput.

e.g.

Link the numberinput max/min to the number of views you have

image
image767×341 22.9 KB

Set the default view to the value of numberinput (ie if it's 3 then you want the second item in the views array so we do -1 on the numberinput value).

This means a user can change view as normal, or use number input, or you can set the numberinput from another event/script and you don't need to change the code when that happens, the tabbed container will show the "right" one.

image
image833×312 18.8 KB

forum.json (10.0 KB)

2 Likes
5

(post deleted by author)

6

@rjb2000 , do you have everything you need now? If you still need help could you add a screenshot or 2 and we can help you get it the way you need.

1 Like