Skip to content

Card Cell

Card Cell is a list item view that can represent a Card Cell object.

Anatomy

A card cell consists of a title/headline, subtitle/subheadline, caption/footnote, and status/KPI/icon buttons/label button.

Example

Card Cell Example
Card Cell on a Phone

Development

Card Cells are implemented entirely using Jetpack Compose, including a composable FioriHorizonTheme. To understand the fundamentals of Jetpack Compose, refer to the Android Developer's documentation.

Card Cells provide two UI components for application developers to use:

  • FioriCardCell – a UI component to display a single Fiori Object Cell.
  • FioriCardCellList – a UI component to display a series of Object Cells in a horizontally scrollable list.

Usage in an Application

This section describes how to use Card Cell components in an application.

Sample Application on a Phone in Light Mode
Card Cell on a Phone

How to Create a Card Cell

FioriCardCell is a composable function with the following parameters:

  • modifier – a Modifier that is used to define the height and width of the cell.
  • cellData – a FioriCardCellData that specifies the data to be displayed in the cell.
  • onClick – a lambda that specifies the lambda function that can be called when the cell is clicked.
  • colors – a FioriObjectCellColors that defines color use for the cell.
  • textStyles – a FioriObjectCellTextStyles that define the textStyles in the cell.
  • styles – a FioriObjectCellStyles that define styles, such as the padding, in a cell.
@Composable
fun FioriCardCell(
    modifier: Modifier = Modifier,
    cellData: FioriCardCellData,
    onClick: (() -> Unit)? = null,
    colors: FioriObjectCellColors = FioriObjectCellDefaults.colors(),
    textStyles: FioriObjectCellTextStyles = FioriObjectCellDefaults.textStyles(),
    styles: FioriObjectCellStyles = FioriObjectCellDefaults.styles(),
)

FioriCardCellData is defined as follows:

data class FioriCardCellData(
    override val headline: String = "",
    override val avatar: FioriAvatarConstruct? = null,
    override val subheadline: String? = null,
    override val footnote: String? = null,
    override val cellClickable: Boolean = true,
    override val enabled: Boolean = true,
    override var isSelected: MutableState<Boolean> = mutableStateOf(false),
    override var contentDescription: String = "",
    override var displaySelectBox: MutableState<Boolean> = mutableStateOf(false),
    val iconActions: List<Action>? = null,
    val labelButton: LabelButton? = null,
    var statusInfo: List<FioriStatusInfoLabelData>? = null,
    var kpi: FioriNumericKpiData? = null,
)

Fields

Headline

The headline is the main area for text content. The headline is the only mandatory content for an Object Cell. The title can be specified as follows in FioriCardCellData:

headline = ""

in FioriCardCellData

Avatar

The avatar provides a visual representation of the object and is specified as follows:

avatar = FioriAvatarConstruct(
    hasBadge = hasBadge,
    hasBorder = hasBorder,
    avatarList = listOf(
        FioriAvatarData(
            image = FioriImage(url = ""),
        ), FioriAvatarData(
            image = FioriImage(url = ""),
        )
    ),
    size = 18.dp,
    avatarBadge = FioriIcon(
        resId = R.drawable.ic_circle_unread
    ),
    type = FioriAvatarType.DOUBLE
)

FioriAvatarConstruct is used to construct the Avatar area:

@Parcelize
data class FioriAvatarConstruct(
    val type: FioriAvatarType = FioriAvatarType.SINGLE,
    var avatarList: List<FioriAvatarData>,
    val hasBadge: Boolean = false,
    val avatarBadge: FioriIcon? = null,
    val groupDisplayNumber: Int = 0,
    val size: Dp = 40.dp,
    val hasBorder: Boolean = false,
    val borderColor: Color? = null,
    val backgroundColor: Color? = null,
    val shape: FioriAvatarShape = FioriAvatarShape.ROUNDEDCORNER
) : Parcelable
  • type – a FioriAvatar has three types: SINGLE, DOUBLE, and GROUP. SINGLE and DOUBLE are used to display in the Avatar area. GROUP is used to display in the Avatar stack area.
  • avatarList – a List that contains FioriAvatarData objects.
  • hasBadge – a Boolean used to display the badge or not.
  • avatarBadge – a FioriIcon used to define the badge.
  • groupDisplayNumber – an Int used to display the number when using the group type.
  • size – a Dp used to define the Avatar area size when AvatarType is SINGLE or DOUBLE.
  • hasBorder – a Boolean used to display the Avatar border.
  • borderColor – a Color used to define the color of the border.
  • backgroundColor – a Color is used to display the background of the Avatar.
  • Shape – a FioriAvatarShape used to support two types: ROUNDEDCORNER and CIRCLE.

Sample Avatar

Subheadline

The subheadline is under the headline and provides additional information. The subheadline can be specified as follows:

subheadline = ""

Footnote

The footnote is under the subheadline and provides further information. The footnote can be specified as follows:

footnote = ""

Right Accessories

Users can define statuses, icon buttons, text buttons, KPIs, or nothing on the right side of the card cell. Only one right accessory can be displayed in the cell due to the limited space on the card.

Statuses Defined in Card Cell
Card Cell on a Phone

Fiori Card Cell List

FioriCardCellList allows you to display Card Cells in a list. It accepts a list of FioriCardCellData as a parameter.

@Composable
fun FioriCardCellList(
    modifier: Modifier = Modifier,
    cellList: List<FioriCardCellData>,
    onClick: ((Int, FioriCardCellData) -> Unit)? = { _, cellCommonData ->
        cellCommonData.setDisplayReadIndicator(false)
    },
    colors: FioriObjectCellColors = FioriObjectCellDefaults.colors(),
    textStyles: FioriObjectCellTextStyles = FioriObjectCellDefaults.textStyles(),
    styles: FioriObjectCellStyles = FioriObjectCellDefaults.styles(),
)
Last update: February 29, 2024