Key Value Cell

The FioriKeyvalueCell is a composable layout used to display the header and content. It can be collapsed if content overflows when using an expandable cell. Deploy action to the cell using an actionable cell.

Quick Setup for the Key-Value Cell

Create a standard key-value cell:

FioriKeyValueCell(content = FioriKeyValueCellContent(
    key = "Normal Key-Value Cell",
    value = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur sollicitudin viverra. Nam tincidunt eleifend pellentesque. Sed rutrum ipsum id nisi ullamcorper, et dapibus leo lobortis. Fusce pulvinar diam eros, eu sagittis libero scelerisque non."
))

Create an actionable key-value cell:

ActionableKeyValueCell(content = FioriKeyValueCellContent(
    key = "Actionable Key-Value Cell",
    value = "650-000-0000"
)){
    // Perform your action here.
}

Create an expandable key-value cell:

var expanded1 by remember {mutableStateOf(false)}
var expanded2 by remember { mutableStateOf(false)}
ExpandableKeyValueCell(
    modifier = Modifier
        .fillMaxWidth(0.5f)
        .align(Alignment.TopStart),
    content = FioriKeyValueCellContent(
    key = "Customize the size of the Key-Value Cell",
    value = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur sollicitudin viverra. Nam tincidunt eleifend pellentesque. Sed rutrum ipsum id nisi ullamcorper, et dapibus leo lobortis. Fusce pulvinar diam eros, eu sagittis libero scelerisque non."
),
    maxLines= 3,
    expanded = expanded1,
    onExpandingStateChange = {
        expanded1 = it
    }
)

ExpandableKeyValueCell(
    modifier = Modifier
        .fillMaxWidth(0.5f)
        .align(Alignment.TopEnd),
    content = FioriKeyValueCellContent(
        key = "Customize size Key-Value Cell",
        value = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam efficitur sollicitudin viverra. Nam tincidunt eleifend pellentesque. Sed rutrum ipsum id nisi ullamcorper, et dapibus leo lobortis. Fusce pulvinar diam eros, eu sagittis libero scelerisque non."
    ),
    expanded = expanded2,
    onExpandingStateChange = {
        expanded2 = it
    }
)

You can set MaxLines for the collapsed state as shown in the first ExpandableKeyValueCell, below (here it is three lines). By default, the number of lines is six, as shown in the second ExpandableKeyValueCell, below.

Expanded ExpandableKeyValueCell

---

Last update: June 15, 2023