Here's a quick video looking at how to use Reusable elements in Bubble and why it can save you loads of time and it's a great practise and habit to get into.
So, I have a marketplace app here that I'm building. I have a product page, product listing page here. If I go into the editor, you can see here I've got my repeating group and it contains in each cell.
Let's just pop that open in the elements tree.
You can see here that I've got a group and then inside that group it contains an image and two pieces of text. Now, my product card here, I want that to appear in multiple places around my site. I want to have catalogue pages or category pages. I want to have search results pages. I might want to have a slider on my homepage which goes through my products.
How to create a reusable element in Bubble
And each time I want it to be displaying the same card. So this is a perfect instance of when to use a reusable element. To create a reusable element, you can either right click or go edit when selecting the group containing everything, you want to be passed the element and you can click convert into a reusable element.
I'm going to call this product card. Okay. And what Bubble does it takes me to basically like a page, which is just my element. I've got all the usual controls, being able to change the design, being able to nest elements within each other. But you can see here, all importantly, the Type of Content is still product.
So how do I connect this back up to my design? If I go back onto my listing page, it hasn't actually done anything with this element that I initially created, like the one off element.
Replacing your original element with your reusable element
I've seen people get confused by this. Here's how to use it well. Delete that and then I scroll down to reusable elements and into my repeating group, which I've missed with my selection, but I just drag it down from the elementary. There we go. Into my repeating group goes my product card.
Don't forget to fill out Data Source
Let's have a look at that. It's not going to work as a heads up because I've not told my card, my reusable element, where to get data from. I have to give it a Data Source that is Current Cell's product. Now. If I click preview. It looks exactly how I did before with.
With of course the big advantage that if I go into product cards and remember if I had this reusable element multiple places, my search results and my homepage, and I wanted to add in another field, for example then I only need to update it in one place and it gets updated in the multiple instances of the reusable elements.
It's also helpful because if I'm building a responsive app, I only have to work on the responsiveness of this particular part of my app in one instance and then of course it's a reusable element it's duplicated throughout all of the other instances that I placed it in the app.