How to use a reusable element and why you should

Creating Reusable Elements in Bubble

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 practice and habit to get into. So I have a marketplace app here that I'm building and I have a product page, product listing page here and 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 contains an image and two pieces of text.

The Need for Reusable Elements

Now my product card here I want that to appear in multiple places around my site, I want to have like catalog pages or category pages, I want to have search results pages, I might want to have a slider on my home page which goes through my products 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.

Creating 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 past 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.

Implementing the Reusable Element

So how do I connect this back up to my design? So 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 and I've seen people get confused by this so 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'll just drag it down from the element tree. There we go. Into my repeating group goes my product card.

Setting Up the Data Source

Let's have a look at that. It's not going to work that's the 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 and so that is current cell's product. Now if I click preview it looks exactly how it did before with of course the big advantage that if I go to product card and remember if I had this reusable element multiple places my search results and my home page 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 multiple instances of the reusable element.

Benefits of 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.