Binding data

Binding concept

In WeWeb, binding consists in displaying external data in your app. This is is often parsed JSON coming from 3rd-party APIs or tools like Airtable or Xano.

You can also use formulas to manipulate this data.

When bound, the data is displayed in the app. It can be displayed as text, as an image, as a link, as a list, etc. Everytime the data is updated, the app is updated too.

TIP

Outside of texts and images, all the CSS properties or elements settings can also be bound. Meaning you can control your app behavior and design from an external source.

Binding simple data

Let's take a simple example. Let's say you want to display the current logged-in user name in your app.

To do this, you would need to bind a text element to the name property of the user object:

Another example would be to display an image coming from a REST API:

Lastly, you can also bind a CSS property to any value, in this example, a variable in your app:

Binding an array of data

You can also bind an array of data. This is useful when you want to display a list of items.

The main use-case would be to display a list of items coming from an API. Let's say you want to display a list of companies coming from an API:

Some explanations are needed here.

The companies array (collection) is bond to the main container. Then, the first container's child (here, the card) gets repeated for every element in the array.

Then, every element in the child can be bound to a field in the array's element. For example, the image element is bound to the logo field of the company object.

Using formulas in bindings

You can also use formulas in bindings. This is useful when you want to manipulate data before displaying it.

For example, let's say you want to display a text composed of two or more fields. You could use the concatenate formula to do this: