Collection View

FioriCollectionView is an alternative view for ObjectCell and ContactCell. It emphasizes an image and helps users identify each Object or Contact. If an image is not a good identifier of the item, or a lot of items do not have an image in the data set, use ObjectCell/ContactCell instead.

Anatomy

A FioriCollectionView consists of a header, a list of FioriCollectionViewData, and a footer where each FioriCollectionViewData consists of an image, a headline, a subheadline and an attribute.

FioriCollectionView supports horizontal scrolling of the list of FioriCollectionViewData if the complete list cannot fit inside the available screen width. To provide a visual hint that there are more elements to be presented, FioriCollectionView always starts with a partial element at the end of the scrollable list.

For example if your FioriCollectionView has 500 elements to represent, but the screen size of the device can only accommodate four elements at time, FioriCollectionView displays 3.5 elements, providing a hint that more elements are available to be presented.

Anatomy of FioriCollectionViewData

FioriCollectionViewData contains:

• AvatarText: String contains a detailed string, which acts as the major visual item of the cell. It can be a string of the FioriCollectionView.
• AvatarIcon: FioriIcon contains a detailed icon, which acts as the major visual item of the cell. It can be an icon of the FioriCollectionView.
• AvatarImage: FioriImage contains a detailed image, which acts as the major visual item of the cell. It can be an image of the FioriCollectionView.
• Headline: Name of the FioriCollectionView
• Subheadline: Detail about FioriCollectionView
• Attribute: Attribute of the FioriCollectionView
• Attribute Type: Attribute type of the FioriCollectionView

AvatarText, AvtarIcon, AvatarImage are mutually exclusive. FioriCollectionViewData provides three separate constructors to set their values.

Layouts of FioriCollectionView

FioriCollectionView supports two different layouts: horizontal linear layout and GridLayout.

Horizontal Linear Layout

We provide the FioriCollectionViewLine function to display a collection in inline layout.

Horizontal layout presents FioriCollectionViews horizontally. One element is partially visible to indicate that there are more elements. Users can interact with FioriCollectionView by scrolling horizontally. There is a white gradient applied by default to the partially visible items.

GridLayout

We provide the FioriCollectionViewGrid function to display a collection in GridLayout GridLayout presents FioriCollectionViewDatas in a row-column format. There are no partial elements in this layout. The number of columns is calculated based on the available width to the FioriCollectionView. This layout only supports vertical scrolling.

Example

Because FioriCollectionView contains a list of FioriCollectionView, FioriCollectionView can be used in different configurations.

Collection View Line Layout

Collection View Grid Layout

Construction

FioriCollectionViewData can be created as follows:

val data = FioriCollectionViewData(
    avatarText = "S",
    headline = "headline",
    subheadline = "subheadline",
    attribute = "Available",
    attributeType = AttributeType.Positive
)

The FioriCollectionView Cell can be created like as follows:

Create a list containing the FioriCollectionViewData:

val list = mutableListOf<FioriCollectionViewData>()
list.add(data)

Create the FioriCollectionView line layout:

FioriCollectionViewLine(
    label = "Collection View Line Layout",
    data = list,
    onClick = { p1, _ ->
        Toast.makeText(
            context,
            " The index $p1 item is clicked",
            Toast.LENGTH_SHORT
        ).show()
    },
    seeAll = SeeAllAction(label = "See All (" + list.size + ")", onClick = {}),
    scrollable = scrollable,
    styles = FioriCollectionViewDefault.styles(collectionViewWidth = 128.dp)
)

Or create the FioriCollectionView grid layout:

FioriCollectionViewGrid(
    label = "Collection View Line Grid",
    data = list,
    styles = FioriCollectionViewDefault.styles(collectionViewWidth = 192.dp)
)

Attach Listener to the Footer of FioriCollectionView

The Footer on the FioriCollectionView is a flat FooterButton. In the following example, you can write a lambda to do your logic .

footerButton = FooterButton(label = "See All (" + list.size + ")", onClick = {  
    // your logic
    }),

---

Last update: June 15, 2023