v1.3
Core Concepts
Datasource Reference
Framework Reference
List
The List widget is used to display a paginated list of similarly structured data.
List widget is in beta right now. It can only render widgets for display purposes in the template as of now. This is a platform limitation that will be solved in future. You won't be able to use any widget that has any default value ( Input, Switch, Checkbox, Select etc )
Current Item
List widget is used to repeat a template based on the large data (collection on objects). The template is basically a container widget that repeats itself. In each widget in the template, you might need access to the current item, That's where
currentItem property comes in handy. It gives access to the current item in the loop. For e.g - If you want to show an image widget in the list, you can use:1
{{ currentItem.avatar}}
2
​
3
// assuming avatar is a property in the array of objects in the items
Copied!
Current Index
You can access the current index of the row in the list with
currentIndex property.1
{{ currentIndex }}
2
​
3
// the above statement will give 0 for the first row.
Copied!
Items
Items is a special property in list widget which contains the data of children's widgets for each row. This property becomes very useful when dealing of input widgets. For e.g - if you want to access the text value of input widget for the first row, You can simply do:
1
{{ List1.items[0].Input1.text }}
Copied!
In the above example, List1 is the name of the list widget and Input1 is the name of the input widget inside the template container of list widget.
Use cases
1. Getting the value of children widgets
Let's say you have input widget and a button widget inside the list widget and you want send the value of input on click of the button to some api. You can access the value of any children widget for the current row with the combination of
currentIndex and items1
{{ List1.items[currentIndex].Input1.text }}
Copied!
Note: currentItem and currentIndex is only available in the autocomplete of controls, in the property pane of list widget template's children.
Widget Property
Description
Items
This property lets you edit the items in the list. You can either write an array of objects to display as list items or you can bind data from an API using the mustache syntax
Background
sets the background color of the list widget
Item Background
sets the background color of list items
Grid Gap
sets the margin between list items in pixels
Actions
Description
onListItemClick
Last modified 21d ago