Url hash changes are not synced

I'm trying to build a simple navigation bar that I can use to navigate between tabs in a tabbed container.

I really don't want to write a new JS query for each tab click (tabbedContainer1.setCurrentView("view1") and so on).

I'm thinking of using the url hash params syncing to update the current tab.

So, the good thing is that the hash changes are reflected on the address bar, but unfortunately only picked up by the tabbed container when you do a full reload/refresh of the page.

If there's no page refresh, the hash is changed but the tabbed container does not change the view.

This would have been a really neat way to use the Navigation component to control a tabbed container if I can get it to work.

Any clue as to what I'm doing wrong ?

As an alternative, I thought of calling a query but the JS query has no way to figure out which navigation item was clicked.

Hi @fragrant_issues I'm not able to reproduce this in the latest Retool version. Can you share which version of Retool you are using? Do you have the option to set the tabbed container's default view in each app and would that work for your use case?

Hello, I'm using Retool version 2.94.9-6beff73 (Build 194) - On-prem deployment

As Amanda mentioned, this does seem to be working on cloud version 2.101.0, but not any self-hosted version (2.99.3 and below as of this post). As a workaround, instead of firing a JS query, you can have a Query JSON with SQL query listen for changes in your hash parameter and then trigger switch the tabs on your container:

Let me know if that works?

Thanks @Kabirdas and @Amanda. I got this to work by setting the default view of the container to be the url hash.

Screen Shot 2022-10-03 at 8.29.37 am

But I'll give this a go once we upgrade our on-prem deployment. Thanks again

1 Like