Hello
I am building a multipage application. The landing page is a table of records, on click of the selected row I want to navigate to a detailed editable page where the user will edit the field value and save it. Need pointer how to create two top level page in Retool App and navigate to detail page by clicking button. Thank you for your help.
Thanks
A
@anilr Have you read some of the documentation regarding how to do what you are looking to do?
https://docs.retool.com/docs/share-data-between-apps#sharing-data-using-url-query-strings
So, let's say you first page has a list of users and in the the selected row, there is the user_id. You can pass that along to the next "page"/app and when that user_id is "read" by the next app, you could populate the form using a query.
Also, I suggest just using a modal to allow the user to edit the information in the row OR make the column editable and allow the user(s) to save changes.
If you could elaborate on your use case and share some screenshots; the forum, I am sure, will have plenty of good suggestions for you!
The link is broken. It is shared in several posts and broken everywhere.
Here is some similar one.
the problem with multi app pages is that every time we click on a link that does a "GoToApp" action, the whole page blinks, waits a sec, and then we're sent to the next app. It's getting quite frustrating and I know I'm not the only one. Have you seen what it's causing it? how to avoid it? thanks
Hi @Ignacio_Martinez, what you pointed out is true. We are currently working on multiscreen apps, you can follow the thread and add your +1 here:
great. thanks. But is there any news on why "GoToApp" flickers ?
Hello @Ignacio_Martinez!
The reason for this flicker is fairly complex. Retool is built with React/Redux and there are a bunch of small steps which are triggered and run when loading pages and specifically when the page changes.
The flickers are not 'suppose' to happen, but this behavior is the byproduct of components asynchronously fetching and loading data. The old page flashing before the new page loading is due to our web pages loading on the client side and a byproduct of the app's frontend being designed for single page applications.
There are many resources on HTML 'painting' as well as design patterns for building multipage apps to avoid this behavior if you are looking to code up and React/Redux app from scratch 
For all intensive purposes with Retool, we are currently demoing out internally out new 'multi-page' app which is designed with the best patterns in mind so as to avoid this issue. There isn't anything that can be done in the short term to change how the new app loads when the previous page was another Retool app 
Multi-page apps will hopefully be coming out soon so stay tuned on our release page!
Thank you for that reply. That puts it in a better perspective. As a workaround, when I need to do a "GoToApp" thing without it being triggered from a sidebar, I do a hidden = true to the main container of the app I'm in, and then I goToApp. That does the trick. Another solution that works ok is having a multiple view container. But I don't want to charge my app that much. My tool is comprised by 10 apps, so there's a lot of flickering, and sadly I can't do the "hidden main container" workaround from a menu module. And copying all of my components and queries from each app into a single app is gonna take a long time so I'm kinda stuck... no other option anyway. I wonder if someone else could make it work some other way. This is a major issue, I'm sure there's plenty of people looking for workarounds.
Thank you for the details!
Love the workarounds using the toggle for the hidden attribute.
Luckily, as Paulo mentioned above, we are finishing working on our official launch for multi-paged apps!
I will check in with the engineering team to find out about best practices for migrating an existing app with 10+ apps connected to it over to the new system which will have smooth, seamless transitions and no flickering
We currently do have some documentation on importing/exporting apps here to reduce the time of manually moving components and resources/queries from app to app.
My dream is that when multi-page app is launched, you can import in all the apps you are using and they will work together straightaway 
I will keep an eye out on the forums for anyone with short term workarounds and hopefully they can share on this thread their tips!
I'll be watching the release news, then.
Speaking of workarounds, I have a module menu that I use in my multiple apps, and I tried to make each menu item to get my main container hidden = true (all main containers have the same ID in my apps) but it doesn't work via script. Can you think of some way where a module can affect a component in an app? I'm pretty sure the answer is "no" or "not really" but hey, I'll throw that bottle into the ocean, as we say here in France.
thanks for your replies.
Great question. For modules, there is one way to pass data to the main app.
This method is called 'outputs' you can read about them in our docs here.
For your use case, you should pass a variable from the module, and in your main app, you can toggle the hidden option based on what this variable is set to.
I made a little test using a boolean, if you have many components that you want to switch the hidden property for, I would recommend an object, where they keys are the components and the values are booleans.
Inside the module, you can write logic to flip the boolean value on button click.
There are lots of creative ways to use Module outputs, I agree it would be much easier to use scripts from the module but for some reason that functionality has not been developed but the Output should be a workaround for you to tell you app what to do based on the data you pass to the outputs.
awesome, thanks. That worked like a charm. I had to recreate the whole Menu item link behavior one by one, utils.openApp([app_id]) and highlighted = {{ retoolContext.appName = "..." }}
I guess that's how I should roll when having a custom link for a navigation menu item right?
Glad to hear that it worked!
In terms of Event Handlers on button click for navigation, your method is how I would likely set things up if I had customs links/URLs that I wanted to navigate to using a 'Run Script' Action.
The alternative would be to have the Event Handler Action be 'Go to App'. Not sure if there is a major difference between the two. Might be interesting to compare both 
