List

List component is designed for efficient display of vertically / horizontal scrolling lists of data.

Usage

In most of the cases, "List" component will be used together with "Connect Server" component to read data from server and display the lists of data on screen.

Action [ Created | Refreshing | List Ended ]

Simply click the action you want to define and drag components inside.

Created:

Mostly used to design the layout of each listed item. Better use a "Row" (In fact, Row is a "Group" component) to contain layout of listed item and you will need to design one "Row" only. List component will clone the design based on the number of data inserted and fill in corresponding content automatically.

Gmail	Facebook	Telegram
Gmail use "List" to read data from email and designed one layout of each list item.	Facebook use "List" to read feed data from server and designed one card layout of each feed item.	Telegram use "List" to read recent chatroom data from server and designed one layout of each chatroom item.

Example

If you want design the layout of list item as "Telegram" example above, you can simply start from a "Row". The logic is showed below. ( ) is used to define the action we selected and [ ] is used to define the properties we set:

List -> (Created) -> Row -> (Created) -> Group -> (Created) -> Image [URL/Base64: iconimage.jpg / ${iconimage}]
                                      -> Group -> (Created) -> Text [Text: PollBot / ${groupname}]
                                                            -> Text [Text: You vote for Math / ${lastmsg}]
                                      -> Group -> (Created) -> Text [Text: 5:54PM / ${lastupdatetime}]

Refreshing:

It used to define action when user scroll down the list to trigger refreshing action.

Example

If we want to read latest data from server once the list is created or each time user trigger the refreshing action, we can make use of "Connect Server" component after refreshing action occurred. The logic is showed below. ( ) is used to define the action we selected and [ ] is used to define the properties we set:

List [Refresh on created: Yes] -> {refreshing} -> Connect Server

List Ended:

It used to define action when user scroll to the end of the list.

Example

If we want to read other dataset from server when user scroll to the end of the list, we can make use of "Reload Action" component to refresh the list with another dataset entry. The logic is showed below. ( ) is used to define the action we selected and [ ] is used to define the properties we set:

List -> {List Ended} -> Reload Action

Properties

Simply click a gear on the right hand corner of related "List" component to edit the properties.

Data Source - It's used to define the storage name of dataset you want to list out.

Refresh on created [ Yes | No ] - It's used to define if it's needed to trigger refreshing action when the List component created.

Horizontal [ Yes | No ] - It's used to define the item within List should be listed vertically or horizontally. Item will be listed horizontally if Yes is selected.

Paging [ Yes | No ] - TBC