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 flow rows, separated by a 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 Structure for detail page on tablet and mobile:

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:

Detail page:

Object Header on a phone:

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:

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:

Detail Image

An image provides visual representation of the object and is highly recommended. Assign a FioriAvatarData object to the FioriObjectHeaderData.detailImage argument to show a detail image on the Object Header. FioriAvatarData can be created by assigning a FioriImage object to the image argument:

FioriObjectHeader(
    primaryPage = FioriObjectHeaderData(
        title = "Title",
        detailImage = FioriAvatarData(
            image = FioriImage(
                resId = R.drawable.ic_star_border_black_24dp
            )
        ),
        subtitle = "Subtitle"
    )
)

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:

FioriObjectHeader(
    primaryPage = FioriObjectHeaderData(
        title = "Title",
        subtitle = "Subtitle",
        accessoryKpi = "10,000",
        accessoryKpiLabel = "Minutes"
    )
)

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. By default, only a maximum of three tags are shown.

The following example creates an object header with five tags, but only a maximum of three tags are shown.

FioriObjectHeader(
    primaryPage = FioriObjectHeaderData(
        title = "Title",
        subtitle = "Subtitle",
        tags = listOf(
            FioriTagData("Tag 1"),
            FioriTagData("Tag 2", TagColor.RED),
            FioriTagData("Tag 3", TagColor.BLUE),
            FioriTagData("Tag 4", TagColor.MANGO),
            FioriTagData("Tag 5", TagColor.PINK)
        )
    )
)

Object Header with a maximum of three tags:

Use the maxTagNum argument to change the maximum number of tags:

FioriObjectHeader(
    primaryPage = FioriObjectHeaderData(
        title = "Title",
        subtitle = "Subtitle",
        tags = listOf(
            FioriTagData("Tag 1"),
            FioriTagData("Tag 2", TagColor.RED),
            FioriTagData("Tag 3", TagColor.BLUE),
            FioriTagData("Tag 4", TagColor.MANGO),
            FioriTagData("Tag 5", TagColor.PINK)
        )
    ),
    maxTagNum = Int.MAX_VALUE
)

Object Header without a maximum tag number limitation:

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.

FioriObjectHeader(
    primaryPage = FioriObjectHeaderData(
        title = "Title",
        subtitle = "Subtitle",
        status = FioriObjectHeaderStatusData(
            label = "Complete",
            icon = FioriIcon(
                resId = R.drawable.ic_sap_icon_accept
            ),
            type = FioriObjectHeaderStatusType.Positive,
            isIconAtStart = true
        ),
        subStatus = FioriObjectHeaderStatusData(
            label = "High",
            icon = FioriIcon(
                resId = R.drawable.ic_sap_icon_message_warning
            ),
            type = FioriObjectHeaderStatusType.Critical,
            isIconAtStart = false
        ),
    ),
    statusLayout = FioriObjectHeaderStatusLayout.Stacked
)

Object Header with Stacked status and sub status:

Show status and sub status in Inline layout:

FioriObjectHeader(
    primaryPage = FioriObjectHeaderData(
        title = "Title",
        subtitle = "Subtitle",
        status = FioriObjectHeaderStatusData(
            label = "Complete",
            icon = FioriIcon(
                resId = R.drawable.ic_sap_icon_accept
            ),
            type = FioriObjectHeaderStatusType.Positive,
            isIconAtStart = true
        ),
        subStatus = FioriObjectHeaderStatusData(
            label = "High",
            icon = FioriIcon(
                resId = R.drawable.ic_sap_icon_message_warning
            ),
            type = FioriObjectHeaderStatusType.Critical,
            isIconAtStart = false
        ),
    ),
    statusLayout = FioriObjectHeaderStatusLayout.Inline
)

Object Header with Inline status and sub status:

Show status and sub status in Mixed layout:

FioriObjectHeader(
    primaryPage = FioriObjectHeaderData(
        title = "Title",
        subtitle = "Subtitle",
        status = FioriObjectHeaderStatusData(
            label = "Complete",
            icon = FioriIcon(
                resId = R.drawable.ic_sap_icon_accept
            ),
            type = FioriObjectHeaderStatusType.Positive,
            isIconAtStart = true
        ),
        subStatus = FioriObjectHeaderStatusData(
            label = "High",
            icon = FioriIcon(
                resId = R.drawable.ic_sap_icon_message_warning
            ),
            type = FioriObjectHeaderStatusType.Critical,
            isIconAtStart = false
        ),
    ),
    statusLayout = FioriObjectHeaderStatusLayout.Mixed
)

