Switch between existing instances of apps

HI there. I have a number of discrete apps that users need to switch between, often switching back and forth. The sidebar (or just the navigation component) seems ideal.

Is there anyway that the navigation can switch to an 'already open' version of an app? Some of my apps need to load quite a bit of data when they launch, the user may have applied a bunch of filters, sorts, etc.

The only ways I can see this working:

  • Each app is actually a module, and the sidebar just hides all the non-active modules and shows the current. This sounds like it would blow up the browser if you then had 10 apps open with all of their data
  • Each app opens in a separate tab, but (i'm not an expert) I suspect this falls foul of cross-browser scripting issues (e.g. one app can't 'look' for an already open version of the selected app in another browser tab)

As I understand it the sidebar basically 'simulates' it being one app; by having a completely consistent sidebar component (say with a module), then each app looks exactly the same, but when you click on a sidebar item to go to an app it closes the current app, then opens the new one.

Is that right? Is there anyway around this, or does anyone have interesting workarounds? Would caching queries do anything?

Thanks!
Dominic

1 Like

Hey @domjammoo!

At the moment there isn't a one-size-fits-all solution for being able to switch quickly between apps, one of the best things you can do is to look over the other methods for sharing data in this doc and also look at our performance best practices doc and try to design your apps while keeping considerations from both in mind. I know it's not the ideal answer right now and it sounds like you're already started down this path. Having more options for building out multi-page app experiences is something we're aware is a big ask from Retool developers.

I think query caching is a great option to use here. It will work as long as the query being sent is exactly the same, so if you're integrating filters/sorts into your query there's a good chance the query will need to run normally again. But for any duplicate data you have, it can certainly save a lot of time. You can also explore localStorage as a way to share information between different apps. As you mentioned having apps as separate modules can lead to very large apps and poor performance, however, it definitely isn't an idea that should be thrown away and can also be useful!

You might try something like having a single navigation header with 6 views grouped into 3 or 4 different apps based on:

  • which of those views share data from expensive queries
  • which queries can be most effectively cached
  • which views a user is more likely to rapidly switch between
  • which views have more light-end front ends so that grouping them won't impact performance as heavily
  • etc.

I hope that's a bit helpful!

2 Likes