Use the object page floorplan if:

• Users need to display, create, or edit an object.
• Users need to get an overview of an object and interact with different parts of the object.
• You need to structure your content into different sections.
• You have a page with one section and editable header content.

Dynamic Page Header (mandatory)

The dynamic page header contains key information about the object and provides the user with the necessary context. The header initially expands in display mode. It also contains global actions for the object, such as Edit or Delete.

The header consists of the following elements:

1. Breadcrumbs (optional)
2. Title (mandatory)
3. Subtitle (optional)
4. Header content (optional)
5. Object marker (optional)
6. Header toolbar with global actions (optional)
7. Visual indicator for header features (mandatory if the header can be collapsed and expanded)

Form Facet (Dataset)

You can use the form facet to display datasets.

A form facet consists of:

1. Title (optional)
2. Label-text pair (no more than 5 in a group)

• The labels can be invisible, but need to have a text for accessibility purposes.
• The labels can be icons, but need to have a text for accessibility purposes.
• Each text can hold a link.

Plain Text Facet

You can use the plain text facet to display a continuous text in the header.

A plain text facet consists of:

1. Title (optional)
2. Text

You can have links inline in the continuous text. They can navigate to another page or open a quick view. The text can contain more than one link, with different actions.

The default width of the facet is 320 px. The width of the facet doesn’t adapt to its content, but when the headline is broader than the facet width, the header wraps. You can also set a specific width to make optimal use of the given space.

Image Facet

You can use the image facet to show a picture of the object or a user profile. The header can have either one image facet or no image facet. The position of the image facet is fixed to the left. The image can have a press event. The default press event enlarges the image. When the header collapses, the image facet moves to the left of the title and becomes smaller.

Key Value Facet

You can use the key value facet to highlight important data or KPIs.

A key value facet contains:

1. Title (mandatory)
2. Text or number in a larger font size

If the key value facet is used with a text, such as a status, you can also display an icon to the right of the text. This icon must only be used as a visual cue for the text it relates to, and not to add more information.

Micro Chart Facet

A micro chart facet consists of:

1. Title (mandatory)
2. Subtitle (optional)
3. Micro chart (mandatory)
4. Footer text (optional)

To display the unit used in the micro chart, use the footer.

The following micro charts can be used in the micro chart facet:

• Bullet chart
• Column chart
• Trend chart
• Comparison chart
• Delta chart
• Harvey ball chart
• Radial chart

The micro chart facet can have a click event on the chart itself. This can lead to a page with a bigger chart or open a quick view, for example.

For more information, see Micro Charts.

Progress Indicator Facet

A progress indicator facet consists of:

1. Title (mandatory)
2. Subtitle (optional)
3. Progress indicator
4. Footer text (optional)

For more information, see Progress Indicator.

Rating Indicator Facet

You can use the rating indicator facet to display a single rating value or an aggregated rating (such as an average rating for a product). The facet structure is slightly different in each case.

Single rating value:

The single rating consists of:

1. Title (mandatory)
2. Subtitle (optional): Displays supplementary texts
3. Rating indicator

Navigation Bar

You can only have several sections in the object page layout and there are two ways to structure it:

• Anchor bar navigation (default)
• Tab bar navigation

Anchor Bar Navigation

The anchor bar is the default navigation control for the object page. It consists of a series of anchor links, which are arranged horizontally at the top of the page. The anchors represent sections or subsections of the page. Clicking a link makes the screen scroll to the corresponding section of the page and the anchor bar remains visible.

Use tab bar navigation if your page covers different topics that each have complex content, such as long tables or lists.

1. Active anchor
2. Inactive anchor
3. Subsection dropdown
4. Subsection
5. Subsection dropdown indicator
6. Overflow carousel button
7. Overflow menu button
8. Overflow menu dropdown
9. Section (hover) in overflow menu
10. Section in overflow menu
11. Subsection in overflow menu

Overflow

If there are more anchors than the screen can accommodate, the remaining anchors move into an overflow menu. The overflow button on the right of the navigation bar () opens a hierarchical dropdown list of all sections and subsections. When the user scrolls down the page, the anchor links scroll horizontally to ensure that the active anchor is always visible.

You might also see a small right arrow on the anchor bar. This arrow allows you to scroll horizontally to reveal any hidden content, and only appears when you hover over the overflow menu. In the meantime, this arrow has been replaced by the overflow menu button, but is still supported technically for legacy reasons.

Responsiveness

On small screens, the anchor bar becomes a dropdown list. The text field of the dropdown list shows the section currently selected. Clicking the dropdown menu opens a hierarchical list with all the sections and subsections of the page.

Behavior and Interaction

Tab Bar Navigation

As an alternative to the anchor bar, you can also use the tab bar for navigation. The tab bar works in a similar way to the icon tab bar, but is not the same control. The tab bar navigation for the object page is a variant of the anchor bar, and is handled by the object page floorplan.

The tabs are a series of links arranged horizontally at the top of the page which link to subpages. Clicking a link displays the corresponding subpage below and the tabs remain visible.

Use tab bar navigation if your page covers different topics that each have complex content, such as long tables or lists.

1. Anchor/tab bar navigation
2. First section
3. Second section

If you set the tab bar property (useIconTabBar = “true”), the navigation bar displays tabs instead of anchors. The object page only supports text-only tabs; icon tabs and icon/text tabs are not available. The object page sections and subsections are reflected in the tab navigation: sections of the object page become the tabs, and subsections become the internal content of the tab. The tabs can have an item counter, which is displayed in parentheses next to the title of the tab.

On small screens, the tab bar uses the same horizontal carousel overflow pattern as the icon tab bar. This differs from the dropdown approach used for the anchor bar.

If the content of a section contains a control, for example a table, then we recommend to always display it, even if the control title and tab title are identical. This makes it easier for the user to orientate themselves.

Subnavigation

To make it easier to reach specific content on a long tab page, tabs can have subnavigation. Subnavigation is optional, but the default state is set to “true” and a dropdown arrow is shown next to the tab. Clicking on the dropdown arrow displays a dropdown menu with the subsection anchors for that tab. Applications can decide which tabs are enabled for anchor subnavigation by setting their property to “true”.

Tables

When a section or subsection contains one table and no other content, remove the redundant table title so the section or subsection title serves as the table title. In the subsection, also reduce the vertical space.

Grid tables in sections must have at least 4 rows, and the maximum number of rows visible will depend on the window size. To prevent any need for the user to scroll to access the horizontal scrollbar, keep the table within the screen size limitations. This may not be possible in all use cases, for example, if the table contains a large data volume, then you must use two scrollbars.

In an object page with anchor bars, use no more than 4 grid tables to prevent cognitive overload. (Consider using different sections between multiple tables to ease the burden, except for table comparison use cases.) To include more than 4 grid tables, place them in individual tabs.

To embed analytical tables or tree tables in an object page, use an object page with tabs and place each table in its own tab. If you are using a scrollable object page without tabs, use responsive or grid tables instead, and offer navigation to another page with the respective table type.

Depending on the number of table items, use one of the following loading behaviors:

If a table is expected to have more than 20 items, use one of the 3 options below for long tables.

For all three options, we recommend providing a search, and if feasible, sort and filtering for the table in the object page. Avoid grouping.

1. Lazy Loading Behavior (“More” button)

If you expect up to 100 items, use the More button of the responsive table. The initial number of items shown depends on the height of the rows. We recommend initially showing 10 items, but not more than 20. If there is more than one table in the object page, only use this option for tables with up to 50 expected items.

2. Tab Navigation

If you expect to have more than 50 to 100 items, but fewer than 200, using the object page with tab navigation instead of anchor navigation also solves the problems associated with long tables. To enable the scroll-to-load behavior, the table must be the only or last element within a tab.

3. Navigation to Another Page

For tables with more than 200 items, or when the tab approach is unsuitable, restrict the size of the table in the object page to a reasonable number of items. We recommend showing a preview of only 10 items, but not more than 20. This can be achieved using predefined filters and/or by sorting the table. If necessary, you can also set a fixed number of items (such as the top 10). To enable the user to work with the entire table, offer navigation to a separate page, such as a list report, subobject page, or dynamic page with the respective table type. To do this, place a right-aligned link below the table with the label Show All (x), where x represents the total number of items in the table.

Representation of Child Pages

In object pages with drilldown navigation, child pages are represented in two ways:

• Breadcrumbs: A breadcrumb is displayed above the object title. Limit the breadcrumb to the drilldown levels within the object page.
• Paging buttons: Up and down arrows in the layout action area allow the user to navigate between subitems without going back to the original list.

Footer Toolbar

The footer toolbar is used for closing and finalizing actions in:

• Edit and create mode, for example, Save, Post, Accept, Reject, and Activate
• Display mode, for example, Approve, Accept, and Reject 

Editing header content in Global Edit mode

Because the header snaps on scroll, there are no editable forms in the header itself, so if you’re dealing with editable header content, a temporary “Header” section is generated above all the other sections of the page where the header content can be edited. The same principle applies if your object page only has one section and there is editable content in the header, except a temporary navigation bar should be generated as well. Any changes made to the header are not reflected until the user saves them.

When there is editable content in the header, the title bar information and all editable fields from the header container move from the header to the temporary “Header” section and non-editable content displays as read-only. You can leave out header content that doesn’t make sense in edit mode (for example, aggregated values that are calculated from several sources, KPIs, or micro charts). If only a few fields in the header are editable, and they match an existing section, they are moved to that section. In this case, no editable header section appears. The header container in edit mode can also contain independent facets that are not included in the header content in display mode which provide information to assist editing.

