Custom actions

In this tutorial, you’ll learn how to create a custom formula or action that you can use in toddle ✨

Tip: We've designed the built in formulas and actions so that virtually any problem can be solved without having to write a single line of code! Reach out to our toddle discord to discuss solving your problem without code.

Create a custom action.

An action is an effect response to an event or lifecycle. This effect could be a button causing the user to navigate to a different URL, write something to the console, or shoot confetti at an unexpecting reader 🎉

Step 1

Open the custom code section on the left panel

Step 2

Step 3

A custom action can execute any Javascript code. Additionally, custom actions run as modules, so you may import third-party ES6 modules .

In this example, we import canvas-confetti lazily when the action is called.

async function confetti(args, ctx) {
const cavasConfetti = await import('https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/+esm');
cavasConfetti.default();
}

Step 4

We can now use the action in response to an event. Try adding a button with a "Click" event and run "confetti." This should already work; however, we can do even better!

Arguments

You can add arguments to your actions (and formulas). Arguments allow you to call the same action but with different data.

In this example, we have to be a bit careful to name the arguments similar to what canvas-confetti expects as its options, but you may call them whatever you'd like as long as you use the same name in your code.

Update code to pass args as the options for canvas-confetti. Also, post the number of particles to the console for debug purposes.

Events

Actions differ from formulas as they not only have arguments but also ✨events✨

Events let you call another workflow once it is triggered in your action. Since we load our confetti asynchronously, wouldn't it be nice to emit an event when the confetti bomb is popped 💥

For events, it's possible to specify example outputs. This allows us to describe what information an event might provide (e.g., a number or an object).

screenshot of the events section in custom actions

In our code, we can then trigger the event by accessing the current context

All done 🎉

You should now be able to find and use your new custom action in your workflows.

For good order, this is how it could look: Demo time 🎉

You can take toddle actions much further! Actions can be used to write to a browser-based database, control your smart fridge , and everything else a browser can do.

Custom code - API