Reusable element button can't trigger action on element outside it

Need help
1

I have a button (header-cart-btn) inside a reusable element (“header A”) used across pages. I need clicking it to show a Group (“cart-slideout-panel”) that lives on the index page itself, outside the reusable element.

I tried:

  1. Custom event on the header, triggered from the button, listened to on index page via “A reusable element’s custom event” — didn’t work in preview.
  2. Custom state “cart_open” on header A, set via workflow, checked via condition on the Group’s visibility — still not working.

What’s the correct, current way to do this in Bubble?

2

Why don’t you make the cart-slideout-panel a floating group inside the header?

3

Set a custom state on the reusable element. Your button sets the state of the reusable element. The page has a conditional workflow that is when reusable element custom state value is…do this action…

so basically button sets state on reusable, page listens for state value of reusable

4

Easiest way to perform this action is a page level javascriptToBubble element (from toolbox)

  • Page - -JavaScript to Bubble: bubble_fn_yourAction
    • Reusable - - run javascript: bubble_fn_yourAction(“hello”)

That way you can pass information even across nested reusables.

Good luck!

5

You can also use this plugin Satellite (reusable element addon) Plugin | Bubble

6

I know this is the usual workaround, but it’s far from ideal. The fact that there’s no native way for one reusable element to communicate with or trigger another reusable element forces us to rely on page-level conditionals.

While that approach works in many cases, it isn’t always reliable. In some situations, actions like Set State can fail or behave inconsistently, especially in more complex workflows.

It would be a big improvement if Bubble provided a native way for reusable elements to interact with each other. It would make app architecture cleaner, reduce the need for workarounds, and make workflows much more reliable.

@fede.bubble @emmanuel @josh

7

I told the Bubble team like 1-2 years ago that no beginner would be able to pass “data from a reusable”.

Here is a pro tip for you at the start, “DONT TRY TO BE SMART” with Bubble. Don’t waste time.

You just go to any LLM, I prefer claude or gemini, don’t use chatgpt. Go and ask, “I want to pass data from reusable to another page, give me the run javascript setup and js2bubble element properties for this”.

Basically, you will download toolbox plugin and rest follow LLMS response.

8

We really do need a native solution for this; let’s see if they make some improvements in this regard, now that they’ve started listening to the community.

9

100%, maybe with this new global expression thing we will see.