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 in a way that virtually any problem can be solved without the need to wrestle with a single line of code!

So reach out to the vibrant community on our toddle Discord before you go down the rabbit hole that is custom code. Don't be shy – join the fun and let's solve yout puzzle together! 🌟

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

We can execute any javascript code in our custom action. Additionally, custom actions are running as a module, 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 actually popped 💥

For events, it's possible to specify example outputs. This makes it possible to describe what kind of 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 all other effects a browser is capable of.

Custom code - API