Trigger Component

Ask us anything
1

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

2

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.

3

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
4

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 -

action_02
action_023456Ă—2234 502 KB

action_01
action_011920Ă—1241 108 KB

action_03
action_031920Ă—1241 126 KB

5

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.

Screenshot 2023-12-09 at 14.53.20
Screenshot 2023-12-09 at 14.53.20890Ă—660 37.5 KB

This is on my pagination component

Screenshot 2023-12-09 at 14.53.59
Screenshot 2023-12-09 at 14.53.59932Ă—310 18.6 KB

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

6

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)

7

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.

Screenshot 2023-12-09 at 15.01.36
Screenshot 2023-12-09 at 15.01.36706Ă—500 21.9 KB

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.

8

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 …

9

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

10

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
11

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”…

12

Let’s try with a counter:

  • create a component with 2 buttons and a text
    image

  • add a variable to store the count

    image
    image821Ă—469 26.4 KB

  • 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

    image
    image1025Ă—606 52.4 KB

  • 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
    image1010Ă—591 51.1 KB

    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

    image
    image1177Ă—527 36.6 KB

  • bind the text to display the count

    image
    image979Ă—594 55.4 KB

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

    image
    image1007Ă—626 54.5 KB

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

4 Likes
13

Huge thanks! I get it now.

1 Like
14

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

1 Like