A workflow is a series of conditional actions in response to a user or application event

Structure of a workflow

You may have come across workflows before. A workflow can be used to describe the flow of some logic as a graph. In toddle, a workflow always runs top-down. So we may use it to validate some user input. In the following example, we listen to the `change` event of an input field and check if the input is valid.

In the example, we use a `switch` node to create conditional logic. Each case in the switch validates itself using a formula. The workflow will continue from the first case to return truthy, going from left to right. If no case is true, the else will run.


The result of your workflow is to run some desired action. Sometimes based on conditions with a `switch`, but often a workflow can be as simple as a single action, such as `Set variable` or `Trigger event`

Action events

Some actions have events of their own. For example, if you call one of your APIs with an action, you can perform a new workflow on either `onSuccess` or `onError` to handle different use cases.

Common actions

  • Set variable : Actions can be used to update the state of your app.
  • Call API : APIs that do not have an auto-fetch set, must be called during a workflow to fetch their data. You can also use this type of action to re-fetch data when you expect it to have new data.
  • Logging and Monitoring : Actions can write logs, monitor system health, or report anomalies.
  • Trigger component event : When you click a button in your component, you can use the element event's workflow to trigger a component-level event that parent elements can listen to.
  • Timers : The `Sleep` action can be used to delay the execution of a new workflow, or you can utilize `Interval` to continuously repeat a workflow every x seconds.
  • Custom action : Perhaps you have created a custom action . These will show up when picking actions. A custom action can be used to set a value in session-storage etc.