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 🎉
In this example, we import canvas-confetti lazily when the action is called.
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!
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.
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).
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.