Deep linking doesn't work for my app / Value of URL parameter disappears before app has loaded

Hello Retool team & community,

I currently try to make deep linking work for one of my apps. I have one segmented control (named "re_filterToggle") with two elements and a table (named "re_contactList") from which I pass the values to the following states in the URL: contactType (either "tutor" or "student") and id (which is dervied from the row "contact_id" in the table).

To do so I have applied exactly the same approach as shown in your Docs (see following screenshot), but the problem is that once I load the app, the value of the URL parameter "id" disappears from the URL before any element on the app is even loaded and thus no row gets selected in the "re_contactList" table.

(To be clear: What works is passing the value of the segmented control and the selected index of the table to the URL. Also the segmented control behaves correctly, but it doesn't work for selecting the correct row in the table.)

UPDATE: I think I have an idea why this is happening: It seems that Retool at first updates the URL with the current selected row of a table. Obviously when loading an app either the table will not be loaded at all (as it takes some seconds to do so) or there is no row selected inititally. Then the hash in the URL gets reset to nothing/null and when the table has finally loaded the information is already lost which row should be selected.

I have tried several things but can't make it work. Would be great to receive some help on this issue. What am I missing here?

Thanks and best,
Timo

1 Like

@betternet Hi, I'm experiencing the same behavior. I'm just trying out deep links now and I tried it on a few different basic components (select, text input, number input), and when I load the url with the deep link the value is wiped out for the reasons you've outlined.
I was able to get it to work by setting the default value of the component. I set the URL Parameters the same way you have, but in the component I set the default value to {{ urlparams.hash.key_name }} and that seems to work for me. Looks like the default value is set before any other value takes effect, so the url is not adversely affected. Not sure if this is required and just missing from the documentation, or if there is something else we should be doing to get this to work. But if the components you are using have a default value attribute you may want to try this.

Thanks,
Peter

2 Likes

Hi Peter!
Thanks for your reply and hint. This seems like a good workaround for the components you mentioned, but in case of the table where I want to select a specific column, this doesn't work as my (default) value has to be the data source and I can't point to the URL hash parameter.

Would be great to get some feedback from Retool staff on this issue.

Best, Timo

Good point, sorry, should have noticed you were talking about a table. Agree, would be good to hear from Retool on this. For my issues the default has helped but doesn't solve it as setting the default doesn't seem to trigger dependencies, so my other components have stopped updating now. To get it working I've done the following (convoluted but it works for now until I hear something better):

  • I have a hidden component that uses the url parameter value as its default.
  • I created a JS script that sets the value of the visible component based non the value of the hidden component and I configured this script to run on page load. Now my page is behaving as expected. I may be able to set the value directly from the url parameter instead of a hidden component so will try that, but I got to this through a lot of trial and error and haven't cleaned it up.
    Again, not sure this helps in a table situation but sharing anyway.

Peter

1 Like

That sounds like a very smart workaround for the moment. Thanks for sharing! I will see if I can adapt this for my case and hope that Retool can help/fix this in the long run.

Best, Timo

Hi Peter,

I actually used your approach with the hidden component to make work what I wanted to do! So thanks for sharing your experiences here..

Best, Timo

1 Like

Sorry for the late reply here, you may also want to consider using a temporary state variable instead of a hidden component :slightly_smiling_face:

So what is the actual solution for OP's problem? I am also trying to accomplish the same thing here. I want a row of a table selected on app launch based on the URL params I'm passing through.

Hi @Infamous45! Stepping in here. It seems like this is currently broken and is a bug we're going to be fixing soon. I brought this up specifically during a product prioritization meeting, so hopefully I'll be able to share good news soon :slightly_smiling_face:

Hi @victoria, this is a recurring pain-point for us as well.

Something I'd expect to be relatively basic — landing on a specific tab of a container based on a URL parameter — seems impossible to get right, or at least via the 2-way hookup of params to values as described in the URL parameter documentation.

Is there any update on the bug? And if for some reason the URL-param <> tab deep view is exempt from the problem, could an example be added to the docs page?

Actually scratch that; I can get URL-powered deep-linking of a tabbed container to work.

The problem I was seeing for an old app (for which this behavior used to work) was that its view keys were 0-indexed integers, which I guess was the default when the components were created. Now they're string-based starting at "View 1" when created from scratch.

I've attached a bare-bones test app in JSON form.
test deep link tabs.json (8.1 KB)


Hey @dguzzo! It looks like container1.currentViewIndex is returning the correct index!

Same for tabbedContainer1.currentViewIndex

Is this what you were looking for? :crossed_fingers: