FrameDrawer as a Module?

Is there a way to use FrameDrawer as a module?

More specifically - is there a way to configure UI Bakery to allow a FrameDrawer as a module to slide out OVER the main/parent UI?

Currently, if a FrameDrawer is a module, when added to a parent app, the drawer will only appear within the Module area - so if I only wanted to place the button, the FrameDrawer slides OVER the button. This makes FrameDrawer unusable as a complex module.

2025-01-30_08-21-25 (1)

Thank you!

Also, by extension, could I use Modals in this same way?
Where I design the modal as a Module but when added to the main application, the modal will overlay the parent app UI?

Hi @Sbenders_Pryon,

I’ve been trying to get this somehow to work in a manageable way but wasn’t able to. The main issue is that modules display as an <iframe> inside an <iframe> inside the actual module element.
Visually, it’s relatively easy to get the FrameDrawer above the main UI, but it will still be bound by the size of the module component. Thus I tried having the module take up the whole width, but that brings us to the next problem: interactions.
When having it take up the whole width, it’ll look like the FrameDrawer is actually on the main UI, but obviously you now cannot interact with the other components “behind” the module. I’ve been playing around with pointer-events and/or some javascript, but it didn’t work.

I think it might be possible to do, but it’ll require a bigger more complex script that detects and forwards clicks, hovers, etc. to the appropiate element in both the actual UI and inside the <iframe>s and propably some smart uses of css.

Personally, I think it’s too much work and custom scripting (which could also break something) to do efficently and it being reusable (as a module should be)

That said, the best simple way to use FrameDrawers or Modals inside a module would be to give it the space it needs:
31-01-2025_11-49-32
But at that point it doesn’t even make sense to use it as a module. Is the only reason you want to have a FrameDrawer or Modal inside a module so that you have a reusable component, or is there any other reason?

1 Like

Hi @Max , thank you so much for taking the time to investigate. :saluting_face: :pray:

I see how you made it work, but it still kind of appears “dis-jointed” from the main app (due to the requirements of the elements appearing/disappearing from view).

You’re right - the intent is to build complex + reusable modules using these components! My designer really likes modals! :smiley:

Specifically, i’m prototyping having the FrameDrawer contain a help/tutorial information, and I’d want that available on every page. Now that I have 6+pages in my app, maintaining the exact same component 6x (or more) is unwieldy.

So, this post was to see if that would be a scalable way of implementing these components as reusable modules - given the special handling required.

After your research, seems like the final conclusion is: probably not ideal.
Which is good to know!

Thank you so much!

1 Like

:man_facepalming: @Max - I’m so sorry, it just hit me:

One would just box that functionality inside a container, and modularize that.

Thank you again.

1 Like

To be fair, in the way modules are designed, that is requiring the space for the components in that module, it’s not intended that FrameDrawers (and potentially modals) open in the “main UI”. But that’s just how it is.

Glad you found a solution that works for you! :+1: