Trigger Component

How will Component Triggers work and how will they be used?

Mostly, the trigger component seems to be a thing to differentiate between the various event your component can emit. This way, you don’t trigger the same event 30 times with different data.

Trigger is an event name, and inside your component you can use the “Trigger” action to emit one of this event with a payload.

Outside of your component, on each instance, you can add a workflow and select the trigger here to react to any logic of your component

1 Like

I am still trying to wrap my head around trigger event outside the component per your comment “Outside of your component, on each instance, you can add a workflow and select the trigger here to react to any logic of your component”.

I made a quick test in a component and created and action and trigger - the action is a trigger event using the name of the tigger. The I go outside of the component and try adding workflow to the instance AND also tried adding workflow to a button - and when selecting “execute component action” I can not get an option for the component under “components” drop down -



You need to add the trigger inside the main component. So you add the trigger to the button in a component for example, this will trigger the event.

Then on the component you should be able to select the event, where you find On click, etc.

This is on my pagination component

For now as far as I know, you can’t trigger actions from outside, just from the inside

I have done that successfully - but @aurelie stated:

AND when I am outside of the component and make a workflow - it clearly gives me the option “execute a component action” - it just doesn’t allow me to choose a component - even though there is a drop down and I have a component with an action.

So … how does one “execute a component action” from outside component (which would get me ability to get a payload - which would be great)

For now I think it’s not exposed and supposed to work with custom components. The purpose of that action is to be used mostly with stuff like input fields, where you can trigger an action to “focus” them.

As far as I know, you can execute only triggers from within the component and listen to that, to get the data out of the component. It would definitely be cool to be able to trigger actions within a component, but I’d say, that’s more of a rare usecase anyway. For any logic you want to do that you need triggering for, and it’s not an actual front-end actions I’d suggest you use the global workflows and trigger workflow action.

So … where I am stuck is I don’t get the option to select the component like you are doing in your screenshot. I will try a few more things …

For now (as far as I know) you can’t trigger the actions for the Custom Components

What is available now is trigger. Your component is responsible to emit an event, and you can listen to it outside, and execute your external logic when your component trigger the event.
Equivalent with existing custom component: on Marker click for the map, on value change of input, etc

What is not available (but we are working on it): component actions. Meaning you can call an internal logic from outside.
Equivalent with existing custom component: play video

3 Likes

I totally get this concept - but I am most likely missing something basic to get an example working. Any chance you can post a few screenshots of a super basic, simple example of this implemented? Or @Joyce can make a quick video?? “How to use triggers on the new customizable components”…

Let’s try with a counter:

  • create a component with 2 buttons and a text
    image

  • add a variable to store the count

  • add a trigger, we want to notify the parent about a change of the count
    image
    image

  • add a component workflow. It’s not necessary but both the buttons will share the same logic, so we want to set this up just in one place. We want to change the count by an amount, so we add a parameter amount of type number.
    image
    image

  • add an action to change the variable

  • add an action to trigger the event. Set the event value to an object with a paramenter count with the value of the count variable. This data will be available to the parent’s workflow.


    image

  • add a workflow on the buttons and trigger the workflow handling the counter increments. One button will use amount 1 and the other -1

  • bind the text to display the count

The component is ready: it display the current count, it can increment or reduce the count and it triggers an event to communicate with the parent.

  • on the parent add a workflow triggered by the component’s trigger
    image
    image
    image

  • use the data of the event

In this example the counter is a reusable component, while outside the parent listens to the trigger and update a visualization in a list with the received data.

chrome_dg8inF2dLZ

3 Likes

Huge thanks! I get it now.

1 Like

There is also a different method that can be used. I made an example here