Responsive - Table > Detail View: enable drawers for mobile

Hi Everyone - I am new to Retool so excuse my ignorance here. I am building a responsive web page with a table of records & a create record form - something really simple.

The table works fine and for create record view, I am trying to use a drawer. The drawer launches in desktop view but it does not launch in mobile view. I double checked my configuration and everything is visible in mobile but clicking on the button does not launch the drawer. I am wondering what I am missing here.

As a sidenote, I have tried modal button as well but that does not work in mobile due to layout conflict with the table. Kindly guide, I am sure I am missing something but not able to figure out what.

Hi pankaj, welcome to Retool!

I haven't tried the new drawer on mobile so I'm sorry to hear it hasn't worked. It would be good for the use case you have. Microsoft Power Apps for example slides your Create/Edit form in from the side, so it's a common idiom.

You could try hiding a container to the left/right/top/bottom of the table and then showing it when the user selects the record. You could even hide the table at the same time. This would give a similar result but without the animation.

Regards

I am not sure how this would work on the mobile view. My (very limited) experience with Retool layouts has been that it's a single layer surface, so we cannot overlay anything. This would mean that I need to not only hide/show the appropriate elements but would also need to reposition them in the canvas on the click of a button. Is that what you are suggesting?

Oh sorry I see what you mean now. I don't know how to help with that but hopefully someone at Retool will pick up this thread and give you a hand.

hey @pankaj (and thank you @stewart.anstey for chiming in!) I've confirmed with our eng team that 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 :slight_smile:

Thanks @kbn for letting me know.

@pankaj @stewart.anstey as an update, you should now be able to enable drawers for mobile! From the component tree, select your drawer frame, then in the advanced settings, toggle "Show on mobile".

Then, you'll need to also click into the component(s) that are within your drawer frame, and do the same thing to "show on mobile" in those components' advanced settings too.

Happy mobile responsive drawer building! :slightly_smiling_face: