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.

Watch out!

Be careful when nesting reusable elements 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 examle, 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. 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.