Event Triggers for Popups

Ask us anything How do I?
1

Hi there!

I just had a quick question regarding the popups.

I have built a reusable search component that have buttons in nested <div>s and exposes custom events (for example, an eraser button click) via an Event Trigger, so I can drop it anywhere and bind its Eraser or Action button to page‑specific workflows without duplicating code.

image

For example, with the Search component I:

  • Define a custom event trigger on the component (e.g. Erase Button Clicked).

image
image285×173 5.96 KB

  • Inside the component, add a workflow on the Eraser button that component’s “Triggers an event” → Erase Button Clicked.

image
image288×371 9.07 KB

  • Now, I can re-use this search component I created anywhere in my app and I am able to bind the eraser or the action button next to it to whatever workflow I want. Here, on the instance of that search component:

image
image272×191 7.83 KB

However, I do not see any events/triggers on the popups

I know that this is because your new popup system happens at the app level and can be opened from anywhere.

Here’s a popup:

image
image532×206 6.71 KB

I dynamically change the title and description based on the global opening popup workflow. But that ‘submit’ button, if I want it to do different things based on where the popup exists I guess I would have to:

  • Create and hide multiple Submit buttons inside the same popup and branch workflows by a property.
  • Duplicate the entire popup component for each use case (what if I want to change the padding on all of them at once?).
  • Build a giant IF/ELSE tree inside one modal, based on a “mode” property or something. Like, when I press a button > open modal for “expression_interest” and now the submit button workflow tree would have a branch for “expression_interest” etc..

The previous modals were placed as a section at the top of a page, placed here and there, a bit like a component I guess? Maybe I am missing the point.

What I am looking for is, just like that search component I created - I want one popup modal which I can use instances of it to fit whatever I need to do. In a year’s time, new page - new popup, quickly create a workflow for that popup on that page which will push to my db or something.

Hopefully this makes sense, it would be great if somehow could suggest an easy alternative for us to use in our app. Many thanks in advance.

2

Alright, I may have found a workaround:

image
image269×123 5.44 KB

I drag a Modal on the page, name it according to what it is supposed to do. The container for it is now a component with the custom button clicks bindable to it as a workflow.

When I want to trigger this modal, I execute a global workflow with my required details (e.g., title, description etc..), and I “Execute component action” to toggle this modal “Modal - Expression of Interest” on.

For that exact instance of the modal’s container which is now a custom component, I have a custom workflow for when the Submit/Action button is clicked.

1 Like
3

Excellent Adrien!

Thanks for sharing your solution!

1 Like