Object Header¶

Object Header is used in the object details floor plan. The recommended approach is to bind the Object Header together with the Top App Bar via a seamless background (no shadow in between). While the Top App Bar stays on the top, Object Header can scroll underneath the Top App Bar.

Anatomy¶

The Object Header contains one or two pages. The primary page consists of several pieces of information about the object:

Detail Image: An image helps the user to visually identify the object.
Title: The object name and title provide key information and are always required.
Subtitle: A subtitle that provides key information for the object.
Tags: A flow row contains several tags. The tags row will wrap its content if the tags exceed the maximum width of the space.
Accessory: The accessory information on the top right corner that contains a KPI and a label.
Status / Sub-status: The status and sub-status label/icon demonstrates the current status of the object. There are four types of status, each with a unique color displayed: Neutral, Positive, Critical, and Negative.
Label Items: Short text of relevant attributes. The Label Items will be displayed in one or two rows, separated by middle dot (·).
Description: A paragraph to describe the object in detail. The paragraph should only be used when it provides the user with valuable information.

The secondary page is the detail page where you can put a customized Composable UI, such as a chart or KPI diagram.

Object Header Structure for primary page on tablet and mobile:

Object Header Anatomy

Object Header Structure for detail page on tablet and mobile:

Object Header Anatomy

Example¶

Here is an example of an Object Header on a tablet. The content of the Object Header may split into multiple pages if a KPI (Key Performance Indicator) or chart is provided:

Object Header Example

Detail page:

Object Header Example

Object Header on a phone:

Object Header Phone Example

Displaying the Object Header¶

Object Header is used in the object details floor plan. The recommended approach is to bind the Object Header together with the Top App Bar via a seamless background (no shadow in between). While the Top App Bar stays on the top, the Object Header can scroll underneath the Top App Bar.

The most basic way to display the Object Header is to use the FioriObjectHeader Composable function with a FioriObjectHeaderData as the primaryPage argument:

@Composable
fun SimpleObjectHeader() {
    FioriObjectHeader(
        primaryPage = FioriObjectHeaderData(
            title = "Title",
            subtitle = "Subtitle",
            description = "This is a long description of ObjectHeader. The description would display in multiple lines."
        )
    )
}

Simple Object Header:

Simple Object Header

Detail Image¶

An image provides visual representation of the object and is highly recommended. Assign a FioriObjectHeaderImageData object to the FioriObjectHeaderData.detailImage argument to show a detail image on the Object Header. FioriObjectHeaderImageData can be created with a drawable resource ID as the resId argument:

@Composable
fun ImageObjectHeader() {
    FioriObjectHeader(
        primaryPage = FioriObjectHeaderData(
            title = "Title",
            detailImage = FioriObjectHeaderImageData(
                resId = R.drawable.ic_star_border_black_24dp
            ),
            subtitle = "Subtitle"
        )
    )
}

Object Header with detail image:

Object Header with Detail Image

Accessory¶

The accessory information on the top right corner can show a KPI and a label. This is done by using the FioriObjectHeaderData.accessoryKpi and FioriObjectHeaderData.accessoryKapiLabel arguments:

@Composable
fun ObjectHeaderAccessory() {
    FioriObjectHeader(
        primaryPage = FioriObjectHeaderData(
            title = "Title",
            subtitle = "Subtitle",
            accessoryKpi = "10,000",
            accessoryKpiLabel = "Minutes"
        )
    )
}

Object Header with Accessory KPI:

Object Header with Accessory KPI

Tags Row¶

Tags are usually system-generated and may be used to indicate categories, types, or statuses. They use a different visual representation than plain text, and function as independent bits of information. Each tag will have an individual text color. To show a tags row on an Object Header, use a list of FioriTagData as the FioriObjectHeaderData.tags argument:

@Composable
fun ObjectHeaderTags() {
    FioriObjectHeader(
        primaryPage = FioriObjectHeaderData(
            title = "Title",
            subtitle = "Subtitle",
            tags = listOf(
                FioriTagData("Tag 1"),
                FioriTagData("Tag 2", Color.Red),
                FioriTagData("Tag 3", Color.Blue),
                FioriTagData("Tag 4", SapHorizonMango6),
                FioriTagData("Tag 5", SapHorizonPink6)
            )
        )
    )
}

