Ask toddle AI

๐Ÿ 

Docs home

๐Ÿ‘ถ

Getting started

๐ŸŽ“

1st week in toddle

๐Ÿ› ๏ธ

The editor

๐Ÿงฑ

Elements

๐Ÿ’…

Styling and layout

๐Ÿ“ฆ๏ธ

Components

๐Ÿ“„

Pages and navigation

โ˜๏ธ

Working with APIs

๐Ÿงฎ

Formulas

๐Ÿ””

Events and actions

๐Ÿ“ฆ

Packages

๐Ÿค–

Custom code

๐Ÿ‘ฏโ€โ™‚๏ธ

Integrations

๐Ÿฟ

Tutorials

๐Ÿงฐ

Other

Workflows

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.

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 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.

Actions

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.

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code โ€” but accessible to your entire team!

Try toddle โ€” it's free!
Server-side rendered Installable PWAs Connect to any database As performant as code toddle is built in toddle undefined undefined undefined undefined undefined
undefined Style tokens Export as web components No feature limits Connec to any API Extend with code undefined undefined undefined undefined

ยฉ Copyright 2024 toddle. All rights reserved.