[how-to] Navigate to the next tab in a tabbed container with selected information

Hello!

This is inspired by a fantastic question that came up during office hours today.

The user wanted to click on a table row in tab1 and have it open up some info on that row in tab2.

next tab from selected row

We accomplished this by adding an event handler to the table to watch for a row click and navigate to the next tab in our tabbed container:

Then in our tab2, we have a table that shows data from a query (getSpecificUser), which gets information based on the selectedRow in our previous table from tab1.

For final touches, we wanted to only show tab2 if it was "in use" or actively clicked on. There are many ways to do this (in classic Retool fashion), but a quick way is to set the hidden property to {{tabs1.value != "View 2"}}, which basically says to hide tab2 UNLESS the current tab is indeed tab2 (named "View 2" in my example).

See attached app JSON below if you want to poke around with my setup! You can import this JSON file by clicking Create new (home page) > From JSON. Quick docs on exporting/importing apps here.


tabbed container open new tab (1).json (19.9 KB)

2 Likes

Happy to answer any questions or add any extra functionality!