Please note, the temporary “Header” section for editing header content doesn’t come out of the box for freestyle applications – it needs to be implemented manually, so it’s sometimes better to avoid having editable header content and move it into object page sections instead.

Editing header content in Partial Edit mode

The user can edit the header content separately by pressing the Edit Header button.

If there are only a few elements to edit, the partial edit triggers a dialog.

If there are too many elements to fit in a dialog, the partial edit triggers a subpage. The subpage contains all editable information from the header. However, it differs from the “Header” section in global edit mode in that it has no action buttons in the toolbar, no navigation, and no breadcrumbs.

Create and Edit Subobjects

The following options are available for creating or editing subobjects:

• Navigation to a subobject page
• Inline create or inline edit in a table
• Dialog containing the fields of the object

To enable users to create subobjects inline, offer an Add or Create button on the table toolbar. Clicking the button creates a row at the top of the table. Pressing Ctrl+Enter has the same effect.

If the subobject has less than 8 fields, use a dialog or the inline create/edit option (no separate page for the subobject). Exceptions can apply if additional content for the subobject is available but not part of the edit process, or if other apps need to offer deep links to the subobject page.

Edit Actions in Display Mode (freestyle apps only)

The standard flow is to switch to edit mode for edit and delete actions. However, in some cases, it can be helpful to offer certain edit actions in display mode as well.

You can offer edit actions in display mode if:

• Switching to edit mode would inconvenience the user. This is especially true if the change is small and quick, and switching to edit mode would take longer than making the change.
• The change does not impact a critical flow or result in technical inconsistencies.

Examples: Adding a comment, uploading a file

Do not offer edit actions in display mode if:

• The change has a critical impact on business data/follow-on processes.
• The change requires a finalizing action.

Example: Deleting a sales order item would affect the entire sales order and dependent data.

When offering delete actions in display mode, always show a delete confirmation dialog. For more information, see:

• Delete Objects – Object Page
• Delete Objects – Top Tips

Unsaved Changes

If draft handling has been implemented, documents are automatically saved as draft versions in the background. An editing icon to the right of the object title indicates that a draft version exists. In other words, either the current user or another user has made changes, but not yet actively saved the document (“unsaved changes”). Do not show the editing icon for unsaved changes if draft handling is not supported.

Selecting the editing icon invokes a popover with more information about the unsaved changes. This normally states:

• Who made the changes
• When the last changes were made

The popover closes when the user clicks outside the popover or clicks the  (Close) icon.

The default layout for size L (desktop) contains three columns. If you want to display two content elements that require an equal amount of space, you can also use an optional two-column layout (for example, two tables next to each other). Do not use the two-column layout with forms.

The layout for size M (tablet) contains two columns.

The layout for size S (smartphone) contains one column.

Use the object page floorplan if:

• Users need to display, create, or edit an object.
• Users need to get an overview of an object and interact with different parts of the object.
• You need to structure your content into different sections.
• You have a page with one section and editable header content.

Dynamic Page Header (mandatory)

The dynamic page header contains key information about the object and provides the user with the necessary context. The header initially expands in display mode. It also contains global actions for the object, such as Edit or Delete.

The header consists of the following elements:

1. Breadcrumbs (optional)
2. Title (mandatory)
3. Subtitle (optional)
4. Header content (optional)
5. Object marker (optional)
6. Header toolbar with global actions (optional)
7. Visual indicator for header features (mandatory if the header can be collapsed and expanded)

Form Facet (Dataset)

You can use the form facet to display datasets.

A form facet consists of:

1. Title (optional)
2. Label-text pair (no more than 5 in a group)

• The labels can be invisible, but need to have a text for accessibility purposes.
• The labels can be icons, but need to have a text for accessibility purposes.
• Each text can hold a link.

Plain Text Facet

You can use the plain text facet to display a continuous text in the header.

A plain text facet consists of:

1. Title (optional)
2. Text

You can have links inline in the continuous text. They can navigate to another page or open a quick view. The text can contain more than one link, with different actions.

The default width of the facet is 320 px. The width of the facet doesn’t adapt to its content, but when the headline is broader than the facet width, the header wraps. You can also set a specific width to make optimal use of the given space.

Image Facet

You can use the image facet to show a picture of the object or a user profile. The header can have either one image facet or no image facet. The position of the image facet is fixed to the left. The image can have a press event. The default press event enlarges the image. When the header collapses, the image facet moves to the left of the title and becomes smaller.

Key Value Facet

You can use the key value facet to highlight important data or KPIs.

A key value facet contains:

1. Title (mandatory)
2. Text or number in a larger font size

If the key value facet is used with a text, such as a status, you can also display an icon to the right of the text. This icon must only be used as a visual cue for the text it relates to, and not to add more information.

Micro Chart Facet

A micro chart facet consists of:

1. Title (mandatory)
2. Subtitle (optional)
3. Micro chart (mandatory)
4. Footer text (optional)

To display the unit used in the micro chart, use the footer.

The following micro charts can be used in the micro chart facet:

• Bullet chart
• Column chart
• Trend chart
• Comparison chart
• Delta chart
• Harvey ball chart
• Radial chart

The micro chart facet can have a click event on the chart itself. This can lead to a page with a bigger chart or open a quick view, for example.

For more information, see Micro Charts.

Progress Indicator Facet

A progress indicator facet consists of:

1. Title (mandatory)
2. Subtitle (optional)
3. Progress indicator
4. Footer text (optional)

For more information, see Progress Indicator.

Rating Indicator Facet

You can use the rating indicator facet to display a single rating value or an aggregated rating (such as an average rating for a product). The facet structure is slightly different in each case.

Single rating value:

The single rating consists of:

1. Title (mandatory)
2. Subtitle (optional): Displays supplementary texts
3. Rating indicator

Navigation Bar

You can only have several sections in the object page layout and there are two ways to structure it:

• Anchor bar navigation (default)
• Tab bar navigation

Anchor Bar Navigation

The anchor bar is the default navigation control for the object page. It consists of a series of anchor links, which are arranged horizontally at the top of the page. The anchors represent sections or subsections of the page. Clicking a link makes the screen scroll to the corresponding section of the page and the anchor bar remains visible.

Use tab bar navigation if your page covers different topics that each have complex content, such as long tables or lists.

1. Active anchor
2. Inactive anchor
3. Subsection dropdown
4. Subsection
5. Subsection dropdown indicator
6. Overflow carousel button
7. Overflow menu button
8. Overflow menu dropdown
9. Section (hover) in overflow menu
10. Section in overflow menu
11. Subsection in overflow menu

Overflow

If there are more anchors than the screen can accommodate, the remaining anchors move into an overflow menu. The overflow button on the right of the navigation bar () opens a hierarchical dropdown list of all sections and subsections. When the user scrolls down the page, the anchor links scroll horizontally to ensure that the active anchor is always visible.

You might also see a small right arrow on the anchor bar. This arrow allows you to scroll horizontally to reveal any hidden content, and only appears when you hover over the overflow menu. In the meantime, this arrow has been replaced by the overflow menu button, but is still supported technically for legacy reasons.

Responsiveness

On small screens, the anchor bar becomes a dropdown list. The text field of the dropdown list shows the section currently selected. Clicking the dropdown menu opens a hierarchical list with all the sections and subsections of the page.

Behavior and Interaction

Tab Bar Navigation

As an alternative to the anchor bar, you can also use the tab bar for navigation. The tab bar works in a similar way to the icon tab bar, but is not the same control. The tab bar navigation for the object page is a variant of the anchor bar, and is handled by the object page floorplan.

The tabs are a series of links arranged horizontally at the top of the page which link to subpages. Clicking a link displays the corresponding subpage below and the tabs remain visible.

Use tab bar navigation if your page covers different topics that each have complex content, such as long tables or lists.

1. Anchor/tab bar navigation
2. First section
3. Second section

If you set the tab bar property (useIconTabBar = “true”), the navigation bar displays tabs instead of anchors. The object page only supports text-only tabs; icon tabs and icon/text tabs are not available. The object page sections and subsections are reflected in the tab navigation: sections of the object page become the tabs, and subsections become the internal content of the tab. The tabs can have an item counter, which is displayed in parentheses next to the title of the tab.

On small screens, the tab bar uses the same horizontal carousel overflow pattern as the icon tab bar. This differs from the dropdown approach used for the anchor bar.

If the content of a section contains a control, for example a table, then we recommend to always display it, even if the control title and tab title are identical. This makes it easier for the user to orientate themselves.

Subnavigation

To make it easier to reach specific content on a long tab page, tabs can have subnavigation. Subnavigation is optional, but the default state is set to “true” and a dropdown arrow is shown next to the tab. Clicking on the dropdown arrow displays a dropdown menu with the subsection anchors for that tab. Applications can decide which tabs are enabled for anchor subnavigation by setting their property to “true”.

Tables

When a section or subsection contains one table and no other content, remove the redundant table title so the section or subsection title serves as the table title. In the subsection, also reduce the vertical space.

Grid tables in sections must have at least 4 rows, and the maximum number of rows visible will depend on the window size. To prevent any need for the user to scroll to access the horizontal scrollbar, keep the table within the screen size limitations. This may not be possible in all use cases, for example, if the table contains a large data volume, then you must use two scrollbars.

In an object page with anchor bars, use no more than 4 grid tables to prevent cognitive overload. (Consider using different sections between multiple tables to ease the burden, except for table comparison use cases.) To include more than 4 grid tables, place them in individual tabs.

To embed analytical tables or tree tables in an object page, use an object page with tabs and place each table in its own tab. If you are using a scrollable object page without tabs, use responsive or grid tables instead, and offer navigation to another page with the respective table type.

Depending on the number of table items, use one of the following loading behaviors:

If a table is expected to have more than 20 items, use one of the 3 options below for long tables.

