Set default tab view using URL param?

[MikeM]

Hello,

I'm trying to set the default tab view using a URL parameter. The tab I wish to go to is number 3, however I can't work out how to do this.

In the URL parameter screen within Retool, I assumed it was like
{{tabbedContainer1.currentViewIndex.setValue()}} however this does not work.

Could I have some help please?

[ScottR]

@MikeM you should use URL parameters found in the ... menu

Also see:
Deep linking

[MikeM]

I have tried that and unfortunately it does not work

[ScottR]

@MikeM
Try the following:

[MikeM]

Unfortunately, when I set that parameter to 3 (for example), it'll still show the first tab and not the third

[ScottR]

@MikeM What is the Default view set to?
Can you share some screenshots of your set up?

[MikeM]

I've tried replacing/removing the default view and that has not worked either

[ScottR]

And what about the URL Parameters set up?
Did you set it to
{{yourContainerNameHere.currentViewKey}}

[MikeM]

Yes - I believe this is correct

[ScottR]

I don't see the tabbedContainer in that screenshot and what is the Key value for View "1" as you have set...
Mine is

[MikeM]

Mine is the same as yours, I believe.

[ScottR]

Your label field is not... Can you add View 1, View 2, and View 3 for each tab label and leave the values as you have set them

[MikeM]

I have tried that and unfortunately have the same result.

[ScottR]

That's very odd - is there a #tab in the URL?
I am attaching a JSON file (mini app containing what works for me.) for you to import and test...
TabbedContainer.json (9.3 KB)

[MikeM]

Thank you - When I change the URL parameter to tab 3 and try to go to that URL, it still defaults to 1 using the example you gave me. Maybe this is a bug within Retool?

[ScottR]

OK so when you copy and paste the URL with #tab=3 in it - the View 1 label is selected... now I know what you're referring to as you did not post a screenshot of the URL....
Looking at this more closely...

[MikeM]

Unfortunately that has not worked either, it still defaults back to the first key

[matth]

I believe there are a couple of ways you can handle what you want to achieve.

1. Use a js query triggered on page load to set the tab view by key using the url hash param. Something like

if (!!urlparams.hash.tab) {
  const tabKey = parseInt(urlparams.hash.tab, 10)
  console.log("setting tab view to: " + tabKey);
  tabbedContainer1.setCurrentView(tabKey);
}

2. Set the "Default view" property within your tabbed container to

{{ parseInt(urlparams.hash.tab, 10) }}

I don't remember having to use parseInt() but I could be wrong -- I feel like the tabbed container api changed recently as well.

[ScottR]

@matth I agree - something changed because you used to be able to use urlparams.hash... and that would grab the value from the URL as the default value - maybe @MikeM - can you tag this under support... feel that running a query to do this seems overkill...

[MikeM]

This has done it! Thank you for everyones help!