I have had the great misfortune of inadvertently developing an app with a Page Feature.
This is interfering with the display of my code.
How to I change my app to make it a normal app rather than a Page app?
Mike
Hi @mdsmith1,
I understand the confusion. Retool now only offers multipage apps when you create a new app. The first page is essentially similar to their previous single-page apps.
If possible, do a json export before you do any changes.
Here is a tutorial to get you familiar with them.
Shawn:
I read one tutorial and this one is different. So I will now go through this one.
I simply do not understand why you could not have let us continue to use the single page option.
Its the same with the legacy grid. It has much better coloring than the new grid.
I think Retool needs an oversight group to ask the coder: Why are you doing this? And what are the Pros and Cons? And if there is any question, the legacy option should be retained.
The edit screens do not work properly. I would much prefer that the coders work on fixing the things that don't work rather than develop new features that are retrograde.
Mike
Shawn:
I have read the tutorial.
One thing that is missing is the reason for this feature.
We seem to have a solution looking for a problem.
Mike
Hi @mdsmith1,
I am just a humble Retool developer as you. 
The multi-page app takes a little getting used to but it is almost the same if you prefer to only have 1 page. I often use only the first page for single purpose app and demos.
Let me know if you need help or have questions.
Shawn:
It would help if we could open and close the Page Panel. There is only so much screen space for working on code. The Page Panel is infringing on space for getting things done.
Mike
Can you send a screenshot of what you are looking to achieve?
When you are on a particular page, if you are on the Code tab, you have a choice of either putting your code in the Global area (all pages) or the page area (the default is page1, my screenshot is Home).
If you want more space in the default area, you just drag the line up.
If you want to rename the page, go to the Pages tab, right click on the pag,e and rename. Here you can also set which page is your default page and reorder them.
Feel free to share a screenshot if you need more specifics.
Shawn:
Here is the reality of screen space in the edit mode.
The Logo/Page Panel is taking up a lot of space. If we could close the Logo/Page Panel when required it would be helpful in my view.
Mike
Shawn:
OK, how do I get to the screen that allows me to change the width of the Page Panel.
All other screens have an "X" that allows for opening and closing the Panel. That's what I would prefer.
But your suggestion would help as well.
Mike
Does this help any?
Notes:
- you will need to add a button to open up the Sidebar again. you can use the code
sidebarFrame1.setHidden(false)to do this then you also want to set it's ownhiddenproperty totrue. when the 'X' is pressed add another event handler for 'click' to set the buttons hidden state tofalse. - To get the 'X'/close button next to the Logo, I had to create a container first then put both components inside which let me adjust the width so they sat next to each other instead of on top of one another:
BONUS:
you may have noticed how Drawers, unlike Sidebars, have an option to enable pressing esc to close it. You can mimic this too if you want:
If you followed the 1st note so you have a button to open the sidebar then you'll want to edit your shortcut so that it hides the sidebar and it displays the 'Show Sidebar' button:
sidebarFrame1.hidden == false? (sidebarFrame1.setHidden(true), showSidebarButton.setHidden(false)) : null
I don't suggest using code like that any other time than inbetween {{ }}. the above is the same as:
if (sidebarFrame1.hidden == false){
sidebarFrame1.setHidden(true);
showSidebarButton.setHidden(false);
}
else{
null;
}
It's a one-liner solution for executing multiple statements that would normally be on seperate lines.... if you're bored it's also a good way to piss off ANY coder
1 Like
@Tess is there a FR to add an option to select what side of the screen a Sidebar or Drawer is displayed on?
Hey all, I can jump in here to maybe clear things up. Here is our changelog from when we stopped offering the option to create single page apps. If you have no intention to use multiple pages @mdsmith1, you absolutely don't have to!
I should draw a distinction between the page panel and the sidebar in your app, however. The page panel in the app editor is what you can use to manage page settings in your app, shown here:
This behaves like all other panels as you would expect, and you can hide it while editing. What you have been calling the page panel is a sidebar frame. This is basically a component in your app, rather than a part of the app editor. If you have no intention of creating other pages to navigate to (like home, customers, or settings) then you can just delete it. Or if you do want to try out using multiple pages but you don't like the sidebar, you could use a drawer frame (which has the ability to hide it built in) or use a header with a navbar at the top of the page instead. This can all be managed from your component panel:
Let us know if you have any other questions!
Also hi @bobthebear, yes there is a FR in already for choosing what side a sidebar or drawer frame is on. And thanks to you and @Shawn_Optipath for your help in this thread as usual!
3 Likes
Mike-M
How do I create an app that has a single page?
Mike
If you create an app without using a template it will generate an app with a blank canvas, with only one page. From there you should be able to add components and build out your app however you'd like without adding any pages to it.
Mike_M:
OK, but this will not like the original app where we did not have the Page Logo panel.
I have had to abandon my original app because the pages became "out of range". I am rebuilding my code in a new app, app by app and I am putting all the apps in the Global Section and leaving the modal screens in the global section.
I will look into your suggestions about making the page panel smaller.
We have survived the new grid with an amazing number of work arounds. It appears that the Pages feature will be managed in the same way.
Its very hard for me to leave Retool because I have so much code in the Retool environment. I will continue looking for other alternatives because I do not like the directions that Retool is taking.
Mike
I would be curious to know more about the issues with your original app, to see if we can mitigate them rather than rebuilding from scratch. If you are already far along in converting it to a multipage app, then I'd be happy to help with that as well. You're also welcome to stop by office hours tomorrow, (or any tuesday/thursday) where we can give live help.
I empathize completely with any frustrations over the changes. Ultimately the decision for Retool to go with multipage apps over single page apps is based on improving app performance overall and simplifying the app building experience. It's definitely not our intention to make it more complex, and so I'd like to reduce that friction in any way I can.
1 Like
Mike_M, I do appreciate your continued communication with me.
What bothers me about Retool is your developers charge head long with improvements without asking your users if they need the improvement.
I mentioned the new grid which requires workarounds to function as well as the legacy grid. Nobody asked for the new grid, you just delivered it and forced us to pick up the pieces.
I am rebuilding my app piece by piece and have found that modular screens seem to disappear from the list. This may be my fault. I will put together a report once I have it rebuilt.
There are serious problems with the editing screens in that the tabbing does not follow natural order i.e. left to right on line 1, then down, then left to right on line 2 etc. (see below)
I have discovered that it follows the sequence of the text input fields. In other words it works fine after the original development but if you have to add a field in the middle of the screen, it will not tab properly.
This is a serious problem. People expect natural tabbing particularly if they are touch typing while looking at a source document.
I have reported on this a few times already but it has not made it to the top of the list. Meanwhile we are getting new features that require workarounds.
Mike
sorry to give another workaround, but the following code will grab all forms with class=_form_ezhxv_1, then it gets all input elements inside each form and reorders the tabindex property:
document.querySelectorAll('._form_ezhxv_1 input:not([type="hidden"])').forEach(function(element, i) {
element.setAttribute("tabindex", i + 1);
});
to find the class:
first go into preview mode, then right click the form and select Inspect:
4 Likes