For all three options, we recommend providing a search, and if feasible, sort and filtering for the table in the object page. Avoid grouping.

1. Lazy Loading Behavior (“More” button)

If you expect up to 100 items, use the More button of the responsive table. The initial number of items shown depends on the height of the rows. We recommend initially showing 10 items, but not more than 20. If there is more than one table in the object page, only use this option for tables with up to 50 expected items.

2. Tab Navigation

If you expect to have more than 50 to 100 items, but fewer than 200, using the object page with tab navigation instead of anchor navigation also solves the problems associated with long tables. To enable the scroll-to-load behavior, the table must be the only or last element within a tab.

3. Navigation to Another Page

For tables with more than 200 items, or when the tab approach is unsuitable, restrict the size of the table in the object page to a reasonable number of items. We recommend showing a preview of only 10 items, but not more than 20. This can be achieved using predefined filters and/or by sorting the table. If necessary, you can also set a fixed number of items (such as the top 10). To enable the user to work with the entire table, offer navigation to a separate page, such as a list report, subobject page, or dynamic page with the respective table type. To do this, place a right-aligned link below the table with the label Show All (x), where x represents the total number of items in the table.

Representation of Child Pages

In object pages with drilldown navigation, child pages are represented in two ways:

• Breadcrumbs: A breadcrumb is displayed above the object title. Limit the breadcrumb to the drilldown levels within the object page.
• Paging buttons: Up and down arrows in the layout action area allow the user to navigate between subitems without going back to the original list.

Footer Toolbar

The footer toolbar is used for closing and finalizing actions in:

• Edit and create mode, for example, Save, Post, Accept, Reject, and Activate
• Display mode, for example, Approve, Accept, and Reject 

Editing header content in Global Edit mode

Because the header snaps on scroll, there are no editable forms in the header itself, so if you’re dealing with editable header content, a temporary “Header” section is generated above all the other sections of the page where the header content can be edited. The same principle applies if your object page only has one section and there is editable content in the header, except a temporary navigation bar should be generated as well. Any changes made to the header are not reflected until the user saves them.

When there is editable content in the header, the title bar information and all editable fields from the header container move from the header to the temporary “Header” section and non-editable content displays as read-only. You can leave out header content that doesn’t make sense in edit mode (for example, aggregated values that are calculated from several sources, KPIs, or micro charts). If only a few fields in the header are editable, and they match an existing section, they are moved to that section. In this case, no editable header section appears. The header container in edit mode can also contain independent facets that are not included in the header content in display mode which provide information to assist editing.

Please note, the temporary “Header” section for editing header content doesn’t come out of the box for freestyle applications – it needs to be implemented manually, so it’s sometimes better to avoid having editable header content and move it into object page sections instead.

Editing header content in Partial Edit mode

The user can edit the header content separately by pressing the Edit Header button.

If there are only a few elements to edit, the partial edit triggers a dialog.

If there are too many elements to fit in a dialog, the partial edit triggers a subpage. The subpage contains all editable information from the header. However, it differs from the “Header” section in global edit mode in that it has no action buttons in the toolbar, no navigation, and no breadcrumbs.

Create and Edit Subobjects

The following options are available for creating or editing subobjects:

• Navigation to a subobject page
• Inline create or inline edit in a table
• Dialog containing the fields of the object

To enable users to create subobjects inline, offer an Add or Create button on the table toolbar. Clicking the button creates a row at the top of the table. Pressing Ctrl+Enter has the same effect.

If the subobject has less than 8 fields, use a dialog or the inline create/edit option (no separate page for the subobject). Exceptions can apply if additional content for the subobject is available but not part of the edit process, or if other apps need to offer deep links to the subobject page.

Edit Actions in Display Mode (freestyle apps only)

The standard flow is to switch to edit mode for edit and delete actions. However, in some cases, it can be helpful to offer certain edit actions in display mode as well.

You can offer edit actions in display mode if:

• Switching to edit mode would inconvenience the user. This is especially true if the change is small and quick, and switching to edit mode would take longer than making the change.
• The change does not impact a critical flow or result in technical inconsistencies.

Examples: Adding a comment, uploading a file

Do not offer edit actions in display mode if:

• The change has a critical impact on business data/follow-on processes.
• The change requires a finalizing action.

Example: Deleting a sales order item would affect the entire sales order and dependent data.

When offering delete actions in display mode, always show a delete confirmation dialog. For more information, see:

• Delete Objects – Object Page
• Delete Objects – Top Tips

Unsaved Changes

If draft handling has been implemented, documents are automatically saved as draft versions in the background. An editing icon to the right of the object title indicates that a draft version exists. In other words, either the current user or another user has made changes, but not yet actively saved the document (“unsaved changes”). Do not show the editing icon for unsaved changes if draft handling is not supported.

Selecting the editing icon invokes a popover with more information about the unsaved changes. This normally states:

• Who made the changes
• When the last changes were made

The popover closes when the user clicks outside the popover or clicks the  (Close) icon.

The default layout for size L (desktop) contains three columns. If you want to display two content elements that require an equal amount of space, you can also use an optional two-column layout (for example, two tables next to each other). Do not use the two-column layout with forms.

The layout for size M (tablet) contains two columns.

The layout for size S (smartphone) contains one column.

Use the object page floorplan if:

• Users need to display, create, or edit an object.
• Users need to get an overview of an object and interact with different parts of the object.
• You need to structure your content into different sections.
• You have a page with one section and editable header content.

Dynamic Page Header (mandatory)

The dynamic page header contains key information about the object and provides the user with the necessary context. The header initially expands in display mode. It also contains global actions for the object, such as Edit or Delete.

The header consists of the following elements:

1. Breadcrumbs (optional)
2. Title (mandatory)
3. Subtitle (optional)
4. Header content (optional)
5. Object marker (optional)
6. Header toolbar with global actions (optional)
7. Visual indicator for header features (mandatory if the header can be collapsed and expanded)

Form Facet (Dataset)

You can use the form facet to display datasets.

A form facet consists of:

1. Title (optional)
2. Label-text pair (no more than 5 in a group)

• The labels can be invisible, but need to have a text for accessibility purposes.
• The labels can be icons, but need to have a text for accessibility purposes.
• Each text can hold a link.

Plain Text Facet

You can use the plain text facet to display a continuous text in the header.

A plain text facet consists of:

1. Title (optional)
2. Text

You can have links inline in the continuous text. They can navigate to another page or open a quick view. The text can contain more than one link, with different actions.

The default width of the facet is 320 px. The width of the facet doesn’t adapt to its content, but when the headline is broader than the facet width, the header wraps. You can also set a specific width to make optimal use of the given space.

Image Facet

You can use the image facet to show a picture of the object or a user profile. The header can have either one image facet or no image facet. The position of the image facet is fixed to the left. The image can have a press event. The default press event enlarges the image. When the header collapses, the image facet moves to the left of the title and becomes smaller.

Key Value Facet

You can use the key value facet to highlight important data or KPIs.

A key value facet contains:

1. Title (mandatory)
2. Text or number in a larger font size

If the key value facet is used with a text, such as a status, you can also display an icon to the right of the text. This icon must only be used as a visual cue for the text it relates to, and not to add more information.

Micro Chart Facet

A micro chart facet consists of:

1. Title (mandatory)
2. Subtitle (optional)
3. Micro chart (mandatory)
4. Footer text (optional)

To display the unit used in the micro chart, use the footer.

The following micro charts can be used in the micro chart facet:

• Bullet chart
• Column chart
• Trend chart
• Comparison chart
• Delta chart
• Harvey ball chart
• Radial chart

The micro chart facet can have a click event on the chart itself. This can lead to a page with a bigger chart or open a quick view, for example.

For more information, see Micro Charts.

Progress Indicator Facet

A progress indicator facet consists of:

1. Title (mandatory)
2. Subtitle (optional)
3. Progress indicator
4. Footer text (optional)

For more information, see Progress Indicator.

Rating Indicator Facet

You can use the rating indicator facet to display a single rating value or an aggregated rating (such as an average rating for a product). The facet structure is slightly different in each case.

Single rating value:

The single rating consists of:

1. Title (mandatory)
2. Subtitle (optional): Displays supplementary texts
3. Rating indicator

Navigation Bar

You can only have several sections in the object page layout and there are two ways to structure it:

• Anchor bar navigation (default)
• Tab bar navigation

Anchor Bar Navigation

The anchor bar is the default navigation control for the object page. It consists of a series of anchor links, which are arranged horizontally at the top of the page. The anchors represent sections or subsections of the page. Clicking a link makes the screen scroll to the corresponding section of the page and the anchor bar remains visible.

Use tab bar navigation if your page covers different topics that each have complex content, such as long tables or lists.

1. Active anchor
2. Inactive anchor
3. Subsection dropdown
4. Subsection
5. Subsection dropdown indicator
6. Overflow carousel button
7. Overflow menu button
8. Overflow menu dropdown
9. Section (hover) in overflow menu
10. Section in overflow menu
11. Subsection in overflow menu

Overflow

If there are more anchors than the screen can accommodate, the remaining anchors move into an overflow menu. The overflow button on the right of the navigation bar () opens a hierarchical dropdown list of all sections and subsections. When the user scrolls down the page, the anchor links scroll horizontally to ensure that the active anchor is always visible.

You might also see a small right arrow on the anchor bar. This arrow allows you to scroll horizontally to reveal any hidden content, and only appears when you hover over the overflow menu. In the meantime, this arrow has been replaced by the overflow menu button, but is still supported technically for legacy reasons.

Responsiveness

