Intro to variables

A variable in WeWeb is a way to store and manage data within your web application.

Variables enable you to store values, such as text, numbers, booleans (true/false), arrays or objects, that can be used and manipulated throughout your application.

You can use variables to dynamically update content, interact with data from external sources, or control the behavior of your website's elements and components.

They have a name and a value:

• the name is used to refer to the variable, and
• the value is the data that the variable stores.

For example, you can create a variable named myName and assign it the value John Doe. You can then use the variable name to refer to the value, such as when you want to display the value on a web page.

Create a global variable

Here's a short interactive tutorial on how to create a global variable in WeWeb:

Let's take a look at each step:

1. Variables are in the Data tab of the WeWeb navigator
2. Click on the New in the Variables section of the panel
3. Name your variable
4. Choose the variable type from the dropdown menu (e.g., Text, Number, Boolean, Query, etc.)
5. Optionally, you can set a default value for the variable in the Default value field
6. Decide if you want the variable to be preserved on navigation and/or saved in local storage
7. Click on Create to create the variable.

Now, you can use this variable throughout your website by binding it to UI components or using it in workflows.

Variables types

In programming, variables are helpful to store, send, and display information. For example, you can store the name of a user in a Text variable (also called a string) or a list of users in an Array variable in your frontend before sending the information your your backend.

However, if you try to send the value of a Text variable to a column in your backend that expects an Array, you'll get an error.

That's why it's important to understand the different data types you may encounter in web development.

Text

A text variable is a variable that stores text. You can use text variables to store text values, such as names, addresses, or any other text data. It's equivalent to a string in JavaScript.

Number

A number variable is a variable that stores numbers. You can use number variables to store numeric values, such as prices, quantities, or any other numeric data. It's equivalent to a number in JavaScript.

Boolean

A boolean variable is a variable that stores a boolean value (true or false). You can use boolean variables to store boolean values, such as a flag that indicates whether a user is logged in or not. It's equivalent to a boolean in JavaScript.

Object

An object variable is a variable that stores an object. You can use object variables to store complex data, such as a user profile, a product, or any other data that has multiple properties. It's equivalent to an object in JavaScript.

Array

An array variable is a variable that stores an array. You can use array variables to store a list of values, such as a list of products, a list of users, or any other data that has multiple values. It's equivalent to an array in JavaScript.

Query

You can use query variables to store the value of a query string parameter in an URL. It's equivalent to a query string parameter in JavaScript.

This can be useful to:

• make dynamic API calls based on query strings
• display an error message
• save UTM information
• store an auth token

In the example below, we use a query variable to capture and display an error message from our authentication system:

Display variable value

To use a variable in WeWeb, follow these steps:

• Open a workflow's action or a binding panel on any element
• Go to the Variables tab
• Click on the variable you want to use

You can also use variables inside formulas like so:

Inspect current value

In the example below, our text element is bound to the myName variable. When we change it's current value or default value, it changes the text displayed on the page: