How To Use Reusable Elements In Bubble.io (Complete Guide)

7th of August, 2024

Throughout this guide, you’ll learn everything you need to know about using reusable elements in Bubble.

A reusable element allows you to reuse an element that you’ve already built. Inside of that element, you can even reuse all of the necessary workflows and conditions.

The Benefits of Reusable Elements

Reusable elements are assets that you can use in many different places.

So let us open up the Bubble editor. On the left-hand side, you have your list of different kinds of assets and if you scroll all the way to the bottom, you have a section called reusable elements. And that’s what we’re going to explore.

First, let’s understand why you would use a reusable element and what are the advantages. So, the advantages are mainly three things.

One is that you have modular construction. This helps you compartmentalize complex workflows because each task is in a separate compartment. You’ll also understand the advantages versus copying and pasting the same thing over and over, which you can do, but there are complications that arise and we will understand the differences.

Also, reusable elements save you time when you’re trying to style different elements across your app. It keeps things consistent and saves you time because you don’t have to go to each instance and restyle it. You can change it in one place and it will change all across your app, everywhere you have the same reusable element.

When you should use reusable elements

So, let’s hop in and understand two different ways you can create a reusable element.

So back on the Bubble editor, we will be using a CRM as context for the example. And in this example, we’re going to have a popup that will allow the user to change the status of a sale.

So, in this example, we have a popup called “Deal”. This will show the amount of the deal, and who owns the deal and right here we’ll have a status box that you can update with this popup. And what we want to show is the popup on the homepage and also show the same popup on a second page, which is just showing “My Sales”, and “My Deals”.

So, here we have the same popup shown on this page. And let’s understand the difference between copying and pasting, which is how we have it now, versus using a reusable element.

So let us quickly see the preview of how this works. Here’s the homepage when we click “View Account” and here we can change the status of the deal to “Lead”, “Closed” or “Lost” and then click “Update” and that closes the popup.

We want the same workflow on another page called “My Deals” which just shows a subset of all the deals and then when we click each one, again the same popup shows up, with the same workflow, and it closes when we click update.

So that’s what we want to replicate and understand two different ways of doing it and the benefits of using reusable elements to do this.

So going back to the Bubble editor, on the first page we have the popup called “Deal” shown here and we want to put that on the second page. Let us go to the second page and delete it so that we can show you what that looks like starting from scratch.

So back on the first page here, we can simply copy using “Command + C” on Mac, “Control + C” on Windows, or you can right-click on the Popup “Deal” element and select “Copy” from this window here.

If we go to the second page called “My Deals”, we can select the page, right-click on the page and select paste. And we get the copy of the popup here.

So, after we copied the Popup element, all the visual elements are still there. However, you’ll notice that the workflows did not copy over. So, we would have to rebuild the workflow.

So, for example, if we click this “Update” button and go to the second page and look for the workflow, there’s nothing there and that compares to the first page where we copied the popup from, there’s the workflow that we have to remake on the second page.

So, going back to the discussion points, one of the main advantages is managing complex workflows. So, when you create a reusable element, the workflow stays the same on each page. Versus copying and pasting where you have to rebuild everything.

And similarly, when you have to change the style or colors or something like that, you also have to restyle each instance of a copy and pasted element. Compared to a reusable element.

How to create reusable elements

So now let’s understand how to create reusable elements. There is a unique asset class and you can build them starting from scratch or converting an existing element. We will learn both of those ways and also discuss navigating this unique asset class in the Bubble editor.

So, jumping back to the Bubble editor. There are two ways to make a reusable element.

The first way is just to convert something that already exists and convert it to a reusable element. So, if you right-click on the Popup “Deal” element, you’ll get a menu with an option to “Convert to a reusable element”. So, let’s click that and name it “RE_popup” and it is better to have the prefix “RE” so that we know this is a reusable element. And then click the “Create” button.

And now we are on a different page and what’s happened here?

So, if you go to the page navigation menu, you’ll see all your pages here. And then down below you have a section for reusable elements. So, it’s like its own page.

