I hope you’re doing well! I’ve got a question regarding modular layouts in Bubble, and I’m looking for some guidance.
Here’s what I’m thinking: a 9 x 9 grid, and I want to place different elements like charts, contact cards, short tables, etc., in various squares. The twist is, I want to create a flexible layout where users can move these squares around within the grid, and they get to decide what content goes where. So, they could have 9 1 x 1 charts, or 3 3 x 1 tables.
To draw a parallel, think of the iPhone home screen - a grid where each app occupies a one-by-one space, and users can freely arrange widgets of different sizes, 2 x 2 , 2 x 4, or 4 x 4 and they choose what widgets they want. I’m wondering if it’s possible to achieve a similar level of flexibility and customization in Bubble.
So, my question remains: Can we create modular layouts in Bubble, allowing users to decide what modules (chart, card, table) and rearrange content within a grid? If anyone has experience or insights into this, I’d greatly appreciate your advice.
You may just need to think about what can be static (layout and content of a card / widget) and what needs to be unique / dynamic for the user (placement / order of widgets).
For the dynamic values, you can store this in a data type and retrieve this information for each individual user, changing the layout/visibility/order of the cards.
For the Bubble Ui, you can store the widgets/cards in a repeating group and show them based on certain conditions.
This basically follows the same principles as a form builder, so you might be able to take some learnings from tutorials out there on this topic.
Thanks for getting back to me. I guess I’m still stuck on two things.
How would I save / store the module? Like in Notion you hit the plus and you could chose a text, heading, list, different views … so many. Reusable elements in a RG or some kind of grid and show and hide like you’re saying? That would be a lot of reusables on a page.
And then, if I had an RG with 3 rows and 3 columns, how would I incorporate a widget that was a 3 x 1? Or, if I went with groups, I guess I could just have the group fit to content.
Exactly, essentially you’d have each of the types of elements in your each repeating group cell, so not appropriate for 100s of types (unless you find a way to dynamically create/render this).
You could then dynamically define how large each cell could be depending on certain conditions and using ‘wrapped horizontally’ formatting.
That’s really cool. Would you mind sharing the editor or screen shots of the formatting?
Then I could probably place all the reusable elements in a drag and drop group so that they could be moved? I don’t have much experience with dran and drop groups yet.
It’s possible, but drag and drop will add a bit more complexity of course.
The PoC was just a quick example of what’s possible. I can’t share the editor unfortunately and the screenshots won’t be much help without a walkthrough.
Yes, that’s really cool! That’s even more flexible than I was thinking. How did you do that? I mean those look like those are with groups. I would need to be able to put the content inside it like a S, M, L card or chart or table for example.
I was thinking a little more structured. Some might be 1x1 or 1x3 or 2x2. I’m just brainstorming right now trying to understand how to accomplish it in bubble.
This is the simplest way that I can think of from the top of my head without actually trying it. You may have to tweak or change things around a little bit, but the concept is pretty simple.
Create a “thing” called widget.
In that widget, give it the properties you want.
Make a repeating group - Make the data source the widgets.
Add a group inside that repeating group.
Style that group with the properties from the widget that you provided.
Add some widgets into your data.
Now you know how to do it, lets add the functionality you want into it.
Redefine your database as you need for your users’ widgets.
Turn those groups you added inside the repeating group into reusable elements (likely with properties as well to customize how they look, behave, etc).
What do you suppose the RG settings are? He mentioned wrapping horizontally. I can’t recall having used that setting before. Most of the RGs I do are tables. I don’t know how he made some expand while others there the same size. Is it one fixed row and then a min px on the columns?