On small screens, the anchor bar becomes a dropdown list. The text field of the dropdown list shows the section currently selected. Clicking the dropdown menu opens a hierarchical list with all the sections and subsections of the page.

Behavior and Interaction

Tab Bar Navigation

As an alternative to the anchor bar, you can also use the tab bar for navigation. The tab bar works in a similar way to the icon tab bar, but is not the same control. The tab bar navigation for the object page is a variant of the anchor bar, and is handled by the object page floorplan.

The tabs are a series of links arranged horizontally at the top of the page which link to subpages. Clicking a link displays the corresponding subpage below and the tabs remain visible.

Use tab bar navigation if your page covers different topics that each have complex content, such as long tables or lists.

1. Anchor/tab bar navigation
2. First section
3. Second section

If you set the tab bar property (useIconTabBar = “true”), the navigation bar displays tabs instead of anchors. The object page only supports text-only tabs; icon tabs and icon/text tabs are not available. The object page sections and subsections are reflected in the tab navigation: sections of the object page become the tabs, and subsections become the internal content of the tab. The tabs can have an item counter, which is displayed in parentheses next to the title of the tab.

On small screens, the tab bar uses the same horizontal carousel overflow pattern as the icon tab bar. This differs from the dropdown approach used for the anchor bar.

If the content of a section contains a control, for example a table, then we recommend to always display it, even if the control title and tab title are identical. This makes it easier for the user to orientate themselves.

Subnavigation

To make it easier to reach specific content on a long tab page, tabs can have subnavigation. Subnavigation is optional, but the default state is set to “true” and a dropdown arrow is shown next to the tab. Clicking on the dropdown arrow displays a dropdown menu with the subsection anchors for that tab. Applications can decide which tabs are enabled for anchor subnavigation by setting their property to “true”.

Tables

If a section contains only one table and no other content, remove the table title to avoid having duplicate titles for the table. In this case, the section title acts as the table title.

If a subsection contains only one table and no other content, hide the title of the subsection to avoid having duplicate titles for the table and reduce vertical space. In this case, the table title acts as the subsection title.

If you want to embed analytical tables, grid tables, or tree tables in an object page, use an object page with tabs, and place each table in its own tab. Because the analytical, grid, and tree tables have their own vertical scroll bars, they are not allowed within scrollable object pages. If you are using a scrollable object page without tabs, use a responsive table instead, and offer navigation to another page with the respective table type.

Depending on the number of table items, use one of the following loading behaviors:

If a table is expected to have more than 20 items, use one of the 3 options below for long tables.

For all three options, we recommend providing a search, and if feasible, sort and filtering for the table in the object page. Avoid grouping.

1. Lazy Loading Behavior (“More” button)

If you expect up to 100 items, use the More button of the responsive table. The initial number of items shown depends on the height of the rows. We recommend initially showing 10 items, but not more than 20. If there is more than one table in the object page, only use this option for tables with up to 50 expected items.

2. Tab Navigation

If you expect to have more than 50 to 100 items, but fewer than 200, using the object page with tab navigation instead of anchor navigation also solves the problems associated with long tables. To enable the scroll-to-load behavior, the table must be the only or last element within a tab.

3. Navigation to Another Page

For tables with more than 200 items, or when the tab approach is unsuitable, restrict the size of the table in the object page to a reasonable number of items. We recommend showing a preview of only 10 items, but not more than 20. This can be achieved using predefined filters and/or by sorting the table. If necessary, you can also set a fixed number of items (such as the top 10). To enable the user to work with the entire table, offer navigation to a separate page, such as a list report, subobject page, or dynamic page with the respective table type. To do this, place a right-aligned link below the table with the label Show All (x), where x represents the total number of items in the table.

Representation of Child Pages

In object pages with drilldown navigation, child pages are represented in two ways:

• Breadcrumbs: A breadcrumb is displayed above the object title. Limit the breadcrumb to the drilldown levels within the object page.
• Paging buttons: Up and down arrows in the layout action area allow the user to navigate between subitems without going back to the original list.

Footer Toolbar

The footer toolbar is used for closing and finalizing actions in:

• Edit and create mode, for example, Save, Post, Accept, Reject, and Activate
• Display mode, for example, Approve, Accept, and Reject 

Editing header content in Global Edit mode

Because the header snaps on scroll, there are no editable forms in the header itself, so if you’re dealing with editable header content, a temporary “Header” section is generated above all the other sections of the page where the header content can be edited. The same principle applies if your object page only has one section and there is editable content in the header, except a temporary navigation bar should be generated as well. Any changes made to the header are not reflected until the user saves them.

When there is editable content in the header, the title bar information and all editable fields from the header container move from the header to the temporary “Header” section and non-editable content displays as read-only. You can leave out header content that doesn’t make sense in edit mode (for example, aggregated values that are calculated from several sources, KPIs, or micro charts). If only a few fields in the header are editable, and they match an existing section, they are moved to that section. In this case, no editable header section appears. The header container in edit mode can also contain independent facets that are not included in the header content in display mode which provide information to assist editing.

Please note, the temporary “Header” section for editing header content doesn’t come out of the box for freestyle applications – it needs to be implemented manually, so it’s sometimes better to avoid having editable header content and move it into object page sections instead.

Editing header content in Partial Edit mode

The user can edit the header content separately by pressing the Edit Header button.

If there are only a few elements to edit, the partial edit triggers a dialog.

If there are too many elements to fit in a dialog, the partial edit triggers a subpage. The subpage contains all editable information from the header. However, it differs from the “Header” section in global edit mode in that it has no action buttons in the toolbar, no navigation, and no breadcrumbs.

Create and Edit Subobjects

The following options are available for creating or editing subobjects:

• Navigation to a subobject page
• Inline create or inline edit in a table
• Dialog containing the fields of the object

To enable users to create subobjects inline, offer an Add or Create button on the table toolbar. Clicking the button creates a row at the top of the table. Pressing Ctrl+Enter has the same effect.

If the subobject has less than 8 fields, use a dialog or the inline create/edit option (no separate page for the subobject). Exceptions can apply if additional content for the subobject is available but not part of the edit process, or if other apps need to offer deep links to the subobject page.

Edit Actions in Display Mode (freestyle apps only)

The standard flow is to switch to edit mode for edit and delete actions. However, in some cases, it can be helpful to offer certain edit actions in display mode as well.

You can offer edit actions in display mode if:

• Switching to edit mode would inconvenience the user. This is especially true if the change is small and quick, and switching to edit mode would take longer than making the change.
• The change does not impact a critical flow or result in technical inconsistencies.

Examples: Adding a comment, uploading a file

Do not offer edit actions in display mode if:

• The change has a critical impact on business data/follow-on processes.
• The change requires a finalizing action.

Example: Deleting a sales order item would affect the entire sales order and dependent data.

When offering delete actions in display mode, always show a delete confirmation dialog. For more information, see:

• Delete Objects – Object Page
• Delete Objects – Top Tips

Unsaved Changes

If draft handling has been implemented, documents are automatically saved as draft versions in the background. An editing icon to the right of the object title indicates that a draft version exists. In other words, either the current user or another user has made changes, but not yet actively saved the document (“unsaved changes”). Do not show the editing icon for unsaved changes if draft handling is not supported.

Selecting the editing icon invokes a popover with more information about the unsaved changes. This normally states:

• Who made the changes
• When the last changes were made

The popover closes when the user clicks outside the popover or clicks the  (Close) icon.

The default layout for size L (desktop) contains three columns. If you want to display two content elements that require an equal amount of space, you can also use an optional two-column layout (for example, two tables next to each other). Do not use the two-column layout with forms.

The layout for size M (tablet) contains two columns.

The layout for size S (smartphone) contains one column.

Use the object page floorplan if:

• Users need to display, create, or edit an object.
• Users need to get an overview of an object and interact with different parts of the object.

Dynamic Page Header (mandatory)

The dynamic page header contains key information about the object and provides the user with the necessary context. The header initially expands in display mode. It also contains global actions for the object, such as Edit or Delete.

The header consists of the following elements:

1. Breadcrumbs (optional)
2. Title (mandatory)
3. Subtitle (optional)
4. Header content (optional)
5. Object marker (optional)
6. Header toolbar with global actions (optional)
7. Visual indicator for header features (mandatory if the header can be collapsed and expanded)

Form Facet (Dataset)

You can use the form facet to display datasets.

A form facet consists of:

1. Title (optional)
2. Label-text pair (no more than 5 in a group)

• The labels can be invisible, but need to have a text for accessibility purposes.
• The labels can be icons, but need to have a text for accessibility purposes.
• Each text can hold a link.

Plain Text Facet

You can use the plain text facet to display a continuous text in the header.

A plain text facet consists of:

1. Title (optional)
2. Text

You can have links inline in the continuous text. They can navigate to another page or open a quick view. The text can contain more than one link, with different actions.

The default width of the facet is 320 px. The width of the facet doesn’t adapt to its content, but when the headline is broader than the facet width, the header wraps. You can also set a specific width to make optimal use of the given space.

Image Facet

You can use the image facet to show a picture of the object or a user profile. The header can have either one image facet or no image facet. The position of the image facet is fixed to the left. The image can have a press event. The default press event enlarges the image. When the header collapses, the image facet moves to the left of the title and becomes smaller.

Key Value Facet

You can use the key value facet to highlight important data or KPIs.

A key value facet contains:

1. Title (mandatory)
2. Text or number in a larger font size

If the key value facet is used with a text, such as a status, you can also display an icon to the right of the text. This icon must only be used as a visual cue for the text it relates to, and not to add more information.

Micro Chart Facet

A micro chart facet consists of:

1. Title (mandatory)
2. Subtitle (optional)
3. Micro chart (mandatory)
4. Footer text (optional)

