Get Rid of Page Feature

I just noticed if you use the "Preview" button, the tab order will be messed up just like you described. However, if you use the "Live Preview" button right next to it, the tab order is correct
image

Button Order (Left -> Right):
me (Orange circle with a whtie S)
...
Preview Mode (two arrows pointing towards opposite corners)
Live Preview (play button/triangle)
Share Button (big blue button)

the javascript above worked once for me, but I haven't seen it work again so I might have used the Live Preview instead of Preview Mode and not noticed which made me think the code did something. I'ma leave the post up just incase it does work for somebody, but if it doesn't work as I hopped for others I'll remove it so as to not confuse future readers.

Very cool and handy @bobthebear. You should do a little show and tell for this. I've seen too many related questions without a real solution.

1 Like

OK, its another workaround.

But remember we are doing these work arounds because the original code does not work properly.

It would seem worthwhile for the Retool developers to give us tools that work in the first place.

Mike

I personally just tested this out in live preview vs preview, and noticed that the tab order in the form behaved normally in the live preview (left to right and then down), but wrong in the preview. The live preview is what end users see though, so it should be fine regardless of how the form is laid out or what order you add fields. The other preview is just an editing preview to test things out without queries rerunning (although it is odd that it affects tab ordering).

2 Likes

Mike:
I have added a Birth Date field and now there are no blank spaces and the tab order is now working properly in my Patient Screen.

I am including a screen from another application (License) which has a blank. It tabs properly until it gets to the blank space, then it tabs down wards to the bottom left field, then it tabs up to the right column and tabs down the right column.

People have been talking about getting to a "Preview" Screen but I have no reference to a "Preview " screen on my computer.

Mike

Here is preview mode (with the arrows):
Screenshot 2025-07-25 at 10.46.13 AM
The play button to the right of it is live preview or its also called "user mode" since it's what users see/experience. From here on I'll refer to it as user mode. I don't recommend using the "preview mode" to test user experience, it's more for quick testing of functionality and to see what the page looks like without panels in the way.

I see what you mean about tabbing down and then back up to the right. If you're testing this out in the app editor and the tab order is incorrect, try testing it in user mode, and it should be fine.

1 Like

Mike_M:

I am unable to find the steps for getting to Preview Mode.

Possibly I need to pay extra for this.

Mike

The buttons are in the top right corner, next to the blue SHARE button:

Bob:

I am showing a screen capture of the upper right part of my screen.

None of these have any effect on the tabbing.

Mike

The play button / triangle button is the mode in which the tab order should be correct. If it isn't, something worth trying before moving on is to add an input field in that empty spot and then see if it fixes the order, then remove it again and hopefully it retains the correct order.

Otherwise, there is an existing feature request for being able to set the tab order. Some engineers have had a hard time reproducing the issue you're having, however. If the problem remains for you, and you're comfortable with it, you can direct message me your app export and we can further investigate this.

Mike:

Thank you for your reply.

I use the triangle button and it has made no difference.

I have found 2 things that help.

  1. Set up your input fields so there are no spaces. i.e. if your fields are 2 across, have all rows 2 across.

  2. If you are building for the first time it usually works fine with missing fields. Its when you you need to add a new field with a space to the right that it starts to act up. So if I need to do this, I rebuild the screen from scratch and then it works fine.

Its not perfect but it gets me by.

Mike

1 Like

Shawn:

I have finally found some time to work on this.

As per the screen below, the options for the width of the Page Panel are small, medium and large. If I select small, I still have an appearance of the page panel and this shows in both development and application mode.

Is there some way of getting rid of the page panel for the customer using the program?

Mike

Hi @mdsmith1,

Yes, you can hide the Page Panel (or sidebarFrame). You can also give it a custom width.

For a custom width, click on Fx, then add your width in px. If you do 0px then it will essentially hide it.

The other way to hide the Page Panel is to set Hidden in the Page Panel to true. You can also add JavaScript here to dynamically hide the panel. In the screenshot below, I added a segmentedControl component to show and hide the Page Panel with this:
{{ segmentedControl1.value === 'Hide' }}.

Shawn:

You will not believe this.

The Page Panels have disappeared in all my applications. This is what I always wanted.

Possibly my efforts to reduce the width of the Page Panel caused them to disappear overnight,

So the problem that I identified earlier, no longer exists.

Sorry to have bothered you.

Mike

Hi @mdsmith1,

Stranger things have happened! I'm glad you got it to the way you need. :smiley:

If you ever want to add it again, you just click on the + beside you page to add a component and you will see it there. Just click on it and it will add it for you.

I think he wanted it hidden for everybody except him.... maybe not? but if so, I'd probly set Hidden on sidebarFrame1 as {{ current_user.groups.find(group => group.name === "admin")? false : true }} instead so you don't have to manually unhide it

1 Like

Bob:

You are master of the work arounds.

It should not require complicated code to hide the page panel which has no useful purpose.

Mike

1 Like

:beers: I always feel bad giving you workarounds because I think that makes up like 99% of my "solutions" I've presented to you (I'm sure its even worse since they're mostly bug workarounds, instead of workarounds for a missing feature or component)... but especially since I know you aren't a big fan of them in general (if I remember right you're a SQL/DB Engineer person? so ya, I'd get annoyed having someone toss ridiculously weird looking code at me all time :laughing:).

Bob:

I have the new grid working well with work arounds. Most of this code is less than 40 characters long.

I will give you an example. I have never liked the selected row color. The solution is the code:

{{ currentRow.row4 === table1.selectedRow.row4 ? "red" : "" }}

in the row color field. (see below)

This is fairly easy,

But if we need to put in 200 characters of code, then I think the development people should look at changing the tools of Retool.

Mike

ya I 100% agree, the {{ }} needs an update so that it allows multi-line input. the biggest issue with putting javascript in those is having to design absolutely ridiculous one-liners you'd normally never see in production code due to their difficulty in reading and maintaining.... :laughing: I really hate to do this, but by now you know me.... there is an in-place workaround for this (other than making a Function instead of a Query) :innocent:

(function() {
  // Code to be executed immediately
  if(currentRow.row4 === table1.selectedRow.row4){
    return "red";
  }
  else {
    return ""
  }
})();

now you can write your code in notepad or whatever and you can code how you normally would with temporary variables and whatever, just don't expect to be able to read it in retool after it applies line wrapping in a very narrow text box.

"Give a coder an inch, and he'll use it to recreate what he feels is missing."
- Some angry boss, probably

1 Like