Displaying Data (Read)

Github Discord Appsmith Cloud Community Forum
Search…
This document presumes you have successfully connected to a data source and have a Query that fetches data.
Widgets
Appsmith has a collection of widgets that can be used to build the UI.
​Button​
​Chart​
​Checkbox​
​Container​
​Datepicker​
​Dropdown​
​Filepicker​
​Form​
​Image​
​Input​
​Maps​
​Modal​
​Radio​
​Rich Text Editor​
​Switch​
​Tabs​
​Table​
​Text​
​Video​
Widgets can be dragged from the widget pane, positioned on the canvas, and resized to fit the data they need to display. They also come with properties that can be visually edited to set their data, change their styles, and trigger actions from them.
Naming a Widget
A widget must have a unique name that acts as an identifier on the page. It is used to access the properties of the widget everywhere in the application. In that sense, a name is like a variable in a programming language.
Note that JavaScript keywords and the window object methods and properties are not valid as widget names.
You can access the various properties of the widget using the widget's name.
1
{{ Table1.selectedRow.id }}
Copied!
Displaying Data in a widget
Widget properties can be edited via the property pane which is opened using the top-right icon (Edit Widget Properties). Data from a Query can be set in a widget property by referencing the name (unique identifier) of the Query.
Appsmith is Reactive so the widgets are automatically updated whenever the data in the Query changes
For example, you can bind the results of the Query as below
1
{{ fetch_users.data.users }}
Copied!
Each widget property has a specific data type that it validates its value against. If the data type mismatches, it will throw an error. This can be fixed using javascript to transform the value of the property
Transforming Data
You can use Javascript inside to transform Query data when binding it to a property. Let us take an example of a Query that returns an array of objects that need to be populated in a dropdown. Directly binding the data will lead to an error as shown below
A dropdown needs an Array<label, value> in its option field, so to connect this data to a dropdown, we need to transform the data in the dropdown options property.
Example Query Data
1
[
2
  {
3
    "id": 1,
4
    "name": "test",
5
    "status": "APPROVED",
6
    "gender": "",
7
    "avatar": "https://robohash.org/sednecessitatibuset.png?size=100x100&set=set1",
8
    "email": "[email protected]",
9
    "address": "St Petersberg #911 4th main",
10
    "createdAt": "2020-03-16T18:00:05.000Z",
11
    "updatedAt": "2020-08-12T17:29:31.980Z"
12
  },
13
  {
14
    "id": 2,
15
    "name": "Jenelle Kibbys",
16
    "status": "APPROVED",
17
    "gender": "Female",
18
    "avatar": "https://robohash.org/quiaasperiorespariatur.bmp?size=100x100&set=set1",
19
    "email": "[email protected]",
20
    "address": "85 Tennessee Plaza",
21
    "createdAt": "2019-10-04T03:22:23.000Z",
22
    "updatedAt": "2019-09-11T20:18:38.000Z"
23
  },
24
  {
25
    "id": 3,
26
    "name": "Demetre",
27
    "status": "APPROVED",
28
    "gender": "Male",
29
    "avatar": "https://robohash.org/iustooptiocum.jpg?size=100x100&set=set1",
30
    "email": "[email protected]",
31
    "address": "262 Saint Paul Park",
32
    "createdAt": "2020-05-01T17:30:50.000Z",
33
    "updatedAt": "2019-10-08T14:55:53.000Z"
34
  }
35
]
Copied!
Transformation Code
The following example iterates over a data set and returns data in an Array<label, value> format
1
{{
2
  QueryName.data.map((row) => {
3
      return { label: row.name, value: row.id };
4
  });
5
}}
Copied!
Query Settings
Display Data in Tables
Last modified 17d ago
Copy link
Contents
Widgets
Naming a Widget
Displaying Data in a widget
Transforming Data