Downside of Popup vs Floating Group for Side Drawers?

brad.h · 2024-12-16T14:17:20.071Z

Help me find reasons not to use the below setup with Pop Up instead of Floating Group for a side drawer:

button clicked > animate popup element to slide in (like a side drawer)
We added css into HTML element to keep it right and 100% height.

Reason For Change = Modular Build:
We’re implementing many Reusable Elements and Floating Groups don’t work as side drawers in RE…however popups work extremely well in RE.

Reasons to NOT use I found so far:

occasional bug where drawer (popup) won’t appear but the gey out does appear which makes it so you can’t click.
With a floating group side drawer you can click element from a list outside of the drawer which will populate the floating group data source. This makes it efficient to work down a list without having to close the drawer. You can’t do this with pop-up elements.

Any other thoughts/ ideas would be appreciated.

boston85719 · 2024-12-16T14:52:32.115Z

Use floating groups, not popup. If done right, floating group in reusable can be used as a drawer

brad.h · 2024-12-16T15:26:33.084Z

It’s not possible to use a full screen height floating group inside a reusable since I have a top header bar on page level.

If I place the floating group inside the RE it won’t take up the full screen height.
I could place the floating group on the page level…but that’s less modular.

Popup can be placed right inside the RE so I don;t need to create complex inside and outside RE and Page WFs.

Here’s my setup. Cleint list is a RE place on page. When I click client from list it opens the popup side drawer. This is all placed on the RE level instead of doing list inside the RE and the sode drawer on page level. This setup is less complex and lets me work 100% inside the RE without having to jump between page level and RE level in editor.

before lcick3158×1736 236 KB

after click3314×1892 356 KB

Am I missing something? I hope I am!

boston85719 · 2024-12-16T15:35:55.761Z

brad.h:

It’s not possible to use a full screen height floating group inside a reusable since I have a top header bar on page level.

With some CSS I believe this is possible. It is a matter of modifying the top position of the reusable to be at top of page and not below the header…you can do this conditionally so it only happens when the drawer is supposed to be visible.

brad.h:

Am I missing something? I hope I am!

Sounds like you got a setup that works and you are happy with. I’d say go with it.

brad.h:

occasional bug where drawer (popup) won’t appear but the gey out does appear which makes it so you can’t click.

This happens because the popup is not visible before you are attempting to inject the HTML that makes it look the way you want it to. Put that HTML into a condition for when popup is visible…should make it so it always is visible when it should be and looks the way you want it to.

msgiblin · 2024-12-16T15:38:02.235Z

I use a GroupFocus for my side drawers - I specifically designed my reusable Header with a 1x1 pixel element in the bottom right, which I use as my reference anchor for the drawer- checkout both the Filter, and the Menu buttons:

Know Thy Drink

KnowThyDrink - Cocktail Recipes and Nutrition

A cocktail database: edit & create recipes, w/ search and filter by allergens & nutrition

brad.h · 2024-12-16T15:50:34.784Z

boston85719:

This happens because the popup is not visible before you are attempting to inject the HTML that makes it look the way you want it to. Put that HTML into a condition for when popup is visible…should make it so it always is visible when it should be and looks the way you want it to.

wow!!! thanks