Object Header with Tags Row:

Object Header with Tags Row

Status¶

Up to two statuses can be displayed, with three layout options: stacked vertically (at the top corner of the screen), inline (below the tags), and mixed layout, where one status is at the top corner of the screen and the other status is inline below the tags. A status can have both an icon and a text.

If Status is displayed in the accessory area (the top right corner of the screen), the accessory KPI and accessory KPI label will be hidden.

Use FioriObjectHeaderData.status and FioriObjectHeaderData.subStatus to show status and sub status on an Object Header. Each status is a FioriObjectHeaderStatusData object. There are four semantic colors in the status and sub status. Use a FioriObjectHeaderStatusType enum as the FioriObjectHeaderStatusData.type argument to set the semantic color. The icon can be placed at the start or end of the label by using the FioriObjectHeaderStatusData.isIconAtStart argument. Use a FioriObjectHeaderStatusLayout enum as the statusLayout argument to set status layout.

The following example shows status and sub status in a stacked layout. The status has an icon at the start of the label and is in Positive semantic color. The sub status has an icon at the end of the label and is in Critical semantic color.

@Composable
fun ObjectHeaderStacked() {
    FioriObjectHeader(
        primaryPage = FioriObjectHeaderData(
            title = "Title",
            subtitle = "Subtitle",
            status = FioriObjectHeaderStatusData(
                label = "Status",
                icon = FioriObjectHeaderIconData(
                    resId = R.drawable.ic_photo_white
                ),
                type = FioriObjectHeaderStatusType.Positive,
                isIconAtStart = true
            ),
            subStatus = FioriObjectHeaderStatusData(
                label = "SubStatus",
                icon = FioriObjectHeaderIconData(
                    resId = R.drawable.ic_photo_white
                ),
                type = FioriObjectHeaderStatusType.Critical,
                isIconAtStart = false
            ),
        ),
        statusLayout = FioriObjectHeaderStatusLayout.Stacked
    )

Object Header with Stacked status and sub status:

Object Header with Stacked Status

Show status and sub status in Inline layout:

@Composable
fun ObjectHeaderInline() {
    FioriObjectHeader(
        primaryPage = FioriObjectHeaderData(
            title = "Title",
            subtitle = "Subtitle",
            status = FioriObjectHeaderStatusData(
                label = "Status",
                icon = FioriObjectHeaderIconData(
                    resId = R.drawable.ic_photo_white
                ),
                type = FioriObjectHeaderStatusType.Positive,
            ),
            subStatus = FioriObjectHeaderStatusData(
                label = "SubStatus",
                icon = FioriObjectHeaderIconData(
                    resId = R.drawable.ic_photo_white
                ),
                type = FioriObjectHeaderStatusType.Critical,
            ),
        ),
        statusLayout = FioriObjectHeaderStatusLayout.Inline
    )
}

Object Header with Inline status and sub status:

Object Header with Inline Status

Show status and sub status in Mixed layout:

@Composable
fun ObjectHeaderMixed() {
    FioriObjectHeader(
        primaryPage = FioriObjectHeaderData(
            title = "Title",
            subtitle = "Subtitle",
            status = FioriObjectHeaderStatusData(
                label = "Status",
                icon = FioriObjectHeaderIconData(
                    resId = R.drawable.ic_photo_white
                ),
                type = FioriObjectHeaderStatusType.Positive,
            ),
            subStatus = FioriObjectHeaderStatusData(
                label = "SubStatus",
                icon = FioriObjectHeaderIconData(
                    resId = R.drawable.ic_photo_white
                ),
                type = FioriObjectHeaderStatusType.Critical,
            ),
        ),
        statusLayout = FioriObjectHeaderStatusLayout.Mixed
    )
}

Object Header with Mixed status and sub status:

Object Header with Mixed Status

Label Items¶

Label Items are similar to tags in that they show a short text, however, unlike tags, Label Items are not contained in a Chip and they support a leading or trailing icon.

Label Items will be displayed in one or two rows, separated by a middle dot (·) between each other.

To show Label Items on an Object Header, use a list of FioriObjectHeaderLabelItemData as the FioriObjectHeaderData.labelItems argument:

@Composable
fun ObjectHeaderLabelItems() {
    FioriObjectHeader(
        primaryPage = FioriObjectHeaderData(
            title = "Title",
            subtitle = "Subtitle",
            labelItems = listOf(
                FioriObjectHeaderLabelItemData(
                    label = "5-Star Hotel"
                ),
                FioriObjectHeaderLabelItemData(
                    label = "4.8",
                    icon = FioriObjectHeaderIconData(
                        resId = R.drawable.ic_volume_up_black_24dp
                    ),
                    isIconAtStart = false
                ),
                FioriObjectHeaderLabelItemData(
                    label = "Subtitle"
                ),
                FioriObjectHeaderLabelItemData(
                    label = "3/28/2022",
                    icon = FioriObjectHeaderIconData(
                        resId = R.drawable.ic_volume_up_black_24dp
                    )
                )
            ),
        )
    )
}

Object Header with Label Items:

Object Header with Label Items

Detail Page¶

Object Header may contain a detail page to show additional information. The FioriObjectHeaderData.detailPage argument accepts a Composable function where you can show a customized UI, such as a chart or KPI diagram.

@Composable
fun ObjectHeaderTwoPages() {
    FioriObjectHeader(
        primaryPage = FioriObjectHeaderData(
            title = "Title",
            subtitle = "Subtitle",
            description = "This is a long description of ObjectHeader. The description would display in multiple lines."
        ),
        detailPage = {
            Text("This is detail page")
        }
    )
}

Object Header primary page:

Object Header Primary Page

Object Header detail page:

Object Header Detail Page

Style¶

The Composable FioriObjectHeader function accepts colors, textStyles, and styles arguments to customize the style of an Object Header. If you don't set these arguments, the Object Header will use the default styles from the application theme.

Use FioriObjectHeaderDefaults.colors() to create customized colors.
Use FioriObjectHeaderDefaults.textStyles() to create customized text styles.
Use FioriObjectHeaderDefaults.styles to create customized styles.

Customizing Color¶

Object Header text colors can be customized using FioriObjectHeaderDefaults.colors():

@Composable
fun ObjectHeaderColors() {
    FioriObjectHeader(
        primaryPage = FioriObjectHeaderData(
            title = "Title",
            subtitle = "Subtitle",
            accessoryKpi = "10,000",
            accessoryKpiLabel = "Minutes"
        ),
        colors = FioriObjectHeaderDefaults.colors(
            titleColor = Color.Blue,
            accessoryKpiColor = Color.Red
        )
    )
}

Customizing Object Header colors:

Customizing Object Header Colors

Customizing Text Style¶

Object Header text styles can be customized using FioriObjectHeaderDefaults.textStyles():

@Composable
fun ObjectHeaderTextStyles() {
    FioriObjectHeader(
        primaryPage = FioriObjectHeaderData(
            title = "Title",
            subtitle = "Subtitle",
            accessoryKpi = "10,000",
            accessoryKpiLabel = "Minutes"
        ),
        textStyles = FioriObjectHeaderDefaults.textStyles(
            titleTextStyle = MaterialTheme.typography.h1,
            accessoryKpiTextStyle = MaterialTheme.typography.caption
        )
    )
}

Customizing Object Header text styles:

Customizing Object Header Text Styles

Customizing Styles¶

Object Header styles can be customized using FioriObjectHeaderDefaults.styles(). The following example set the top padding of the subtitle to 0.dp, and set the status row inner spacing to 0.dp:

@Composable
fun ObjectHeaderStyles() {
    FioriObjectHeader(
        primaryPage = FioriObjectHeaderData(
            title = "Title",
            subtitle = "Subtitle",
            status = FioriObjectHeaderStatusData(
                label = "Status",
                type = FioriObjectHeaderStatusType.Positive
            ),
            subStatus = FioriObjectHeaderStatusData(
                label = "SubStatus",
                type = FioriObjectHeaderStatusType.Negative
            )
        ),
        styles = FioriObjectHeaderDefaults.styles(
            subtitleTopPadding = 0.dp,
            statusRowInnerSpacing = 0.dp
        )
    )
}

Customizing Object Header styles:

Customizing Object Header Styles

API Reference¶

See FioriObjectHeader

Last update: February 20, 2023