Trigger a component action globally

Ask us anything How do I?
1

We have a component (“Alert”) which is added to all pages for the purpose of displaying errors/alerts/notifications.

What I wanted to do is create a global workflow that will trigger the Alert component’s (on the current page) workflow (mainly for setting it’s message and displaying it). Being able to do this via a Global workflow would be convenient so that we do not have to recreate references to the Alert component instance on the page each time we will use it.

Currently I believe this is not possible since each instance of the Alert component has a different ID on each page, but I’m probably wrong.

Is there a way to do this?

2

Spitballing here. I haven’t tested this so this is in theory.

  1. add properties to your alert component, eg “show”, “title”, and “message”.
  2. include the component in each page
  3. set a global variable, eg alert that stores the properties, eg {show:true, title: "Alert", message:"Lorem ipsum"} and bind each instance of the alert to that variable.
  4. update the global variable via the global workflow and all alert instances should pull the update from the global variable.
3

Include the component into a section and then include that section on each page as a multi page section. This is what I did for the Alert, as well as a bunch of different modals.

4

@archenia_jsanchez Thanks forgetting back. That’s a great approach, haven’t thought of that. Will try it out.

5

Thank you! I haven’t tried using multipage sections before (frankly, I didn’t know they existed). Will give this a shot.

6

@wealthsyndy This did the trick, I can reference the same component instance across pages. The multi page section is awesome and will enable me to do other cool things. Thanks!

1 Like
7

Yes I use it for modals, navigation, alerts .. so far…