Object Header with Mixed status and sub 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 flow rows, separated by a middle dot (·) in between.

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

FioriObjectHeader(
    primaryPage = FioriObjectHeaderData(
        title = "Title",
        subtitle = "Subtitle",
        labelItems = listOf(
            FioriObjectHeaderLabelItemData(
                label = "5-Star Hotel"
            ),
            FioriObjectHeaderLabelItemData(
                label = "Asset",
                icon = FioriIcon(
                    resId = R.drawable.ic_sap_icon_machine
                ),
                isIconAtStart = false
            ),
            FioriObjectHeaderLabelItemData(
                label = "3/2/2022"
            ),
            FioriObjectHeaderLabelItemData(
                label = "Functional Location",
                icon = FioriIcon(
                    resId = R.drawable.ic_sap_icon_building
                )
            )
        )
    )
)

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. Users can swipe left or right to navigate between the primary page and detail page.

FioriObjectHeader(
    primaryPage = FioriObjectHeaderData(
        title = "Title",
        subtitle = "Subtitle",
        description = "This is a long description of ObjectHeader. The description would display in multiple lines."
    ),
    detailPage = {
        Column(
            horizontalAlignment = Alignment.Start,
            modifier = Modifier.fillMaxWidth()
                .padding(bottom = 16.dp)
        ) {
            Text(
                text = "50°F",
                style = MaterialTheme.fioriHorizonAttributes.textAppearanceHeadlineLarge
            )
            Text(
                text = "-01.0% of target",
                style = MaterialTheme.fioriHorizonAttributes.textAppearanceBody2
            )
        }
    }
)

Object Header primary page:

Object Header detail page:

Entire Example

Here is an entire example of Object Header that contains all of the information on the primary page.

FioriObjectHeader(
    primaryPage = FioriObjectHeaderData(
        title = "Temperature",
        detailImage = FioriAvatarData(
            image = FioriImage(
                resId = R.drawable.ic_sap_icon_temperature,
                contentDescription = "Detail image"
            )
        ),
        subtitle = "Needs attention",
        tags = listOf(
            FioriTagData("Started"),
            FioriTagData("PM02", TagColor.TEAL),
            FioriTagData("103-Repair", TagColor.GRAY)
        ),
        accessoryKpi = "50°F",
        accessoryKpiLabel = "-01.0% of target",
        status = FioriObjectHeaderStatusData(
            label = "High",
            icon = FioriIcon(
                resId = R.drawable.ic_sap_icon_message_warning,
                contentDescription = "Negative status",
            ),
            type = FioriObjectHeaderStatusType.Negative,
            isIconAtStart = false
        ),
        subStatus = FioriObjectHeaderStatusData(
            label = "Complete",
            icon = FioriIcon(
                resId = R.drawable.ic_sap_icon_accept,
                contentDescription = "Critical status",
            ),
            type = FioriObjectHeaderStatusType.Critical,
            isIconAtStart = false
        ),
        labelItems = listOf(
            FioriObjectHeaderLabelItemData(
                label = "Asset",
                icon = FioriIcon(
                    resId = R.drawable.ic_sap_icon_machine
                )
            ),
            FioriObjectHeaderLabelItemData(
                label = "Functional Location",
                icon = FioriIcon(
                    resId = R.drawable.ic_sap_icon_building
                )
            )
        ),
        description = "3481 Main Street, Anytown SD 57401, USA"
    )
)

Object Header Entire Example:

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():

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 Text Style

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

FioriObjectHeader(
    primaryPage = FioriObjectHeaderData(
        title = "Title",
        subtitle = "Subtitle",
        accessoryKpi = "10,000",
        accessoryKpiLabel = "Minutes"
    ),
    textStyles = FioriObjectHeaderDefaults.textStyles(
        titleTextStyle = MaterialTheme.typography.headlineLarge,
        accessoryKpiTextStyle = MaterialTheme.typography.labelSmall
    )
)

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:

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:

API Reference

See FioriObjectHeader

---

Last update: June 15, 2023