Folder to organize Elements Tree Overlays

Hi, could be a very good idea to have a way to create folders to organize all Overlays in Elements Tree.

For example, I have 2 popups about a kind of table.

1 popup to Create and Edit an Item.

1 popup to Delete the same Item.

I would like to create a folder NAME_ITEM and put all Overlays inside.

Or, another kind of organize:

DELETE: all popups that delete an item

CREATE/EDIT: all popups that create/edit and item

2 Likes

I’m sure you probably know you can have one pop-up and make it dynamic, right?

On one page where I have several types of popups, I use reusable elements.

I drag them into the popup and it keeps the whole overlay section clean

Yes!! I think folders in general for the elements tree would be amazing! So many times I have to scroll through elements I am not working on.

Well, if you’re looking for the professional way to fix this…

reusable elements is the professional way.

Not sure why more people don’t use them. They solve the whole folder problem professionally

Just because there is a work around you found which requires additional steps just to stay organized doesn’t mean that having folders isn’t also something which could be helpful.

Being able to organize how the elements tree is instead of the bubble First/Last system would be great.

When it comes to the pop ups specifically there is no way to keep them together besides what I believe is the height of the pop up itself. Often times floating groups for the top of the page (Which dont work on reuseables) wont be at the top of the elements tree and can appear in weird spots. Then you have to scroll around to find them.

Would be nice if I could just have a Header Folder where I have certain elements at the top of my page etc.

Well, in this case, when you build something the right way, you don’t need workarounds.

The way I described it isn’t a workaround; it’s how it should be handled professionally.

When you duct tape stuff together, etc., you’re desperately looking for fixes.

Do it right from the beginning, and everything falls into place the way it should

Yes, reusables are the best path, but I agree with @dbom009 and @daniel.petrin — having folders in the Elements Tree would be really interesting. Sometimes I need to have more than one popup in my tree; they do different things but are associated with a certain feature. If I could organize them into folders, that would be great.

Maybe there could even be two views, just like in workflows — one for the normal elements tree and another for the folder view.

I agree with @senecadatabase that in most cases, if you create a reusable that can be used dynamically — like, for example, a reusable popup to delete something — that same reusable popup could be used for any type of thing on that page. This saves you from having to create three popups to delete three different things, but it doesn’t remove the idea of having folders in our design tab.

You can also publish your idea directly on Bubble @daniel.petrin:
Bubble Ideaboard

1 Like

I think there would be the issue of the element tree no longer being able to drag and drop if they have folders. Technically there is a hierarchy and it follows that. I think that is probably why you won’t see this feature anytime soon. It would mess with the foundation they have set up. Another suggestion for you, you can drag and drop those elements to move them closer to each other. Then maybe have a different color emoji for each one that you want to group together.

I agree with @senecadatabase that the reusable elements are the real way to solve the issue. These would just be some other ways to organize your system. :blush:

If you have a large page, the bubble editor will start crashing on you. It is much better to have a dashboard page, then each ‘page’ or tab of that dashboard page would be it’s own reusable element. Then the popups associated to that ‘page’ would just be in each corresponding reusable.

Much better longterm solution for scalability. Hope that helps. :blush:

2 Likes