Restoring timeframe and filter parameters when 'back' is pressed in a custom app

[andycarlson]

One of the main motivations for using a custom app (in preference to a dashboard) is slick navigation - in via Intents, out via Intents, click on graph dimension values to add filters and so on.

All of which works well, but if I navigate within the app or away from it into another app and then click the browser 'back' button... all of my filter parameters get reset to where they were when the page first loaded.

I have had some success using searchParams from React Router but this mechanism overlaps with the job that Dynatrace Intents are trying to do so making the two mechanisms play nicely together has been tricky - either missing updates, the wrong mechanism 'winning' or causing rerender loops. I now have it working in most cases (without causing the Intents to stop working)... but not all.

Dynatrace developed apps seem to have made this work. From what I can see they write the filter params into the URL... which is what searchParams does... but in a different encoding so I guess Dynatrace are not using searchParams.

So... what is the recommended way to restore filter params and timeframe on 'back' in a way that plays nicely with Intents and other parts of the Dynatrace component library?

[MaximilianoML · Accepted solution]

Hello, @andycarlson !

Your question is really good; I didn't find something about to persist these filters by User. But I found some "ways" to store User Data and then you can check if the user change, or leave the App.

Here is the doc Store user-generated data | Dynatrace Developer

Keep in mind, I'm not sure if this can, or is, the solution to your issue.

Regards,

Maximiliano Lopes

[MostafaHussein · Accepted solution]

I think you need to use AppStates check this documentation link first

https://developer.dynatrace.com/develop/data/store-app-user-state

this is the most compatible solution for you because it's user-oriented.

BR,
Mostafa Hussien.

[haris · Accepted solution]

Hi Andy,

you're right on the approach, as React Router is one of the things that can be used in this case.

As mentioned by others, one of the things you can use is appState. You can also use the useParams from React Router as you mentioned. 

The difference is that React Router will last only within the user's browser. User app state will last for that user, no matter where they access the app from, and app state will persist for all app users until changed. You only need to handle the change of filter to save it and then load it properly afterwards.

If you can share specific use cases where it doesn't work, this shouldn't be an issue if URL structure is preserved and state restoration logic is executed on page load or intent handling, and all filter values passed via intents are handled correctly.

Hope this helps, and if it doesn't, please let me know with specific cases where you're having issues.
Best, Haris

[andycarlson]

Thanks both. I haven't touched the app for a while now but from memory the issue is that if I arrive at the app via an intent and then use 'back' the first press basically wipes the parameter values and leaves me in the app but with default values. I then need to press 'back' again to get to the original page. It's no doubt related to the way I used to get 'back' and intents to both work. Sorry but I can't remember the other ways that I tried but with the alternatives I could either get intents or 'back' working but not both.

Anyway I will try out the app state thing when I am next working on an app (which is not now).

[haris]

Sound sgood Andy, let us know if you run into any issues.