Guide me to where I can learn more about this, please 🙏

[ChefThomas]

Let’s say I create a reusable element that is simple a burger icon with a group focus menu.

Then, I add options in that menu that are not about navigating to other

then, I go to any page and I drop that Reusable Element in a repeating group; or, anywhere in that page.

Now, I click on that Group Focus, open the menu, and click on one of those options. How to do program those options to be connected with information on that page?

Very grateful for your guidance!

[ed727]

Best guide I’ve seen to reusables is here. The author goes through some methods for how reusables can communicate with information on the page.

A guide to advanced use of reusables

A recent thread about the Bubble editor becoming sluggish over time spawned another discussion: reusable elements can speed up the editing of complex pages significantly, but as it was rightly pointed out, they can also make the editing of an app a lot more complicated. Having worked on some very large one-page apps, I’ve become a reusable group proponent by necessity. It’s a fact of life at the current stage Bubble is in, that as the number of elements and workflows increases, the editor become…

[ChefThomas]

Super cool, @ed727 - thank a lot!

[hadirs]

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.

1. 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

2. 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

3. Javascript (Using Toolbox plugin)

• Install Toolbox plugin
• Put a Javascript to Bubble element on the page (outside the reusable element)
  • Set the suffix (to be referenced later by the workflow inside the reusable element)
  • Check the Publish value checklist
  • Choose the Value type

• Create a workflow inside the reusable element with an “Run javascript” action with content : bubble_fn_suffix(“[data]”);

Hope the explanation is helpful!