The Container List Web Control is a repeating element to display a collection of data. It can be used in input forms or to display data. The List Web Control iterates over a variable list, displaying a cell for each item on the list.

Properties

Data Binding

Data

Expects type list.

Each item in the List has its own cell.

Item Name

By default named as item. This property is used within the context of each cell as the current item.

Index Name

By default named index. This is the number value of the current index of the current item, visible within the context of the cell.

Collection Name

By default named items. This is a variable referring to the entire collection of Objects, with the default values set up: items[index] = item. 

State

Is Visible

Expects type boolean.

If TRUE the container list will be visible. If FALSE the container list will not be displayed. If the field is empty, the container list will be visible.

Is Disabled

Expects type boolean.

If TRUE, the Container List will be disabled and the user will not be able to interact with the Control. If FALSE, it will be enabled. If the field is empty, it will be enabled.

Style

Containers and their elements can be styled.  See Common Style Properties of Web Controls.

Example

To create a simple house list, add a Container List to the Web Page. In Data Binding > Data, add the following list of house objects:

[
  {
    "name": "Little Prarie House",
    "image": "https://images.unsplash.com/photo-1568605114967-8130f3a36994?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2340&q=80"
  },
  {
    "name": "Modern White House",
    "image": "https://images.unsplash.com/photo-1523217582562-09d0def993a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80"
  },
  {
    "name": "Blue Home",
    "image": "https://images.unsplash.com/photo-1549517045-bc93de075e53?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1742&q=80"
  }
]

Nested under the Container List, you'll find a Container with two Label controls by default. Add an Image control as well. Use the Label for the name of the house and the Image to pass the image of the house.

Then edit the Text property of the label to item.name.

And edit the Image URL property to item.image.

Now the Web Page will display the list of objects in the container list.