To display the unit used in the micro chart, use the footer.

The following micro charts can be used in the micro chart facet:

• Bullet chart
• Column chart
• Trend chart
• Comparison chart
• Delta chart
• Harvey ball chart
• Radial chart

The micro chart facet can have a click event on the chart itself. This can lead to a page with a bigger chart or open a quick view, for example.

For more information, see Micro Charts.

Progress Indicator Facet

A progress indicator facet consists of:

1. Title (mandatory)
2. Subtitle (optional)
3. Progress indicator
4. Footer text (optional)

For more information, see Progress Indicator.

Rating Indicator Facet

You can use the rating indicator facet to display a single rating value or an aggregated rating (such as an average rating for a product). The facet structure is slightly different in each case.

Single rating value:

The single rating consists of:

1. Title (mandatory)
2. Subtitle (optional): Displays supplementary texts
3. Rating indicator

Navigation Bar (optional)

If your content can be shown in just one section, use the dynamic page layout. In the dynamic page layout with one section, the header area can’t be edited when the page is in edit mode.

If you need to structure your content in different sections, use the object page layout. You can only have several sections in the object page layout. When you use the object page layout, you can also make the header editable when the page is in edit mode. However, try to avoid having an editable header and move the content from the header to the sections instead.

If you need only one section, but require an editable header, use the object page layout. An object page with only one section doesn’t have any anchor bars. However, a temporary anchor bar and section for editing the header content should be added when edit mode is triggered.

If the content is complex there are two ways to structure it:

• Anchor bar navigation (default)
• Tab bar navigation

Anchor Bar Navigation

The anchor bar consists of a series of links, which are arranged horizontally at the top of the page. The anchors represent sections or subsections of the page. Clicking a link navigates to the respective section. The anchor bar remains visible when the user scrolls down the page.

Use anchor bar navigation when the content belongs together but users might want to jump to specific parts directly.

For more information, see Anchor Bar Navigation.

Tab Bar Navigation

The tabs are a series of links to subpages, arranged horizontally at the top of the page. Clicking a link navigates to the respective subpage. The tabs remain visible when the user scrolls down the page.

Use tab bar navigation if your page covers different topics that each have complex content, such as long tables or lists.

For more information, see Tab Bar Navigation.

Anchor Bar Navigation

The anchor bar is the default navigation control for the object page. It consists of a series of anchor links, which are arranged horizontally at the top of the page. The anchors represent sections or subsections of the page. Clicking on these links directs the user to specific sections of the page. The anchor links remain visible when the user scrolls down the page.

1. Active anchor
2. Inactive anchor
3. Subsection dropdown
4. Subsection
5. Subsection dropdown indicator
6. Overflow carousel button
7. Overflow menu button
8. Overflow menu dropdown
9. Section (hover) in overflow menu
10. Section in overflow menu
11. Subsection in overflow menu

Overflow

If there are more anchors than the screen can accommodate, the remaining anchors move into an overflow menu. The overflow button on the right of the navigation bar () opens a hierarchical dropdown list of all sections and subsections. When the user scrolls down the page, the anchor links scroll horizontally to ensure that the active anchor is always visible.

You might also see a small right arrow on the anchor bar. This arrow allows you to scroll horizontally to reveal any hidden content, and only appears when you hover over the overflow menu. In the meantime, this arrow has been replaced by the overflow menu button, but is still supported technically for legacy reasons.

Responsiveness

On small screens, the anchor bar becomes a dropdown list. The text field of the dropdown list shows the section currently selected. Clicking the dropdown menu opens a hierarchical list with all the sections and subsections of the page.

Behavior and Interaction

Tab Bar Navigation

As an alternative to the anchor bar, you can also use the tab bar for navigation. The tab bar works in a similar way to the icon tab bar, but is not the same control. The tab bar navigation for the object page is a variant of the anchor bar, and is handled by the object page layout control.

1. Anchor/tab bar navigation
2. First section
3. Second section

If you set the tab bar property (useIconTabBar = “true”), the navigation bar displays tabs instead of anchors. The object page only supports text-only tabs; icon tabs and icon/text tabs are not available. The object page sections and subsections are reflected in the tab navigation: sections of the object page become the tabs, and subsections become the internal content of the tab. The tabs can have an item counter, which is displayed in parentheses next to the title of the tab.

On small screens, the tab bar uses the same horizontal carousel overflow pattern as the icon tab bar. This differs from the dropdown approach used for the anchor bar.

If the content of a section contains a control, for example a table, then we recommend to always display it, even if the control title and tab title are identical. This makes it easier for the user to orientate themselves.

Subnavigation

To make it easier to reach specific content on a long tab page, tabs can have subnavigation. Subnavigation is optional, but the default state is set to “true” and a dropdown arrow is shown next to the tab. Clicking on the dropdown arrow displays a dropdown menu with the subsection anchors for that tab. Applications can decide which tabs are enabled for anchor subnavigation by setting their property to “true”.

Tables

If a section contains only one table and no other content, remove the table title to avoid having duplicate titles for the table. In this case, the section title acts as the table title.

If a subsection contains only one table and no other content, hide the title of the subsection to avoid having duplicate titles for the table and reduce vertical space. In this case, the table title acts as the subsection title.

If you want to embed analytical tables, grid tables, or tree tables in an object page, use an object page with tabs, and place each table in its own tab. Because the analytical, grid, and tree tables have their own vertical scroll bars, they are not allowed within scrollable object pages. If you are using a scrollable object page without tabs, use a responsive table instead, and offer navigation to another page with the respective table type.

Depending on the number of table items, use one of the following loading behaviors:

If a table is expected to have more than 20 items, use one of the 3 options below for long tables.

For all three options, we recommend providing a search, and if feasible, sort and filtering for the table in the object page. Avoid grouping.

1. Lazy Loading Behavior (“More” button)

If you expect up to 100 items, use the More button of the responsive table. The initial number of items shown depends on the height of the rows. We recommend initially showing 10 items, but not more than 20. If there is more than one table in the object page, only use this option for tables with up to 50 expected items.

2. Tab Navigation

If you expect to have more than 50 to 100 items, but fewer than 200, using the object page with tab navigation instead of anchor navigation also solves the problems associated with long tables. To enable the scroll-to-load behavior, the table must be the only or last element within a tab.

3. Navigation to Another Page

For tables with more than 200 items, or when the tab approach is unsuitable, restrict the size of the table in the object page to a reasonable number of items. We recommend showing a preview of only 10 items, but not more than 20. This can be achieved using predefined filters and/or by sorting the table. If necessary, you can also set a fixed number of items (such as the top 10). To enable the user to work with the entire table, offer navigation to a separate page, such as a list report, subobject page, or dynamic page with the respective table type. To do this, place a right-aligned link below the table with the label Show All (x), where x represents the total number of items in the table.

Representation of Child Pages

In object pages with drilldown navigation, child pages are represented in two ways:

• Breadcrumbs: A breadcrumb is displayed above the object title. Limit the breadcrumb to the drilldown levels within the object page.
• Paging buttons: Up and down arrows in the layout action area allow the user to navigate between subitems without going back to the original list.

Footer Toolbar

The footer toolbar is used for closing and finalizing actions in:

• Edit and create mode, for example, Save, Post, Accept, Reject, and Activate
• Display mode, for example, Approve, Accept, and Reject 

Editing the Header

The object page header can be edited in two ways:

• Global edit
• Partial edit

Global Edit

The header can be edited when the entire object page is in edit mode.

Because the header snaps on scroll, there are no editable forms in the header itself. Instead, a temporary header section is added before the other sections of the page. The title bar information and all editable fields from the header container move from the header to the new editable header section. Any non-editable content displays as read-only in the new header section. You can leave out header content that doesn’t make sense in edit mode (for example, aggregated values that are calculated from several sources, KPIs, or micro charts).

If only a few fields in the header are editable, and they match an existing section, they are moved to that section. In this case, no editable header section appears.

If your object page has no anchor bar in display mode, and the header section has only a few editable fields, do not add navigation in edit mode.

The header container in edit mode may contain independent facets that are not included in the header content in display mode. They provide information to assist editing.

If the entire object page is in edit mode, but there is no editable information in the header, no editable header section is added.

Any changes made to the header are not reflected until the user saves them.

Partial Edit

The user can edit the header content separately by pressing the Edit Header button.

If there are only a few elements to edit, the partial edit triggers a dialog.

If there are too many elements to fit in a dialog, the partial edit triggers a subpage. The subpage contains all editable information from the header. However, it differs from the “Header” section in global edit mode in that it has no action buttons in the toolbar, no navigation, and no breadcrumbs.

Create and Edit Subobjects

The following options are available for creating or editing subobjects:

• Navigation to a subobject page
• Inline create or inline edit in a table
• Dialog containing the fields of the object

To enable users to create subobjects inline, offer an Add or Create button on the table toolbar. Clicking the button creates a row at the top of the table. Pressing Ctrl+Enter has the same effect.

If the subobject has less than 8 fields, use a dialog or the inline create/edit option (no separate page for the subobject). Exceptions can apply if additional content for the subobject is available but not part of the edit process, or if other apps need to offer deep links to the subobject page.

Edit Actions in Display Mode (freestyle apps only)

The standard flow is to switch to edit mode for edit and delete actions. However, in some cases, it can be helpful to offer certain edit actions in display mode as well.

You can offer edit actions in display mode if:

• Switching to edit mode would inconvenience the user. This is especially true if the change is small and quick, and switching to edit mode would take longer than making the change.
• The change does not impact a critical flow or result in technical inconsistencies.

Examples: Adding a comment, uploading a file

Do not offer edit actions in display mode if:

