Multi Sort¶

The multi sort allows users to choose multiple sorting options from a list of predefined options. It also allows users to reorder the selected options by dragging and repositioning them.

Using the Multi Sort¶

The multi sort can be used in your app like any traditional composable function:

 val sortValue = FioriMultiSortValue(
    rememberSaveableStateFioriMultiSortDataList(
        rememberMutableStateFioriMultiSortData(
            criterionLabel = "Position",
            isSelected = true,
            isAscendingOrder = true,
            ascendingOrderLabel = "Increasing",
            descendingOrderLabel = "Decreasing"
        ),
        rememberMutableStateFioriMultiSortData(
            criterionLabel = "Pending tasks",
            isSelected = false,
            isAscendingOrder = true,
            ascendingOrderLabel = "Increasing",
            descendingOrderLabel = "Decreasing"
         ),
        rememberMutableStateFioriMultiSortData(
            criterionLabel = "Protection",
            isSelected = true,
            isAscendingOrder = false,
            ascendingOrderLabel = "Protected",
            descendingOrderLabel = "Not protected"
        )
    )
)

FioriMultiSort(
    value = sortValue,
    onValueChange = {},
    label = "MULTIPLE SORT",
    helperText = "You can select multiple criteria and reorder item"
)

Using the Multi Sort

Editable and Non-Editable Modes¶

The multi sort can be set to be editable or non-editable. By default, it is editable. You can control the editability of the multi sort using the enabled parameter of the 'FioriMultiSort' compose function.

Helper and Error Texts¶

To set the helper or error texts on the multi sort, use the helperText and errorMessage parameters, respectively, in FioriMultiSort. To enable the error text and set the multi sort to be in error state, set the isError parameter to true.

 val sortValue = FioriMultiSortValue(
    rememberSaveableStateFioriMultiSortDataList(
        rememberMutableStateFioriMultiSortData(
            criterionLabel = "Position",
            isSelected = true,
            isAscendingOrder = true,
            ascendingOrderLabel = "Increasing",
            descendingOrderLabel = "Decreasing"
        ),
        rememberMutableStateFioriMultiSortData(
            criterionLabel = "Pending tasks",
            isSelected = false,
            isAscendingOrder = true,
            ascendingOrderLabel = "Increasing",
            descendingOrderLabel = "Decreasing"
         ),
        rememberMutableStateFioriMultiSortData(
            criterionLabel = "Protection",
            isSelected = false,
            isAscendingOrder = false,
            ascendingOrderLabel = "Protected",
            descendingOrderLabel = "Not protected"
        )
    )
)

var isError by rememberSaveable { mutableStateOf(false) }
var errorMessage by rememberSaveable { mutableStateOf("") }
FioriMultiSort(
    value = sortValue,
    onValueChange = {
        isError = it.isSelectedEmpty()
        errorMessage = if (isError) "You must provide at least one sorting criteria" else ""
    },
    label = "MULTIPLE SORT",
    isError = isError,
    errorMessage = errorMessage,
)

Helper, and Error Texts

Set Sort Criteria¶

The multi sort presents a list of sort criteria to choose from. You can create a 'FioriMultiSortData' object using the 'rememberMutableStateFioriMultiSortData' function. After that, you can use the 'rememberSaveableStateFioriMultiSortDataList' function to create sort criteria data that will not be lost when multi sort re-composition occurs (if the screen is rotated, for example).

Once the sort criteria has been created, you can set it to the 'sortCriteria' property in 'FioriMultiSortValue', which was used by the 'FioriMultiSort' compose function.

val sortValue = FioriMultiSortValue(
    rememberSaveableStateFioriMultiSortDataList(
        rememberMutableStateFioriMultiSortData(
            criterionLabel = "Position",
            isSelected = true,
            isAscendingOrder = true,
            ascendingOrderLabel = "Increasing",
            descendingOrderLabel = "Decreasing"
        ),
        rememberMutableStateFioriMultiSortData(
            criterionLabel = "Pending tasks",
            isSelected = false,
            isAscendingOrder = true,
            ascendingOrderLabel = "Increasing",
            descendingOrderLabel = "Decreasing"
         ),
        rememberMutableStateFioriMultiSortData(
            criterionLabel = "Protection",
            isSelected = true,
            isAscendingOrder = false,
            ascendingOrderLabel = "Protected",
            descendingOrderLabel = "Not protected"
        )
    )
)

FioriMultiSort(
    value = sortValue,
    onValueChange = {},
    label = "MULTIPLE SORT",
    helperText = "You can select multiple criteria and reorder items."
)

Reordering¶

The multi sort allows you to reorder the sort criteria by dragging the row using the handle.

Reordering image 1 Reordering image 2 Reordering image 3

Callbacks for Value Changes¶

The multi sort use the onValueChange callback to notify you if the sort criterion was changed (i.e., the sort criterion was selected or unselected) or the sort order direction was changed.

Customization¶

As with the simple text fields, the multi sort also provides several customization methods using FioriMultiSortDefaults. Use these methods to customize the multi sort's colors, text styles, height, and width, etc. For additional information, see SimpleTextField.

Last update: June 15, 2023