Execute Callback

Using this action, you can trigger any action received as a parameter within the component. This is useful for triggering an action defined on a page (outside of a component) from a widget inside the component.

Typically, when you add a component to your page, you can assign actions on the tap of the entire component, but you can't trigger those actions from a widget within the component (e.g., a button in a card component). This action enables you to do just that. Essentially, you define actions on a page, pass them to a component as a parameter, and then trigger them from any widget within the component.

Additionally, this action allows you to access and pass data back to the action received as a parameter. For example, if you have an image upload component and want to pass the uploaded image URL to an action defined on the page, you can use this action to pass the URL back to the page-level action for displaying an image.

Adding Execute Callback action

Let's build an example that uploads the image when a button widget (inside the component) is tapped. Here's how it looks when completed:

Here are step-by-step instructions:

1. Define a callback action parameter on a component

To trigger actions outside of the component, you must create/define a parameter on a component that will receive the actions from outside. While doing so, ensure you set the Type to Action. For this example, we also add a sub-parameter that will be used to pass the image URL back to the action.

2. Add callback actions

To add callback actions, select the component > move to the Properties Panel > Component Properties. Here, you'll see the name of the action parameter created in the component. Click Open to launch the Action Flow Editor, where you can add any desired action.

You can access the data returned by the component via the set variable menu > Callback Parameter > [parameter_name]. For this example, we use the page state variable to display the picture. Therefore, we add an Update Page State action to update the imageURL returned by the component.

3. Trigger callback action

Finally, to trigger the actions received from outside of a component, you can use the execute callback action. Here's how you do it:

  1. Select the widget inside the component.

  2. Select Actions from the properties panel (the right menu), and click + Add Action button.

  3. If needed, you can add some action for processing the data. For this example, we first add the Upload/Save media action to upload a picture from this component.

  4. Then, search and select the Execute Callback (under Utilities) action.

  5. Set the Callback to the parameter name (of type Action) that receives the actions from outside.

  6. To pass data back to the action inside the callback, set the value for the sub-parameter (which was created while defining the parameter for this component).


Last Updated Date: February 15, 2024

Last updated