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

Now click the (+) button next to

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.

Add arguments that your action can take as input.

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

ctx.triggerActionEvent(

All done ๐ŸŽ‰

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

Preview of the final action

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.