Custom code - API

Custom code in formulas and actions is almost entirely vanilla javascript. However, there is a thin API to access toddle internals that you might find useful.

Custom actions and formulas can contain any number of functions, but they must contain their entry function. The entry function is named the same as your code file. If your file is called showModal then your entry function is called:

function showModal(args, ctx) { ... }

Formulas

Formulas are functions. Given some inputs, they produce an output. This could be Add , which takes a and b and returns them added together. Almost all common functions exist as built-in formulas in toddle already. We have found that you can achieve almost anything by composing the built-in formulas.

Formulas are synchronous, so you should not use Promises , Fetch or similar asynchronous APIs in your custom formulas. Instead, for such cases you can use an asynchronous custom action with a callback to another workflow with the value. You can then use the callback to set a variable that can be used in your formulas.

Please note: formulas written in code, only run/evaluate client side. This means you could see layout shifts when using custom formulas since they won't be evaluated correctly server side.

Actions

toddle expects exactly one function to have the same name as your custom action. This is the entry point. It is called with two arguments:

• The first is an object with the arguments that the action is called by. If your action has an argument called "foo" that is called with "bar", then your arguments object will look like `{ foo: "bar" }`
• The second argument is your current context. This context contains a function "triggerActionEvent" to trigger your events.

Trigger action event

Unlike formulas, actions do not have a return value. Instead, actions may perform callbacks to other workflows with the triggerActionEvent .

function showModal(args, ctx) { ctx.triggerActionEvent("my-action-name", data) }

Events can be called asynchronously, so you could use a setTimeout or call an API, and then call your triggerActionEvent to call another workflow after a wait. This is exactly what the built-in sleep action does in toddle. toddle actions and formulas are built in the same way as your custom code. No magic 🪄

Warning: Formulas and actions can run any code you put into them, so be careful of malicious attempts when you paste code-snippets onto your app. Additionally, formulas should not contain side-effects, leave this to actions. If a formula is not a pure function then it might cause you some nasty bugs and reduce scalability and maintainability of your project.