Reusable element is useful for simplifying the Bubble app design and development process. This is especially true if you have a set of components that is used repeatedly in different places.
The benefit of using reusable elements is that you don’t have to create the same components over and over again. In addition, you can also reduce the number of active components on the bubble editor page, then reducing the load of the editor and avoiding sluggishness.
However, the use of reusable elements should go through planning in advance. That’s because one of the drawbacks of using a reusable element is limiting direct references between elements inside the reusable element and elements outside of it.
If you are using a reusable element but still need to have communication between the elements inside the reusable elements and the elements outside of it, there are some alternative methods that you can use.
I will share how to implement some of them in the case that might be similar to yours. You can also check them on these editor and runtime.
- Custom state
- Set up a custom state on the reusable element
- Set the element outside the reusable element that referencing data to the custom state
- Create a workflow inside the reusable element to update the custom state value
- URL parameter
- Set the element outside the reusable element getting data from a page URL
- Create a workflow inside the reusable element with an action to navigate to the same page while passing the required data to the URL
- Install Toolbox plugin
- Set the suffix (to be referenced later by the workflow inside the reusable element)
- Check the Publish value checklist
- Choose the Value type
Hope the explanation is helpful!