Run query on container tab select option

Simply add the option to run a query on selecting a tab in a tabbed container. This would allow to run a JS query that could use the selected tab index to run specific SQL queries instead of either running all queries first (which can be heavy) or having to set the queries to run on input change and using the “disable query” function which is limited and can get a bit messy.

3 Likes

Yes this so much!

+1 for this. We need the ability to run just-in-time queries based on any selected, click, or change event.

1 Like

Hi @Joao! (& @axsuul & @sfbrophy)

Yes! ideally (& hopefully at some point) this will be supported out of the box, we can currently use the Query with JSON to work around this and have a query triggered on tab selection:

Firstly, we create a Query JSON with SQL query which watches the input of selectedTab and onSuccess triggers a JS Code Query:

This query will be triggered every time the selected tab changes. Then our JS Code query will then conditionally trigger the other necessary operations:

From there we just need to have correct fetch query or chain or queries for each tab.

Hopefully this helps!

5 Likes

giphy

3 Likes

If the use case is more simple and limited to triggering a non Run JS query on the tab change, you can also try this approach:

Set a query to "run query automatically when inputs change" and reference the tab inside of the query's disabled option.

{{tabbedcontainer1.selectedTabIndex != 1}}

This counts as an "input" to the query, and will trigger the query each time tabbedcontainer1.selectedTabIndex recalculates. It will be disabled if the selectedTabIndex is not the second tab here, having the end result of triggering each time the selectedTabIndex becomes set to 1

For more involved logic though, you would need to build out a routing query like Ben has!

4 Likes

Alex, this is exactly what I did to go around the issue and even mention it in the original post. However, Ben’s solution is closer to how a run on tab selection would work. The former workaround is messy and if you don’t want to run the queries every time you change tabs, since the data won’t change (for the most part), you lose the ability to trigger the queries from, lets say, a button. At least in my case where I used {{query.data != null || tabbedcontainer.selectedTabIndex != n}} I’m sure I’d be able to get it to be trigger by a button as well but like I said, it would be messy.

A little extra, on Ben’s case I’d use a switch statement :slight_smile:

3 Likes

I used both solutions, as I need to call a JS query when they switch tabs, as well as prevent all the queries for other tabs to run (which I have triggered in other ways)!

Thanks y’all!

This is now an easier workflow using event handlers thanks to @garrett!

1 Like

there is no selectedTabIndex anymore what do i do to run the query as soon as the tab is selected? @alex-w

Hey @ritvik_singhvi

You can now use the tabbed container's currentViewIndex property if you want to restrict the event handler to running only on specific tabs, otherwise the event handler will be triggered immediately on the Change event type.

1 Like