Hi all, we’re introducing new Frames that help you create new layout patterns in your Retool applications. First up, a Drawer Frame that adds a slide-out container to the right side of your app. You can use a Drawer to display forms, drill down into your data, filter your data, or more! This feature is rolling out this week and if you’re on cloud, you should have access to it in the next few days.
You can create Drawers by going to the component tree and clicking the + button next to Frames.
You'll notice that the addition of Drawers also comes with a new canvas editing experience! All your frames are now combined in the editor, and the canvas looks more like it does in Preview or Viewer mode. We hope this helps you get a better sense of what your app's layout will look like to your users.
Feel free to add feedback or feature requests to both Drawers or the new editing experience to this thread!
Hi @AnnaW this looks great, do you know when it will be included in the self hosted version? I know v3.8 is coming next week with the new UI editor, any chance it'll be in that?
Very nice ! Especially as you can have different drawers e.g. triggered from different cells.
Off the bat as I wanted to move or copy an existing table component from the Main frame, I found out that:
drag n' dropping a component between frames (or sections thereof) is not supported
copy/pasting from Main to Drawer's Body does not work intuitively
Re 2, the trick is to add first a dummy component e.g. Text, then you can paste below the component copied from another frame (and remove the dummy one).
Ideally though, a section (Body, Footer) should have a context menu that enables pasting into it directly.
Ah that's a shame but thanks for the info, we're operating on a quarterly update schedule and our next one will be 3.8 so will miss out on Drawers for a while.
@PatrickMast We update the Retool Changelog on Fridays, and you should see announcements of new features on the Changelog once they're fully rolled out. Since we're ramping up drawers over the next few days, the page should be updated next week!
@yiga2, thanks for trying this out and the feedback! You should be able to drag components between the main canvas and a drawer if you turn off the "Show overlay" property under Appearance.
Also, you should be able to "Select" the Drawer frame and paste a Table directly into the body with Cmd+V -- without adding a dummy component. We'll work on adding the same options to the context menu!
That works indeed, thanks ! Current featured drawer is useful to show vertical context. For usually wider components e.g. Table, I would love to see a drawer sliding from the bottom !
It could be an option (bottom/right) with a width/height parameter.
Pushing it further, both width and height could be configurable, as well as the margins (pt or %)...
Nice addition. I was hoping for that UI element. Already in use ;). Looks like it was inspired and used by IDEv3. I propose we should be able to choose the direction: left, right, up, down.
Drawers are not supported on mobile right now, but we're tracking interest in this internally. The good news (tentatively!) is this may become supported when the team does some more work on modals, targeting by the end of the year
