Action Triggers

THIS PAGE
Introduction
Creating an action trigger
Action: Control Component
Action: Refresh Component
Action: Execute an endpoint
Action: Navigate
Action: Set Variable
Action: Show confirmation
Action: Show alert

Introduction

Action triggers are used to perform various operations based on certain triggers such as click or change. They are a powerful way to make your tools more interactive and productive.

Screenshot

Each component comes with it's own set of features based on the component's functionality. Let's go over all of the actions available to trigger.

Creating an action trigger

Screenshot

  • Select the component for which you want to add the action trigger.
  • In the properties panel, under the action triggers section, click on + Action Trigger to add a new trigger.
  • Select the action to trigger on (Click / Change / Right Click) etc.
  • Configure the action

Adding multiple actions

Screenshot

Most triggers require multiple actions (example: ask for confirmation → execute an endpoint → show success alert). You can achieve this by creating a multi-step trigger.

Simply click on the + Step on the trigger configuration panel to configure an additional action.

Note: All actions are executed in order, if an action fails, an alert is shown and no further actions are executed.

Action: Control Component

The control component handler allows you to modify the behaviour of other components on the page. You can perform actions such as dynamically selecting a row in a table or automatically filling a form on the click of a button.

Screenshot

Creating a control component action

  • Add a new trigger action to a component with the desired trigger.
  • Select the Control component action
  • Select the component property that you want to modify
  • Set the value that you want to set for that property when the trigger executes.

Notes

  • Only components on the current page can be selected.
  • You can add a dynamic value to be set using Javascript expressions

Action: Refresh Component

Sometimes you want to refresh the properties of a component so that they get the latest data from any dynamic sources.

For example, you might want to refresh the contents of the table after adding a new entry to it.

Screenshot

Creating a refresh component action

  • Add a new trigger action to a component with the desired trigger.
  • Select the Refresh component action
  • Select the component property that you want to refresh

Notes Only components on the current page can be refreshed.

Action: Execute an endpoint

One of the most common actions performed is executing an endpoint. You can execute any of the endpoints created in your current project.

For example, making an api call to save form details on the click of a button.

Screenshot

Creating an execute an endpoint action

  • Add a new trigger action to a component with the desired trigger.
  • Select the Execute Ednpoint action
  • Select the endpoint that you want to execute
  • If the endpoint is configured with inputs, you can specify them as well. They accept dynamic values.

Notes If an endpoint fails to execute, an automatic alert is shown to the user.

Action: Navigate

This action allows you navigate between different pages of your app as well as external urls.

Screenshot

Creating a navigate action

  • Add a new trigger action to a component with the desired trigger.
  • Select the Navigate action
  • You can either navigate to a page within your app or a url
  • If you're navigating to another page on your app, you can also set page parameters to pass data between pages. This is particularly useful navigating to a details page from a list view.

Notes This action does not execute when editing on the canvas. Preview the app to trigger this action.

Action: Set Variable

Use this action to set reusable variables and store some temporary data on the user's browser. These variables can then be used by other components.

Screenshot

Creating a set variable action

  • Add a new trigger action to a component with the desired trigger.
  • Select the Set Variable action
  • Set the name of the variable and then set it's new corresponding value.
  • When this action executes, it replaces the previous value if it exists with the new one.

Notes These variables are temporary and disappear when the page is refreshed.

Action: Show confirmation

This allows you to show a confirmation message to the user before continuing on to the next step. If the user denies the action, then no the execution stops and no further steps are executed.

Screenshot

Creating a show confirmation action

  • Add a new trigger action to a component with the desired trigger.
  • Select the Show confirmation action
  • Set the confirmation message to be shown. It can be a dynamic value.
  • When this action executes, The user is shown a confirmation dialogue with the message that was set.
  • If the user confirms, the next step is executed for the trigger.

Notes If no steps are present after this action, the confirm button acts the same way as the cancel button.

Action: Show alert

This allows you to show a temporary alert to the user. It can be used to convey a success or error message after another previous step completes.

Screenshot

Creating a show alert action

  • Add a new trigger action to a component with the desired trigger.
  • Select the Show alert action
  • Set the alert message to be shown. It can be a dynamic value.
  • Set the alert type to be shown. It can be either Success or Error.
  • When this action executes, The user is shown a temporary alert with the message and type that was set.

Notes You can refer to the previous steps results with {{steps[STEP_NUMBER]}} where STEP_NUMBER is the step number for which you want to get the data for.

Did you find what you were looking for?
👍
👎
What went wrong?
Need more help?We have a thriving Discordcommunity that can help you with all things Canonic. →