• The change has a critical impact on business data/follow-on processes.
• The change requires a finalizing action.

Example: Deleting a sales order item would affect the entire sales order and dependent data.

When offering delete actions in display mode, always show a delete confirmation dialog. For more information, see:

• Delete Objects – Object Page
• Delete Objects – Top Tips

Unsaved Changes

If draft handling has been implemented, documents are automatically saved as draft versions in the background. An editing icon to the right of the object title indicates that a draft version exists. In other words, either the current user or another user has made changes, but not yet actively saved the document (“unsaved changes”). Do not show the editing icon for unsaved changes if draft handling is not supported.

Selecting the editing icon invokes a popover with more information about the unsaved changes. This normally states:

• Who made the changes
• When the last changes were made

The popover closes when the user clicks outside the popover or clicks the  (Close) icon.

The default layout for size L (desktop) contains three columns. If you want to display two content elements that require an equal amount of space, you can also use an optional two-column layout (for example, two tables next to each other). Do not use the two-column layout with forms.

The layout for size M (tablet) contains two columns.

The layout for size S (smartphone) contains one column.

The worklist floorplan is based on the dynamic page layout and is divided into a header and the page content. The header has a header title, but no header content. As a result, the expand/collapse and pin features are not needed.

The worklist consists of the following areas:

1. The header title containing:
   • 1a – A variant or a title for the whole page (mandatory)
   • 1b – One or more key performance indicators (KPI) (optional)
   • 1c – The header toolbar with global actions (mandatory)
2. The content area displaying:
   • 2a – The tab bar (optional)
   • 2b – A table (mandatory)
3.  A footer toolbar (optional) including:
   • 3a – The message popover
   • 3b – Finalizing actions

Variant Management

Variant management is optional. If used, apply it to the whole page. Use the variants to save and restore all settings, including selected tabs, all tables, and all personalization settings.

If variant management is not needed, just show a title that describes the view.

Key performance indicator/ KPI

The key performance indicator (KPI) allows users to track the impact of their actions while processing the worklist. You can display one or more KPIs within the KPI container next to the page title to show the status/criticality of the tag.

Header Toolbar (Global Actions)

Use the header toolbar for global actions, such as Share. Do not place actions that finalize the current process (“finalizing actions”) on the header toolbar of the header title, even if they affect the entire page.

For more information, see Global Actions.

Tab Bar

The tab bar is part of the page content container, and must be sticky.

In the worklist, the icon tab bar works as a filter on the content below. It enables users to call up work items in specific categories. This can help users to identify critical items more easily. Different tabs show different perspectives on the same dataset.

Table Toolbar

Display at least a table title (ideally with an item count) and, if needed, icon-only buttons for sorting, grouping, and column settings. For filter, sort, and group, show a view settings dialog with only the corresponding features enabled. For column settings, show the table personalization dialog. If you need more extensive functionality (for example, grouping or sorting on several levels, tables with more than 20 columns), use the P13n-Dialog with just the corresponding feature enabled.

Table

In general, you can use any kind of table and list for the worklist floorplan in the content area.

If there are no items to display, use the “no data text” for the corresponding table. Explain why the table is empty, and what the user needs to do to display items. For more information and examples see: “No data” texts.

The most basic version of the worklist is the simple worklist: a plain page with a table.

Behavior and Interaction

Initial Focus

When the worklist is loaded, set the initial focus as follows:

• If the worklist contains only a table, set the focus on the first line item of the table.
• If the worklist contains an icon tab bar, set the focus on the first tab.

Sticky Behavior

The tab bar, table toolbar, and column headers must all be “sticky”. This means that they stay fixed at the top when the user scrolls down the page. 

Table Navigation

The worklist floorplan supports three types of navigation at item level:

• Line item navigation: If applicable, allow navigation to a detail view (usually an object page) at line item level. Show a navigation indicator (chevron icon) for each line item that provides a detail view. In a list, tree, or responsive table, clicking the line item triggers the navigation. In a grid table, analytical table, or tree table, clicking the navigation indicator triggers the navigation. Another option is to use a link as the identifier for the line item. This link triggers the navigation. Use it only if the navigation indicator points to a different target.

• Drilldown navigation: If a line item contains aggregated data, allow navigation to a view that contains details for the aggregated amount. This is usually a list report. Use a link to display the aggregated amount. If the table contains many columns with links, use the link options to provide different levels of highlighting. In charts, offer the drilldown navigation link in the popover for the chart element, and navigate to the corresponding list report to show the details.

• Cross navigation: If a line item contains a cross-reference to another entity, such as a person or business object, use a link to display the corresponding data point in the table. Triggering the link opens a quick view.

Actions

The worklist offers four locations for actions:

1. Global actions in the header toolbar
2. Table actions in the table toolbar
3. Line item actions
4. Finalizing actions in the footer toolbar

1. Global Actions

Place actions that affect the entire page in the header title within the header toolbar. Examples of global actions are Edit, Delete, or Share.
Actions in the header toolbar are always right-aligned. Emphasize the most important action and place it on the very left.

For more information, see Header Toolbar.

2. Table Actions

Place actions that affect the content of a table in the table toolbar.

When to Enable, Disable, or Hide Actions

Indicate whether an action is available. Some actions are always available, such as Create for new objects. Other actions are only relevant if items have been selected. For example, Edit at item level, Remove, object-specific actions, or actions that change the status of an item.

Enable the following actions:

• All Add/Create actions, unless the user needs to specify where in the table the new item should be added.
• Edit actions that switch the entire table to edit mode (independent of the selected items).
  If the user triggers the Edit button, replace it with Save and Cancel buttons (see Editing the Whole Table).
• Item-dependent actions that can be applied to some or all of the selected items.

Disable the following actions:

• Item-dependent actions (such as Delete) when no items or only unsuitable items have been selected .
• Add/Create actions where the user needs to specify the insert position in the table, but either no item has been selected, or more than one item has been selected.

For more information, see UI Element States – Control States.

Partial Processing

Allow the user to apply the changes to as many of the selected items as possible.

If an action can’t be applied to all selected items, show a warning message before executing the action:

• Indicate the number of selected items that can’t be processed (out of the total number of selected items).
• Give a reason why the action can’t be applied to these items.
• Let the user choose whether to apply the action to the remaining items anyway or cancel the action.

See an example here.

Note: In some scenarios, you might not be able to identify whether an action can be applied to all selected items before executing it. If the system is unable to apply the action to all items, show a message after executing the action.

Sort, Group, Personalization

Decide if you need to provide sorting, grouping or personalization for your use case. If you offer more than one of these actions, offer them as single actions. We recommend keeping them in the following order: Sort, Group, Personalization.

For more information on table and chart actions, see:

• Table Toolbar
• Chart Toolbar
• Object Handling (Create, Edit, Delete)

3. Line Item Actions

In rare cases, actions that affect a single item can be placed directly inside the line item. Use this option only for specific, frequently-used tasks. If the same action can also be applied to several items at once, you can also place it on the table toolbar. However, if you do so, reconsider whether you really need to offer the action at line item level. For more information, see Actions in Table Rows.

Examples of line item actions include: Start/Stop (a batch job), Approve (an item) or Assign (an item).

Do not disable line item actions. If an action can’t be used, hide it.

4. Finalizing Actions

Place actions that trigger the end of a process and affect the entire page in the footer toolbar. Examples of finalizing actions include Save, Cancel, and Submit.

Bear in mind that even if you are using the icon tab bar, there is only one footer toolbar for all tabs.

The Grid table, analytical table, and tree table are supported on desktop and tablet devices only so you cannot use them for mobile use cases. Instead, for these cases, take an adaptive approach:

• Create a new Fiori application with reduced complexity, not an exact match of the desktop application.
• With the new application, address the most important use cases for users in a mobile context. The responsive controls (responsive table, list or tree,) or a relevant control for your use case (for example a chart or the category navigation pattern) may suffice.

For more details, see the respective guideline articles.

• The dynamic page header (1) contains the header title (2) and the expandable/collapsible header content (5).
  • The header title (2) is part of the header area and should display a title or variant (3) for the whole page (mandatory), filter information (if the header is collapsed), and a header toolbar (4) with global actions, such as Share (optional).
  • The header content (5) is used to display the filter bar or the smart filter bar (mandatory).
  • The header features (6) allow users to expand/collapse the header (6a) (mandatory) and pin/unpin the header area (6b).
• The content area (7) is used to display:
  • A table/chart title, textual icon tab bar, or select (8) (optional)
  • One table/chart toolbar (9) per tab
  • One or multiple tables and/or charts (10). You can use any kind of table. If you use a chart, you can display the chart on its own (without a table) or as an additional view for an existing table (switchable).
• The footer toolbar (11): If needed, use a footer toolbar to display the messaging button and finalizing actions.

Variant management is optional. If you use variants, we recommend using one variant management control for the whole page. Use the variants to save and restore all settings for filters, selected tabs, all tables, and all charts.

In some specific cases, you might need to add a second variant at control level. This can be the case when the user needs to change the view settings of a list independently of the page filters. However, the default is to use a single variant management control for the entire page.

Users can choose a default variant, which is selected every time the app is started.

Allow users to choose whether a variant should be executed automatically as soon as it has been selected. Not executing a variant automatically allows the user to add or remove filters before the dataset is updated. Provide this option only if the filter bar is in manual update mode. For live updates, this option is not required.

If variant management is not needed, show a title that describes the current view instead.

Filter Information

Display the filter information only if the header content is collapsed. Use the format Filtered By (x): followed by a comma-separated list of the filters currently applied. “x” stands for the number of applied filters.

Show up to 5 filters. If more filters have been applied, show an ellipsis (“…”) at the end of the string.

