Reusable Elements

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.

Note: Be careful when nesting reusable elements, especially many layers deep, as this can slow down page load performance significantly.

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.

Built-in reusable elements

Your application comes with 3 reusable elements out of the box: a header, footer, and signup / login popup. The header contains a button to "Sign up or Log in," which shows the signup / login popup. This popup includes workflows for users to log in, as well as reset their password. If the user is already logged in, the button will say "Log out" instead. The footer includes an example of how you can include external links, such as to your company's social media. All of these reusable elements are customizable. You can change their styles and content while keeping their workflows or using them as inspiration for your own.