MikeM
May 31, 2022, 5:17pm
1
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?
@MikeM you should use URL parameters found in the ... menu
Also see:
https://docs.retool.com/docs/deep-links
MikeM
June 1, 2022, 8:01am
3
I have tried that and unfortunately it does not work
ScottR
June 1, 2022, 11:38am
4
@MikeM
Try the following:
MikeM
June 1, 2022, 11:56am
5
Unfortunately, when I set that parameter to 3 (for example), it'll still show the first tab and not the third
ScottR
June 1, 2022, 12:06pm
6
@MikeM What is the Default view set to?
Can you share some screenshots of your set up?
MikeM
June 1, 2022, 12:37pm
7
I've tried replacing/removing the default view and that has not worked either
ScottR
June 1, 2022, 12:41pm
8
And what about the URL Parameters set up?
Did you set it to
{{yourContainerNameHere.currentViewKey}}
MikeM
June 1, 2022, 12:48pm
9
Yes - I believe this is correct
ScottR
June 1, 2022, 1:31pm
10
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
June 1, 2022, 1:45pm
11
Mine is the same as yours, I believe.
ScottR
June 1, 2022, 1:57pm
12
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
June 1, 2022, 3:08pm
13
I have tried that and unfortunately have the same result.
ScottR
June 1, 2022, 3:30pm
14
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
June 1, 2022, 3:43pm
15
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
June 1, 2022, 3:56pm
16
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
June 1, 2022, 3:59pm
17
Unfortunately that has not worked either, it still defaults back to the first key
matth
June 1, 2022, 4:25pm
18
I believe there are a couple of ways you can handle what you want to achieve.
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);
}
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.
1 Like
ScottR
June 1, 2022, 4:35pm
19
@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
June 1, 2022, 4:37pm
20
This has done it! Thank you for everyones help!