List
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 )
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:
{{ currentItem.avatar}}​// assuming avatar is a property in the array of objects in the items
You can access the current index of the row in the list with currentIndex property.
{{ currentIndex }}​// the above statement will give 0 for the first row.
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:
{{ List1.items[0].Input1.text }}
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.
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 items
{{ List1.items[currentIndex].Input1.text }}
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 | Sets the action to be run when the user clicks on a list item. See a list of supported actions​ |
