Component events

When building a component, you can trigger events that can then be used outside the component.

Let's say, for example, that you have a login form that you display:

1. on a dedicated login page, and
2. in a modal when the user clicks on a button in the navbar.

That login form could be a component that includes the login API call to the backend.

When the login is successful, you want to:

1. change page if the login was on a dedicated page,
2. close the modal if the login was in a modal.

You could approach this in 2 different ways:

1. include the logic inside the component with a property, or
2. handle the logic outside the component with an event.

Why trigger an event

With option 1, you would have a component property that says if the component is used on a dedicated page or in a modal.

Then, in your component login workflow, you could add a branch that defines what to do depending on the property value.

The downside: you need to have a limited and predictable number of options to create all the branches you need in the component workflow.

For more flexibility, go with option 2:

• first, in the component workflow, trigger an event after the login action is successful
• then, outside the component, you'll be able to react to this event.

Create a component event

In the example below, we created a component event called On login success in our login form component:

Emit a component event

We created a login workflow on submit of the form and triggered the On login success event after our login action:

As a result, when an instance of the component emits that event, we can react to it with a workflow that is triggered by the On login success event.

TIP

You can type in or bind a specific event value if you want.

If you don't pass a value in the event, the event will fire but the event value will be null.

React to a component event

In the example below, on the instance of our component inside a modal, we choose to close the modal when the On login success event is emitted by the component:

We could follow the same logic to change page when the component is on a dedicated login page: