Display Data (Read)
You can display data from a query or JS function in a widget. Before reading this page, ensure you have connected to a data source and have a query that fetches data.
Display data from query
Data from a Query can be set in a widget property by referencing the Query's unique name.
Example 1: suppose you have a query named fetch_users
. You can bind the results of the query to the Table widget by adding the following code in the Table Data property:
{{ fetch_users.data }}
For more information about using Table widget to show data from queries, see display data in tables.
Display data from JS function
Widgets have fields/properties where you can bind data or trigger actions.
Sync fields are properties that expect input or data. For example, for an Input widget, properties such as Default Value
, Max Characters
, Regex
, and Error Message
expect input and are sync fields.
Async fields are properties that can trigger an action or perform an operation. For example, the properties like OnTextChanged
and OnSubmit
of an input widget are async fields. You can use these properties to execute an action, Query or a function within a JS object.
Sync JS function
To display the response from a synchronous JS function in a widget field, call the function inside the JS Object as shown below:
{{JSObjectName.functionName()}}
Async JS function
To display the response from an asynchronous JS function in a synchronous field, you need to retrieve it using the .data
property as shown below
{{JSObjectName.functionName.data}}
Transform data
Each widget property has a specific data type that it validates its value against. If the data type mismatches, it throws an error. You can use JavaScript to transform the data when binding it to a property. For example, consider a query that returns an array of objects, as shown below:
Example Query Data
[
{
"id": 1,
"name": "test",
"status": "APPROVED",
"gender": "",
"avatar": "https://robohash.org/sednecessitatibuset.png?size=100x100&set=set1",
"email": "barty.crouch@gmail.com",
"address": "St Petersberg #911 4th main",
"createdAt": "2020-03-16T18:00:05.000Z",
"updatedAt": "2020-08-12T17:29:31.980Z"
},
{
"id": 2,
"name": "Jenelle Kibbys",
"status": "APPROVED",
"gender": "Female",
"avatar": "https://robohash.org/quiaasperiorespariatur.bmp?size=100x100&set=set1",
"email": "jkibby1@hp.com",
"address": "85 Tennessee Plaza",
"createdAt": "2019-10-04T03:22:23.000Z",
"updatedAt": "2019-09-11T20:18:38.000Z"
},
{
"id": 3,
"name": "Demetre",
"status": "APPROVED",
"gender": "Male",
"avatar": "https://robohash.org/iustooptiocum.jpg?size=100x100&set=set1",
"email": "aaaa@bbb.com",
"address": "262 Saint Paul Park",
"createdAt": "2020-05-01T17:30:50.000Z",
"updatedAt": "2019-10-08T14:55:53.000Z"
}
]
Suppose you want to display this data in a Select widget. A Select widget only accepts data as an Array in the { "label": "string", "value": "string" }
format in its Options property, so you must transform the data from the query to pass it in the required structure.
The following example iterates over the query data and returns it in an Array<label, value>
format:
{{
QueryName.data.map((row) => {
return { label: row.name, value: row.id };
});
}}
Update widgets programmatically
When working with widgets in Appsmith, you may need to update values in the widget properties dynamically. Appsmith follows the reactive programming paradigm. Instead of updating widget properties and states through direct variable assignment (x = 5), widgets are connected and share data with each other. When a value is updated, any widgets that depend on that changed value also update automatically.
Example 1: suppose you have two Input widgets named Input1
and Input 2
. To update Input2
with the value entered in Input1
, add the following code in the Default Value
property of Input2.
{{Input1.text}}
Enter a value in Input1
and see how the value updates in Input2
.
Example 2: suppose you have two input widgets and one button widget named Input1
, Input2
, and Button1
, respectively. This example shows how to update Input2
with the value in Input1
on the button click. Here, the storeValue() function is used.
Paste the following code in the onClick
event of Button1
.
{{storeValue('inputData',Input1.text)}}
Paste the following code in the Default Value
property of Input2.
{{appsmith.store.inputData}}
Enter a value in Input1
. On button click, the value updates in Input2
.