Skip to main content

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}}
Display response from async function in widget field

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.

Further reading​