If no filters have been applied, show Not filtered.

Header Toolbar

Use the header toolbar for non-finalizing global actions, such as Share. Share opens an action sheet, which features Save as Tile (if the SAP Fiori launchpad is available), Send Email, and Share in SAP Jam (if SAP Jam is available). Show the Share button only if it makes sense for your application.

If the content area contains a grid table, an analytical table, a tree table, or any other content with its own scrollbar, display a Show Filters / Hide Filters button for expanding and collapsing the header content.

In addition, offer any other global, non-finalizing actions needed. Hide actions that cannot be used at all (for example, because of access rights). To save space on the header toolbar, group similar actions using a menu button.
For more information on global actions, see the guidelines for the header toolbar.

Header Content

Search

The filter bar can contain a search field (optional). If you use the search field, the content shows only items that match both the search terms and the filter criteria.

The search generally searches across all available columns of the table, regardless of whether or not they are visible. In rare cases, some columns might not be included due to technical constraints. If the search does not apply to multiple columns, do not offer the search field.

Filters

Filters are applied to all content, including all tables and charts. To improve performance, consider providing mandatory filter fields and/or default settings for filters.

If the list report loads automatically when the page loads, ensure that mandatory filter fields always have default values to avoid error messages.

The filter bar offers two different update modes:

• The live update mode (recommended) triggers filtering immediately whenever a filter setting is changed. If the search field is used, the search is triggered together with all filter settings with every letter typed.
• The manual update mode displays a Go button, which triggers the filtering. If the search field is used, the search is executed together with all filters as soon as the Go button is pressed.
  Make sure that all tables and charts in the content area are in a busy state until the new data is available. Also ensure that the content is grayed out as soon as the filter settings do not correspond to the content shown (any table, property: showOverlay). This is usually the case if the content is not yet updated and the Go button needs to be triggered.

Use the manual update mode only if you run into performance problems while loading the table data.

Regardless of the update mode, make sure that the filter bar and the visible content match: The filter bar must always describe the items that are shown in the content area.

The header content collapses when the user scrolls down the page (except for desktop-centric tables), and expands again when the user scrolls back up (“snap on scroll”). Users can pin the header content to keep it visible. For more information, see Dynamic Page – Expand/Collapse Header.

Exception: The “Snap on scroll” and “pin header” features are not provided if the main content area contains desktop-centric tables (grid tables, analytical tables, tree tables) or any other content with its own scrollbar. In these cases, users need to expand and collapse the header content manually using the Show Filters / Hide Filters button.

When starting the application, expand the header content if no query was fired (and the table is therefore empty). Otherwise, collapse the header content.

Simple Content

In most cases, the content consists of just a table toolbar and a table. If needed, provide an option to switch between the table and a corresponding chart view.

Multiple Views

For more complex scenarios, provide multiple views of the same content. Multiple views involve one or more of the following:

• Showing the same table, but with different columns.
• Showing the same table in different pre-filtered states. These states are usually based on a status column, for example, items that are Open, In Process, or Closed. Make sure that the corresponding filter is not offered on the filter bar.
• Differentiating between the items displayed in the content in some other fundamental way.

There are two options for switching between different views:

The first option is to replace the table title with a content switch. Use this approach if all views share the same sort and group states, as well as the same actions.

The content switch can be:

• A segmented button for up to three views
• A select control for more than three views, or if the number of views changes dynamically

If you have both a table title and a content switch, display the table title first, then the content switch. Place both on the left side of the table toolbar. Since the content switch is placed on the table toolbar, the same actions are shown for all views.

If you are using the content switch together with charts, ensure that the chart also reacts to the content switch. This can be done by:

• Filtering the data that influences the display of the chart
• Changing the measures and/or dimensions (for example, View by Country/Region, View by Customer, …)

The second option for switching views is to show each view in a tab container of the icon tab bar. Use this approach if all views show different states of the same data (sort states, group states, as well as item selection). Using tabs also allows you to offer different actions on the table toolbar for each view.

Multiple Content

To support even more complex use cases, a list report floorplan can also contain multiple tables that display different kinds of objects. The filter bar settings are applied to all of these tables in parallel. For example, a customer overview list report might display different tables for invoices, deliveries, and overdue payments. All of these tables can be filtered for a specific customer and a specific date.

Display each table inside a tab container of an icon tab bar. This also allows you to offer different actions on the table toolbar for each table.

Icon Tab Bar

Use the text-only version of the icon tab bar. Display the number of items shown in the respective table on each tab (sap.m.IconTabFilter, property: count).

Table Toolbar

Display at least a table title (ideally with an item count) and icon-only buttons for sorting, grouping, and column settings. Do not offer additional filter settings on the table toolbar. For sort and group, show a view settings dialog with just the corresponding features enabled. For column settings, show the table personalization dialog. If you need more extensive functionality (for example, grouping or sorting on several levels, tables with more than 20 columns), use the P13n-Dialog with just the corresponding feature enabled.

If alternative visualizations are provided (such as charts), offer an additional view switch on the table toolbar. Triggering the switch replaces the current visualization with another one. If a table and chart need to be shown in parallel, offer a switch for the combined view.

In rare cases, you can offer an additional layout variant on the table toolbar. The layout variant stores view settings like the column order and the sort and group settings. If you use a layout variant, do not store the table settings in the filter variant. Offer this additional layout variant only if there is a strong use case for switching filter and layout variants independently. If there is no strong use case, or you are unsure, do not use a layout variant at all.

In addition, offer any other actions needed. Disable selection-dependent actions (such as Delete) if no items are selected, or if the action cannot be applied to the selected items. Always enable selection-independent actions (such as Add). To save space on the table toolbar, group similar actions using a menu button. For example:

• Release and Release with Conditions
• Add Contact and Replace Contact
• Edit Account and Edit Title

For more information on table/chart actions, see the guidelines for the table toolbar, the chart toolbar, and for managing objects.

Table

If there are no items to display, use the “no data” text of the corresponding table. Explain why the table is empty, and what the user needs to do to display items.

Examples:

• After starting the app, no filters are applied:
  To start, set the relevant filters.
• The filter was executed, but no items were found. This can also happen if the list report was opened by a related app, and the filter criteria were transferred automatically:
  No data found. Try adjusting the filter settings.

If you are using a responsive table, always enable “scroll to load” behavior.

Sticky Behavior

The icon tab bar, table/chart toolbar, and column headers of all table types must be “sticky”. This means that they stay fixed on top when the user scrolls down the page.

Navigation

There are three types of navigation at item level in the list report floorplan:

• Line item navigation: If applicable, allow navigation to a detail view (usually an object page) at line item level. Show a navigation indicator (chevron icon) for each line item that provides a detail view. In a list, tree, or responsive table, clicking the line item triggers the navigation.
  In a grid table, analytical table, or tree table, clicking the navigation indicator triggers the navigation.
  Another option is to use a link as the identifier for the line item. This link triggers the navigation. Use this only if the navigation indicator is being used for a different target.
  Only show navigation indicators for target pages the user is authorized to access.
• Drilldown navigation: If a line item contains aggregated data, allow navigation to a view that contains details for the aggregated amount. This is usually another list report. In this case, use a link to display the aggregated amount. If the table contains many columns with links, use the link options to provide different levels of highlighting.
  In charts, offer the drilldown navigation link in the popover for the chart element. In this case, also navigate to the corresponding list report to show the details.
• Cross navigation: If a line item contains cross-references to other entities, such as people or business objects, use a link to display the corresponding data point in the table. Triggering the link opens a quick view. Typically, the quick view displays basic details of the referenced object and a navigation link to another page (usually an object page) or another app that shows the object details.

Footer Toolbar

Use the footer toolbar to display the messaging button and finalizing actions. Only use the footer toolbar if finalizing actions for the whole page and/or the message popover are available.

Always show the footer toolbar in edit mode.

Hide actions that cannot be used at all (for example, if the user doesn’t have authorization). To save space on the footer toolbar, group similar actions using a menu button.

For more information on finalizing actions, see the guidelines for the footer toolbar.

1. Global Actions

Place actions that affect the entire page in the header toolbar in the header title (1). These include the following standard actions:

• Show Filters / Hide Filters: This button expands and collapses the header content. Show this button only if the list report contains a grid table, analytical table, or tree table.
• Share: This button opens an action sheet that contains actions like Save as Tile (if the SAP Fiori Launchpad is available), Send Email, and Share in SAP Jam (if SAP Jam is available). Show the Share button only if it makes sense for your application.

Hide actions that cannot be used at all (for example, because the user has no authorization). To save space on the header toolbar, group similar actions using a menu button.

Do not place actions that finalize the current process (“finalizing actions”) on the header toolbar of the header title, even if they affect the entire page.

For more information on global actions, see the guidelines for the header toolbar.

2. Table/Chart Actions

Place actions that affect the content of a table or chart in the table toolbar (2).

If you are using an icon tab bar, be aware that each tab contains its own table toolbar.

When to Enable, Disable, or Hide Actions

Indicate whether an action is available. Some actions are always available (such as Create for new objects). Other actions are only relevant if items have been selected (for example, Edit at item level, Remove, object-specific actions, or actions that change the status of an item).

Enable the following actions:

• All Add/Create actions, unless the user needs to specify where in the table the new item should be added.
• Edit actions that switch the entire table to edit mode (independent of the selected items).
  If the user triggers the Edit button, replace it with Save and Cancel buttons (see Editing the Whole Table).
• Item-dependent actions that can be applied to some or all of the selected items.

Disable the following actions:

• Item-dependent actions when no items have been selected.
• Add/Create actions where the user needs to specify the insert position in the table, but either no item has been selected, or more than one item has been selected.