Now what’s happened over here? On the right you can see all of the elements are here but they’ve been collapsed and that’s just because of the way the layout was formatted with the minimum width was set to 0 px (pixels), so they’ve collapsed down to 0 px (pixels). Let’s just open those up so that we can see kind of what they normally would look like. So, let’s just set a minimum width of 200 px (pixels) for each element.

And for the popup itself, let’s have a builder width of 500 px (pixels). And this just shows you the window on the building page, it doesn’t reflect in the app itself. Next, let us set a minimum width on the app at 300 px (pixels).

Now we have something that looks like the popup that we started with. And that’s one way to create a reusable element, just to convert an existing element.

One other navigation point to note is on the asset menu down at the bottom there’s a section called reusable elements and our popup “RE_popup” is now present over there.

Now, if we want to add that to an existing page, you’ll note that when we converted this original popup, it did not add a reusable element to that page and it didn’t do anything to the existing popup. So, it just created a reusable element on this menu without applying it to any particular page.

So now what we have to do is apply that reusable element to the page itself. We can do that by selecting the “RE_popup” from the asset menu and then dropping it onto the page and you’ll see it’s added as a new overlay since this is a popup.

Another thing to look at is the workflow, what happened there?

So, if we go to the appearance tab, first of all, you notice this is different, it doesn’t look like the normal appearance tab. And the reason is that you can’t edit the reusable element from the page menu. Remember it’s considered a separate page.

So, you have the option to “Edit Element” here in the appearance tab and that’ll take us back to the popup page.

Now we can examine the workflow of the popup. If we click through the “Update” button, and then click “Edit Workflow” we’ll see that the workflow has in fact copied over. You are able to click that button it will populate the parent group’s deal and also hide the pop-up when you click that button. So, the workflow transferred over which is what we want.

Another thing to note is the “Type of content” also transferred over. So, we know that this popup is populated by a deal type of content and that was copied over when we converted the existing element. So that’s one way to make a reusable element.

Another way is to just start from scratch.

So, click the new reusable element from the asset menu. So, if we click that, a pop-up will appear using which we can just create a new reusable element “RE_popup2” for example, click the create button and bubble will do its thing and now we have a reusable element.

You’ll notice that the default type of element that it makes is a Group but you can change that. So, in our case we would change it to a pop-up and we would tell it to populate with the right kind of content which is Deal and then we can add all the parts from the asset menu that we had on our original popup.

And that’s great like if you’re starting from the beginning and you know that you’re going to make a reusable element. You could just start with the Blank Slate from the asset menu.

We are not going to go through that because it’s not what this blog is about.

And so now we’ve created a popup from scratch. And we are just going to change the background so we can see what’s going on as a quick example. Now if we want to apply that to either one of these to an existing page, navigate to that page and drop it in. So, there it is.

And if we wanted to delete the reusable element, as in delete the whole thing, go to the page menu and click on the trash can icon and you’ll get a confirmation message saying “Delete Reusable Element” Click the Confirm Button and it’s deleted.

And we’ll notice that, on the page where it was before, that is not deleted. You have to delete that entry separately, so it’ll tell you there was a reusable element here but that was deleted now what do we do? So, you have to go in and delete that as well.

So now we’re going to keep the original reusable element that we made by converting the first popup. And now we want to apply this on the other page as well. So, we’re going to navigate to the page that shows “My Deals”, scroll down to the reusable elements, and drop it in. Now let’s check the difference between this and copy and paste.

Remember we had to redo the workflow but here the workflow as you recall stays with the element. So, if we examine the element and look at the workflow it’s still there.

So, this is an example of making compartmentalised workflows. In this case, editing each deal happens with the popup and that workflow is contained only on the reusable element for that popup and not on each individual page where that popup appears, where there might be hundreds of other workflows.

So far, we have understood two different ways to create reusable elements.

How to edit reusable elements

And now we’re going to learn about the advantages of editing reusable elements, where you make one change in one place and it affects multiple different locations in your app.

So, if we go back to the Bubble editor and let’s say we wanted to make a change to “RE_popup”, the reusable element popup and remember we’ll have to go to the Reusable element page to edit it.

