Custom States across Reusable Elements

Is there a way to call in Custom States across Reusable Elements?

Currently I have 4 re-usable elements that I call in on almost every page on my site… A Header, Footer, a Left Nav and a Right Nav.
Screenshot 2024-04-02 3.30.14 PM

Right now I have to make changes to the User to pull in my Right or Left Navs from anywhere on the site and it’s slow and using a ton of Work Flow Units I’m sure.

How do you all pull in your Navs? Is there a standard practice in bubble?

I know a page can talk to a Reusable Element with Custom States… but I can’t figure out how to do it across multiple Reusable Elements.

Thanks,
Jude

Hi there,

What you can do is set conditions within your reusables, tied to dynamic Properties on the reusable. When you place the reusable on the page, you set that property to the page’s state’s thing. In this way a state change on the page can interact with a reusable element.

Thanks for the response!

The properties on the Reusables can vary greatly depending if the user clicks on a message, a notification, a team, player or many other things I may be showing a user.

I know how to talk between a page and reusable… for example, I can click on a link on a page and then show the Right Nav. However, I don’t know how to click on something in the Right Nav and make the Left Nav show up even though they are on the same page.

So it’s the talking between two Reusables that I can’t figure out without writing to the User in the DB.

In my opinion, the easiest way to do this kind of thing is with the JavaScript to Bubble element from the Toolbox plugin…

But if you don’t want to use any plugins, then just use a conditional workflow on the page, to listen for a change to a custom state on RE A, and then trigger a Custom event in RE B.

:thinking: I don’t know how to do the JavaScript idea with custom states.

I do like the double listener idea… but I will have to test that and let you know.

Thanks for the idea!

1 Like