Bind a Component to Data

To display data in your user interface, you bind the component used in your application's pages to its data source. Every component has properties that you can bind to variables or expressions. These properties can affect the state of the component (for example, an input text field's value) or its rendering (for example, enabled or disabled).

When a component is bound to a variable, the data stored in the variable is displayed in the component. For example, you might bind an Input Text component to display a particular field's data from a REST endpoint, say, a user name. You can do this manually by clicking the Select Variable icon, available to you on the component's Value property in the Data tab. If you want to assign values to a component based on an expression, say, display a user's full name by combining the first and last names, you need to build an expression by clicking the Expression Editor icon, also available to you on the Value property in the Data tab.

Description of the illustration props-data.png

For example, when you select a string-type name variable as the data source for an Input Text component, you should see the Value set to {{$variables.name}}, which is shorthand for saying your component is now bound to the page-level variable name. The double curly braces around the value {{ }} indicate that the variable can be updated or read by the component. In this case, the variable is automatically updated whenever the component's value changes. Conversely, the component is automatically refreshed whenever the variable changes. Double square brackets [[ ]] mean that the variable's data can only be read.

You can also use Quick Starts to bind a collection component, like a Table or List View, to a data source. See How Do Quick Starts Work?