Hide actions that cannot be used at all (for example, because the user has no authorization).

For more information, also see UI Element States – Control States.

Partial Processing

Enable the user to apply the changes to as many of the selected items as possible.

If an action can’t be applied to all selected items, show a warning message before executing the action:

• Indicate the number of selected items that can’t be processed (out of the total number of selected items).
• Give a reason why the action can’t be applied to these items.
• Let the user choose whether to apply the action to the remaining items anyway or cancel the action.

See an example here.

Note: In some scenarios, you might not be able to identify whether an action can be applied to all selected items before executing it. If the system is unable to apply the action to all items, show a message after executing the action.

Sort, Group, Personalization

Decide if you need to provide a sorting, grouping or personalization for your use case. If you offer more than one of these actions, offer them as single actions. We recommend keeping them in the following order: Sort, Group, Personalization.

Add/Create Items Using a Dialog

You can let users add or create new items at list report level using a dialog. This approach is recommended for cases where there are fewer than 8 required fields. Display the action in the table toolbar.

You can use this option for both draft and non-draft scenarios.

More Information

For more information on table and chart actions, see the guidelines for the table toolbar, chart toolbar, and for managing objects.

3. Line Item Actions

In rare cases, actions that affect a single item can be placed directly inside the line item. Use this only for specific, frequently used tasks (3). If the same action can also be applied to several items at once, feel free to also place it on the table toolbar. Nevertheless, if you do so, reconsider whether you really need to offer the action at line item level. Examples of line item actions include:

• Start/Stop (a batch job)
• Approve (an item)
• Assign (an item)

Do not disable line item actions. If an action cannot be used, hide it. This can be the case if the user has no authorization or the line item is in the wrong state.

4. Finalizing Actions

Place actions that trigger the end of a process and affect the entire page in the footer toolbar (4).

Examples:

• Save
• Cancel
• Submit

Please be aware: Even if you are using the icon tab bar, there is only one footer toolbar for all tabs.

Hide actions that cannot be used at all (for example, because the user has no authorization).

For more information on finalizing actions, see the guidelines for the footer toolbar.

In general, the list report floorplan is responsive. However, there are exceptions if the following controls are used:

• Grid table, analytical table, and tree table are supported on desktop and tablet devices only so you cannot use them for mobile use cases.

Instead, take an adaptive approach:

• • Create a new Fiori application with reduced complexity, not an exact match of the desktop application.
  • With the new application, address the most important use cases for users in a mobile context. The responsive controls (responsive table, list or tree,) or a relevant control for your use case (for example a chart or the category navigation pattern) may suffice.

• Smart table: The smart table is a wrapper around the different existing table controls. If a grid table, analytical table, or tree table is used inside the smart table, you will run into the limitation mentioned above.

For more details, see the respective guideline articles.

Use the object page floorplan if:

• Users need to display, create, or edit an object.
• Users need to get an overview of an object and interact with different parts of the object.

Dynamic Page Header (mandatory)

The dynamic page header contains key information about the object and provides the user with the necessary context. The header initially expands in display mode. It also contains global actions for the object, such as Edit or Delete.

The header consists of the following elements:

1. Breadcrumbs (optional)
2. Title (mandatory)
3. Subtitle (optional)
4. Header content (optional)
5. Object marker (optional)
6. Header toolbar with global actions (optional)
7. Visual indicator for header features (mandatory if the header can be collapsed and expanded)

Form Facet (Dataset)

You can use the form facet to display datasets.

A form facet consists of:

1. Title (optional)
2. Label-text pair (no more than 5 in a group)

• The labels can be invisible, but need to have a text for accessibility purposes.
• The labels can be icons, but need to have a text for accessibility purposes.
• Each text can hold a link.

Plain Text Facet

You can use the plain text facet to display a continuous text in the header.

A plain text facet consists of:

1. Title (optional)
2. Text

You can have links inline in the continuous text. They can navigate to another page or open a quick view. The text can contain more than one link, with different actions.

The default width of the facet is 320 px. The width of the facet doesn’t adapt to its content, but when the headline is broader than the facet width, the header wraps. You can also set a specific width to make optimal use of the given space.

Image Facet

You can use the image facet to show a picture of the object or a user profile. The header can have either one image facet or no image facet. The position of the image facet is fixed to the left. The image can have a press event. The default press event enlarges the image. When the header collapses, the image facet moves to the left of the title and becomes smaller.

Key Value Facet

You can use the key value facet to highlight important data or KPIs.

A key value facet contains:

1. Title (mandatory)
2. Text or number in a larger font size

If the key value facet is used with a text, such as a status, you can also display an icon to the right of the text. This icon must only be used as a visual cue for the text it relates to, and not to add more information.

Micro Chart Facet

A micro chart facet consists of:

1. Title (mandatory)
2. Subtitle (optional)
3. Micro chart (mandatory)
4. Footer text (optional)

To display the unit used in the micro chart, use the footer.

The following micro charts can be used in the micro chart facet:

• Bullet chart
• Column chart
• Trend chart
• Comparison chart
• Delta chart
• Harvey ball chart
• Radial chart

The micro chart facet can have a click event on the chart itself. This can lead to a page with a bigger chart or open a quick view, for example.

For more information, see Micro Charts.

Progress Indicator Facet

A progress indicator facet consists of:

1. Title (mandatory)
2. Subtitle (optional)
3. Progress indicator
4. Footer text (optional)

For more information, see Progress Indicator.

Rating Indicator Facet

You can use the rating indicator facet to display a single rating value or an aggregated rating (such as an average rating for a product). The facet structure is slightly different in each case.

Single rating value:

The single rating consists of:

1. Title (mandatory)
2. Subtitle (optional): Displays supplementary texts
3. Rating indicator

Navigation Bar (optional)

If your content can be shown in just one section, use the dynamic page layout. In the dynamic page layout with one section, the header area can’t be edited when the page is in edit mode.

If you need to structure your content in different sections, use the object page layout. You can only have several sections in the object page layout. When you use the object page layout, you can also make the header editable when the page is in edit mode. However, try to avoid having an editable header and move the content from the header to the sections instead.

If you need only one section, but require an editable header, use the object page layout. An object page with only one section doesn’t have any anchor bars. However, a temporary anchor bar and section for editing the header content should be added when edit mode is triggered.

If the content is complex there are two ways to structure it:

• Anchor bar navigation (default)
• Tab bar navigation

Anchor Bar Navigation

The anchor bar consists of a series of links, which are arranged horizontally at the top of the page. The anchors represent sections or subsections of the page. Clicking a link navigates to the respective section. The anchor bar remains visible when the user scrolls down the page.

Use anchor bar navigation when the content belongs together but users might want to jump to specific parts directly.

For more information, see Anchor Bar Navigation.

Tab Bar Navigation

The tabs are a series of links to subpages, arranged horizontally at the top of the page. Clicking a link navigates to the respective subpage. The tabs remain visible when the user scrolls down the page.

Use tab bar navigation if your page covers different topics that each have complex content, such as long tables or lists.

For more information, see Tab Bar Navigation.

Anchor Bar Navigation

The anchor bar is the default navigation control for the object page. It consists of a series of anchor links, which are arranged horizontally at the top of the page. The anchors represent sections or subsections of the page. Clicking on these links directs the user to specific sections of the page. The anchor links remain visible when the user scrolls down the page.

1. Active anchor
2. Inactive anchor
3. Subsection dropdown
4. Subsection
5. Subsection dropdown indicator
6. Overflow carousel button
7. Overflow menu button
8. Overflow menu dropdown
9. Section (hover) in overflow menu
10. Section in overflow menu
11. Subsection in overflow menu

Overflow

If there are more anchors than the screen can accommodate, the remaining anchors move into an overflow menu. The overflow button on the right of the navigation bar () opens a hierarchical dropdown list of all sections and subsections. When the user scrolls down the page, the anchor links scroll horizontally to ensure that the active anchor is always visible.

You might also see a small right arrow on the anchor bar. This arrow allows you to scroll horizontally to reveal any hidden content, and only appears when you hover over the overflow menu. In the meantime, this arrow has been replaced by the overflow menu button, but is still supported technically for legacy reasons.

Responsiveness

On small screens, the anchor bar becomes a dropdown list. The text field of the dropdown list shows the section currently selected. Clicking the dropdown menu opens a hierarchical list with all the sections and subsections of the page.

Behavior and Interaction

Tab Bar Navigation

As an alternative to the anchor bar, you can also use the tab bar for navigation. The tab bar works in a similar way to the icon tab bar, but is not the same control. The tab bar navigation for the object page is a variant of the anchor bar, and is handled by the object page layout control.

1. Anchor/tab bar navigation
2. First section
3. Second section

If you set the tab bar property (useIconTabBar = “true”), the navigation bar displays tabs instead of anchors. The object page only supports text-only tabs; icon tabs and icon/text tabs are not available. The object page sections and subsections are reflected in the tab navigation: sections of the object page become the tabs, and subsections become the internal content of the tab. The tabs can have an item counter, which is displayed in parentheses next to the title of the tab.

On small screens, the tab bar uses the same horizontal carousel overflow pattern as the icon tab bar. This differs from the dropdown approach used for the anchor bar.

If the content of a section contains a control, for example a table, then we recommend to always display it, even if the control title and tab title are identical. This makes it easier for the user to orientate themselves.

Subnavigation

To make it easier to reach specific content on a long tab page, tabs can have subnavigation. Subnavigation is optional, but the default state is set to “true” and a dropdown arrow is shown next to the tab. Clicking on the dropdown arrow displays a dropdown menu with the subsection anchors for that tab. Applications can decide which tabs are enabled for anchor subnavigation by setting their property to “true”.