Deep linking

Store page state in the URL for easier sharing.

Your app can sync its state to the URL, which lets you link directly to specific records. That way, you can send links to a particular user, and a user's particular purchase, without any manual work.

Let's say you have users and purchases, and you've built a page to search both of them. You want to share - with your friend - this current state - with Janet selected, and purchase 1979 visible:

Janet selected, and her purchase with ID 1979 visible.Janet selected, and her purchase with ID 1979 visible.

Janet selected, and her purchase with ID 1979 visible.

With deep links, you can just copy and paste the URL and send it to your friend. Without deep links, you'd need to send over the link of the app, and tell them to type in "ja", select the 2nd user, and then select purchase 1979, which is much more work.

To use deep links:

  1. Bring up the URL Parameters editor by opening up the file menu and clicking on URL parameters:
  1. We want the page to automatically update the URL whenever a user searches for a value, selects a user, or selects a purchase. To do that, we'll configure the parameters:
Storing page state in the URL.Storing page state in the URL.

Storing page state in the URL.

Now, the page will have a URL that looks like this: https://yourdomain.tryretool.com/presentation/UsersDashboard#customerId=45&purchaseId=1979&searchTerm=ja

  1. Great! We've got one-way syncing working (page state changes -> URL changes). But we also want to sync the other way: if you open the app with these parameters, we should set the search box, and the selected rows in the tables correctly. To do that, we'll fill in the 2nd half:
Reading page state from the URL.Reading page state from the URL.

Reading page state from the URL.

Now, when you open up the URL https://yourdomain.tryretool.com/presentation/UsersDashboard#customerId=45&purchaseId=1979&searchTerm=ja, you'll see the correct selected customer and purchase.


Did this page help you?