Fiori Page Header¶
The Fiori Page Header is a prominent user interface component located at the top of a screen. It provides an overview of the content below and concisely displays key information about the page's context or the primary object being displayed. The header is highly configurable. It supports various layouts for different information densities and use cases, including single-page displays, multi-page expanded views, and paginated content.
Anatomy¶
The Fiori Page Header is a composite component that presents content in distinct regions:
- Start Slot: This is typically used for leading elements such as avatars, icons, or primary identifiers.
- Body Slot: This area is designed for central content, such as headlines, subheadlines, or key performance indicators (KPIs). It is intelligently positioned to center its content while maintaining minimum spacing from the start and end slots.
- End Slot: This is placed at the trailing edge and is often used for actions, status indicators, or secondary information.
- Bottom Slot: An optional region below the main horizontal layout, suitable for additional actions or descriptive text that requires more vertical space. The header automatically manages spacing and layout to optimize for available screen real estate, including handling scenarios where multiple headers are displayed side-by-side (expanded view).
 |
|---|
| Page Header Anatomy |
Construction¶
The FioriPageHeaderElement is a sealed class that defines the specific type of content that can be placed within a FioriPageHeaderPartContent. It acts as a wrapper for various UI components, allowing the header to render diverse elements such as text, images, tags, or custom composables.
When constructing the content list for a FioriPageHeaderPartContent, you will utilize different subclasses or objects of FioriPageHeaderElement:
Text Elements: Such as Headline, Subheadline, and KPI, which render text with specific semantic styling.
Visual Elements: Such as Avatar and Image, used for graphical representation.
Interactive/Informational Elements: Such as Tags, Status, or Slot.
Custom Content: The Slot element lets you pass a custom Composable function. This gives you full control over rendering that specific part of the header.
By combining these elements, you define the exact structure and appearance of the Start, Body, and End regions of the header.
Set up FioriPageHeaderPartContent:
val left = FioriPageHeaderPartContent.Content(
content = listOf(
FioriPageHeaderElement.Avatar(avatarImageCons)
)
)
val body = FioriPageHeaderPartContent.Content(
content = listOf(
FioriPageHeaderElement.Headline(headLine.value),
FioriPageHeaderElement.Subheadline("Sept 29,2024"),
FioriPageHeaderElement.Tags(
listOf(
FioriTagData(text = "Not Submitted", colorAccent = TagColor.BLUE),
)
)
)
)
val right = FioriPageHeaderPartContent.Content(
content = listOf(
FioriPageHeaderElement.Slot {
Text(
modifier = Modifier.fioriSkeletonGrayedTextAnimated(true),
text = "$183.22",
style = MaterialTheme.typography.titleLarge,
color = MaterialTheme.fioriHorizonAttributes.SapFioriColorSemanticInformative
)
}
)
)
val bottom = FioriPageHeaderPartContent.Content(
content = listOf(
FioriPageHeaderElement.Description(description, splitRow = descriptionSplit.value),
)
)
Set up FioriPageHeaderData:
val fioriPageHeaderData = FioriPageHeaderData.Builder()
.setBody(body)
.setStart(left)
.setEnd(right)
.setBottom(bottom)
.build()
Usage¶
The Fiori Page Header is typically integrated using the FioriPageHeader composable. This component manages single-page displays.
Scaffold(
topBar = { /* Your App Bar */ },
content = { innerPadding ->
Column(modifier = Modifier.padding(innerPadding)) {
FioriPageHeader(
fioriPageHeaderData = fioriPageHeaderData
)
// Rest of your screen content
}
}
)
Multi-Page¶
When pagerData.pages.size is greater than one and the page type is PagerType.EXPAND, the headers display in a row. Each header takes an equal share of the available width. This layout is suitable for comparing multiple, compact headers.
@Composable
fun MyExpandedPagerScreen() {
val page1Data = FioriPageHeaderData( /* ... content for Page 1 ... */ )
val page2Data = FioriPageHeaderData( /* ... content for Page 2 ... */ )
Scaffold(
content = { innerPadding ->
Column(modifier = Modifier.padding(innerPadding)) {
FioriPageHeaderPager(
pagerData = FioriPageHeaderPagerData(
pages = listOf(page1Data, page2Data),
pageType = PagerType.EXPAND
)
)
// Rest of your screen content
}
}
)
}
When pagerData.pages.size is greater than one and the page type is PagerType.NAVI, headers display in a horizontally scrollable pager with an indicator.
@Composable
fun MyPaginatedPagerScreen() {
val page1Data = FioriPageHeaderData( /* ... content for Page 1 ... */ )
val page2Data = FioriPageHeaderData( /* ... content for Page 2 ... */ )
val page3Data = FioriPageHeaderData( /* ... content for Page 3 ... */ )
Scaffold(
content = { innerPadding ->
Column(modifier = Modifier.padding(innerPadding)) {
FioriPageHeaderPager(
pagerData = FioriPageHeaderPagerData(
pages = listOf(page1Data, page2Data, page3Data),
pageType = PagerType.NAVI
)
)
// Rest of your screen content
}
}
)
}