BB10 Cascades: how it`s made?

Question

How implement many custom ListItems, like its implemented in standart blackberry calendar app. The following screenshot shows what I mean

Especially I interested what is the second control with right arrow.

Thanks.

Answer 1

You can have multiple "types" of list items.

Attach your different types of listItemComponents each with a different type. e.g.

listItemComponents: [
    ListItemComponent {
        type: "itemA"
        Container {
            Label {
                text: ListItemData.title
                textStyle.color: Color.Blue
            }
        }
    },
    ListItemComponent {
        type: "itemB"
        Container {
            Label {
                text: ListItemData.title
                textStyle.color: Color.Red
            }
        }
    }
]

Then add this function to your listview (I'm using a property of "mytype" but you could check any property of the data model or even base it on the indexpath):

function itemType(data, indexPath) {
    if (data.mytype == "typea") {
        return "itemA";
    } else {
        return "itemB";
    }
}

Now when you add your data to your datamodel make sure you specify "mytype" and the listview will automatically use the ListItemComponent for the relative type.

You can easily have different sized list items, different designs even have them work with different data structures.