Reusable Elements

Experience level

This core reference entry is suited for intermediate-level builders.

In-depth articles (12)

To learn about this topic more in-depth, we recommend reading the suggested articles below:

Reusable elements

Article: Reusable elements

---

Elements In this article series, we cover how to work with different element types:

• Article series: Elements

  • Article series: The element hierarchy

  • Article: The page

  • Article series: Container elements

    Elements that contain other elements.

  • Article: Visual elements Elements like text, buttons, icons and images.

  • Article series: Input forms Elements that accept input, such as text and file uploads.

• Article: Conditional expressions

  Making your elements change appearance in response to varying conditions.

---

The design tab In this article we cover the different tools available in the design tab.

Article: ´The design tab

---

Design

Article series focusing on design in general, explaining terminology and offering resources to help you set up a user-friendly, good looking design.

• Article series: Design

  • Article: Responsive design

    Building pages that work on all devices, such as a laptop and a phone.

---

Previewing your app

In this section about how to in the development environment.

• Article: Previewing your app

Videos (2)

Bubble Academy: Converting to a Reusable Element Bubble Academy: Designing a Navbar (using reusuable elements to create a navigation bar)

Webinar: Building a Scalable Design System with Gregory John [BubbleCon 2023] Webinar: Building Modular: How Bubble Builds Bubble for Scale [BubbleCon 2023]

A reusable element creates an element that contains other elements, like a group, that can be used in more than one place. This is useful when reusing the same elements often. Using reusable elements keeps the app smaller and makes it easier to edit.

Type of element

A reusable element can be a Group, Popup, or Floating Group. In the case of a popup, the reusable element will be behave like a popup, i.e., modal and have a grayout until it is shown.

Type of content

This allows you to select the type of thing this container displays. Most elements that have this property also have a Data source property, which lets you select the displayed thing or list of things. The value of the data source must match the selected type of content. Let's look at an example of a map with hotels marked. When you click a marker, a popup displays with the name of the hotel. The Type of content would be 'Hotel' and the Data source would be 'Map's current marker.'

Data source

Define the thing or list of things that should be displayed in this container. For example, in groups or popups, only a single thing will display, but for repeating groups a list of things will display. Child elements can access the Data source from their parent. If the parent contains a list of things, the child has access to the individual list items. A common scenario for groups is to display something, like the current user, and then have the group contain the inputs that modify the user's properties, such as text and images that display information about the user. The Type of content determines what kind of thing you are allowed to set in the Data source field. If the type of thing does not match the Data source, it will be marked as an issue, and you must change one or the other to match. The Data source can come from anywhere in Bubble. For example, it could be the result of a search, a custom or built-in Data source, or it could be dynamic and come from the user. The Data source will update when its source changes. For example, if the search result changes because a user modified some data used in the search constraints, the displayed list will automatically change. For additional flexibility, you can update the Data source in the Conditional Formatting Tab in the Property Editor.

Note: While the "auto updating" behavior of a Reusable Element's dynamic data source is generally desirable, there are certain scenarios where this may cause unexpected behavior. For example, consider the following scenario:

Your page has a Repeating Group to display a List of Things, where each cell contains a Reusable Element. The Repeating Group's List of Things is sorted by some field on the Data Type and inside the Reusable Element is an auto-binding popup form that changes that Thing's sorting field. When the popup is open, and the order of the List of Things is changed, the popup will lose its reference to the Thing from the original cell and instead reference the new cell in its place.

To workaround this limitation, consider making the popup form non auto-binding. Or, create a static reference to the Thing in the Reusable element by setting a custom state equal to the Reusable Element's thing when opening the popup form and having the popup reference the custom state.

Finally, the Data source property can be modified by workflows. Changes made by actions override whatever you specify as the Data source directly or as a conditional state until you run a reset action, which then restores the original setting.

Delete this reusable element

Delete the reusable element. Pages using this element will display a 'Deleted reusable element' placeholder.

Reusable element properties

You can add additional properties to a reusable element that can then be used to pass data to and from that element:

• Dynamic value: any or

• Color picker: a or a saved .

• Checkbox: a to or from the reusable.