Ask toddle AI

๐Ÿ’ฌ

Help forum

๐Ÿ 

Docs home

๐Ÿ‘ถ

Getting started

๐ŸŽ“

1st week in toddle

๐Ÿ› ๏ธ

The editor

๐Ÿงฑ

Elements

๐Ÿ’…

Styling and layout

๐Ÿ“ฆ๏ธ

Components

๐Ÿ“„

Pages and navigation

โ˜๏ธ

API setup

๐Ÿงฎ

Formulas

๐Ÿ””

Events and actions

๐Ÿ“ฆ

Packages

๐Ÿค–

Custom code

๐Ÿ‘ฏโ€โ™‚๏ธ

Integrations

๐Ÿฟ

Tutorials

๐Ÿงฐ

Other

๐Ÿ”—

References

Variables

Variables are a way to store temporary data that can change rapidly. Data stored in variables are only persisted while the page is visible. For example, if you reload the window then all variables will be reset. Variables are the fastest way to store and retrieve data. This makes variables an ideal choice when you need high performance but you don't care about the data being persisted between uses.

Creating variables

You can create a new variable by clicking the "+" button next to Variables in the data panel.

Creating a new variable

You can then give your variable a Name and an Initial value for the variable. The initial value can either be specified as a static value or as a formula. By using a formula you can specify the initial value of a variable to be based on an attribute.

You cannot specify the initial value of a variable based on data from an API since the value data from the API will not be ready at the time the variable is initialized. Instead, set an initial value such as Null and the update the variable when the data is fetched from the API.

Your new variable is now available inside any formula in the component.

Accessing variables inside formulas

Updating variables

Once you have created a variable you will see a new action inside the action selector of any workflow inside the component.

Updating a variable though an action.

Variable scope

We say that a variable is Scoped to the component it is defined in. This means that a variable can only be accessed or updated inside that component.

Initially this may seem rather limiting, but as your application grows and your are adding more and more components, it drastically simplifies reasoning about your applications data. Without this restraint it can sometimes be difficult to know which parts of our application is using a specific variable, or if it is even still relevant.

Binding input fields

A common use of variables is to represent the value of an input field. This can be done by selecting an input field and choosing "Bind to variable" in the Attributes tab.

Binding an input field to a variable

Now every time the variable changes, the input fields value will change. Likewise every time a user inputs a new value in the input field, the value of the variable will change.

Binding an input to a variable is just a shortcut for: 1. Setting the inputs value attribute to match the variable. 2. Updating the variable when an input event happens on the input. To understand how this works, inspect the value attribute and input event of an input after you have bound it to a variable.

Learn more:

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code โ€” but accessible to your entire team!

Try toddle โ€” it's free!

ยฉ Copyright 2024 toddle. All rights reserved.