Let’s say we wanted to add something a new piece of “Text” field. Let’s say we wanted to add the time that the deal was created, we’ll call it “Created Date” and now we’ll see that in every instance where this reusable element exists, that change will be shown.

So, if we go from the reusable element page to the CRM index page and we see the popup. There we have the creation date. And if we go to the second page “My Deals” and see the reusable popup, there’s the creation date again.

And that would be in contrast to just to drive home the example. If we use the non-reusable popup, we can look at that and make a change here just as an example let’s change the background color. So if we change that here and we go to page one and we look at the popup there it’s not green like the change we just made on page two. So, we would have to redo the visual elements for each instance of a copy and pasted popup.

Whereas using the reusable element, the changes in this case the “Account Owner” is reflected in all locations. So, a major advantage of using reusable elements is that it saves you time.

Using properties in reusable elements

Properties are a unique feature to reusable elements. So, for example, if we wanted to have the same reusable element generally but wanted to make a specific change in a certain circumstance, we could do that by leveraging properties. Let’s see an example of that.

So, if we go back to the reusable element page and look at the appearance tab, we’ll see a button that says “Add new property” and this can be anything. So, let’s call the Label as red, choose the Input Type as Dynamic value and the Field Type as yes/no option.

And as you saw, you can use this property feature to relay data across your app through this popup. And using this feature and conditional statements you can make all kinds of changes based on all kinds of data.

So, let us just going to make a yes/no decision in this new property and have changes based on whether the option is yes or no. Here you can also see that you can make checkbox selections: “Is a list/array” and “Optional”.

So, when you set up a reusable element and you’ve added the properties, if it’s optional, you will have the choice of using the response for this field or not.

If you make it mandatory then you’ll see that the reusable element is in red and it won’t set up until you make a choice for this property. So, let’s say it’s mandatory. Uncheck the “Optional” property checkbox and click the “Add” Button.

So, it’s a yes/no field and now if we go back to the pages where this reusable element exists, you’ll see that it’s highlighted here, where we need to make a choice of: is it red yes or is it red no. And let’s select red “yes” and it’s important to know that this is going to be independent to this version of the reusable element.

So, let us label this as “RE_popup_red” to let me know that this is going to be the red version of the popup. Any changes that we make to this version of the popup will only stay on this version, and they won’t go across all Fields.

If we want to make changes to all of the versions of the reusable element then we go to the editing of the element itself which remember is from this button and going back to this page.

And what we can do now is set up a conditional statement for example that says when “RE_popup_red” is yes then we can say that the background color is going to be obnoxiously red. So, what we’ve done is that we’ve made the reusable element have a condition that’s variable according to its location.

So, in this case on page one we have red and on page two we haven’t made a decision yet. If we look at that one it’s still not decided so that decision is going to be on a per instance basis and here, we will say no. What should happen is that on page one it should be red and on page two it will be normal.

And first, we need to clean up all the different options so we’re going to eliminate our original popup and we’re going to fix the second page as well. Eliminating the first popup and now changing the workflow on the first page itself. So that when we click “View Account” it shows our reusable element.

So, we need to display data on the reusable element the “Parent group’s Deal”. And then we need to show the reusable element. And then from there once the pop-up the reusable element shows the workflow inside of that is already saved on itself. That’s what we talked about before.

Now we’re going through the pages themselves and since we had deleted the original popup, we need to redo the workflows to show the reusable element. So, on page two when we click this group we need to show the reusable element. That is populated with the “Current cell’s Deal”. And then we show the reusable element. Okay so hopefully that wasn’t too confusing.

Now if we preview, we should see on page one of the popup the red version and on the second page the same popup but not red. And this is just a silly example just to show you how you can use properties in different ways to leverage those options. There it is, a red background popup.

And if we go to “My Deals” should be the same popup not red. Perfect! That’s what we wanted.

So, that was kind of a ridiculous example but it shows you another advantage of reusable elements and the properties and ways you can leverage specific data that is really handy. And just like that you now have a clear understanding of what a reusable element is and when you should use it inside of your application. Once you start taking advantage of reusable elements there’s really no turning back as they are going to save you so much time throughout the process of creating your build.