Forum Academy Marketplace Showcase Pricing Features

How to open a pop up from a reusable header

I’m a complete newbie so bear with me :slight_smile:

I want to open a pop up menu from within a reusable header. However, when I go into the workflow for the element within the header, which I want to use to trigger the pop up, there isn’t an option to show the pop up!?

I’ve seen various answers to this query but I’m still struggling to understand how to do it. Thank you!

Hello @martin.boronte

Are you trying to access an element on your page from within a reusable element? Have I got it right?

In general, a custom event is triggered on the reusable element from the page, but if the answer to my first question is yes, you have to use this plugin.

What I mean is that if you want to show the same element (pop-up, group focus etc.) on more than one page, you put this element inside the reusable element and create a custom event inside the reusable element.

Inside the reusable element, workflow tab:
Custom Event > Show Pop-Up menu

Then you can use the action “trigger a custom event from reusable element (header)” from any page where you put the reusable element.

Inside the page, workflow tab
A button is clicked > Trigger a custom event from reusable element.

Also, these two free apps will help you. Actually, these are templates, but they were created for learning and reviewing examples, not for creating apps.

For actions: Custom Events | Actions | Bible
For operators: https://explore-bubble.bubbleapps.io/

If there is anything you want me to explain, please feel free to ask.
Best,
Eren

3 Likes

Thanks Eren, kind of you.

Just before I go through your advice …in answer to your initial question, I want to open a pop up (menu) from within the reusuable header, on every page.

The header only contains a single logo which opens the site’s pop up menu, so I’m wondering if it might be simpler/better to do away with the header altogether and just use the logo on every page to open the pop up?

Best wishes

Martin

Did you put the popup inside the reusable element (header)? If you did, you can access the pop-up from the actions inside the reusable element. It will work on all pages.

1 Like

Hi there, @martin.boronte… you can do what you have described by using a custom state, and this post might help you get down a good path.

Best…
Mike

1 Like

Isn’t that all you want to do? Am I misunderstanding the issue?

1 Like

Thanks Eren, I did that very simple thing (putting the popup inside the reusable header element) and it worked perfectly.

…which - in my COMPLETE naivety! - makes me scratch my head at why seemingly much more complicated plugins and custom states/events are recommended?

Precisely!

I guess my only query is whether to have the logo in a reusable header or not - what do you think?

Much appreciated.

1 Like

Happy to help! Of course, that’s what reusable elements are for! Reusable elements are great for anything you’re going to use more than once. I believe this post will be helpful.

1 Like

Thanks Mike

I really struggled to follow the instructions on that post. As a novice, it did seem a very overly-complicated procedure when all I want to do is open a menu from a link at the top of every page.

@eren seems to have nailed it by recommending simply putting the popup inside the header, and then accessing it from the actions inside the reusable element.

1 Like

Yup, Eren is dead on that putting the popup inside the reusable element is the way to go if it works for your use case. I assumed (incorrectly, of course) that you needed to access a popup that wasn’t inside the reusable element, and that can be done by using a custom state. Sorry for the tangent, but maybe the custom state idea will come in handy some day.

1 Like

Thanks Mike, much appreciated.

1 Like