Use the object page floorplan if:

• Users need to see, edit, or create an item with all its details.
• Users need to get an overview of an object and interact with different parts of the object.

Do not use the object page floorplan if:

• Users want to edit several items at the same time. Use the list report floorplan instead.
• Users need to find relevant items without knowing the exact item details. Use the list report floorplan instead.
• Users need to find one specific item, where the item or an identifying data point is known to the user (such as a barcode identified by a barcode scanner). Use the initial page floorplan instead.
• Users need to be guided through a series of steps when a new object is created. Use the wizard floorplan instead.
• The creation process for a new object is not linear, but can have different paths, depending on the information selected. Use the wizard floorplan instead.

The layout for size XL (large display) contains four columns.

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.

Header

The header is the uppermost element of the object page floorplan. It contains key information about the business object and provides the user with the necessary context. The header also contains global actions for the object.

Ensure that you build the object page using the dynamic header and not the former object page header. This ensures consistency across all floorplans and provides greater flexibility.

The header consists of the following elements:

1. Title (mandatory)
2. Subtitle (optional)
3. Global actions (optional)
4. Object marker (optional, placed in the key information container of the dynamic header)
5. Header content (optional)
6. Breadcrumbs (optional)
7. Visual indicator (mandatory if the header can be collapsed and expanded)

Form Facet (Dataset)

The form facet can be used to display datasets in the header. It consists of a headline and up to five label-text pairs.

• The headline is optional.
• The form facet contains at least one label-text pair, and a maximum of 5 pairs.
• 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 in a label-text pair can have a press event.

Form facets are typically used for document information (such as creator and creation time), address or contact information, and general information.

Plain Text Facet

The plain text facet can be used to display a continuous text in the header. It consists of a headline and a continuous text.

• The width of the facet does not depend on its content, but can be set. The default width of the facet is 300px.
• The headline is optional.
• If the headline is broader than the facet width, the headline will wrap.
• Press events are only available inline in the continuous text. These can be links that navigate to another page or open a quick view. There can be more than one link in the continuous text with different actions.

Image Facet

The image facet can hold exactly one image. The header can have only one image facet, or no image facet.

The image can be:

• Square or circular
• An icon
• Initials consisting of two letters

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.

Recommended usage:

• Use round images for people, especially for portraits. If no image is available for a person, use the person’s initials instead (first letters of the first and last names).
• Use square images for all other images. If no image is available for an object, show a suitable icon.

Always make it clear to users how they can upload and manage images. This either be done in edit mode on the object page, or using an external tool. External tools can be helpful if there are a lot of images.

Key Value Facet

The key value facet contains a label in a smaller font size and a text or number in a bigger font size. It can be used to highlight important data or KPIs.

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 to visually support the text it relates to, and not to add an another aspect of meaning.

Micro Chart Facet

The micro chart facet consists of a headline, a subtitle, a micro chart, and a footer.

The headline and the micro chart are mandatory while the subtitle and the footer are 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 or tap event on the chart itself. This could  lead to a page with a bigger chart or open a quick view, for example.

For more information see micro charts.

Progress Indicator Facet

The progress indicator facet consists of a mandatory headline and a progress indicator (sap.m.progressIndicator). In addition, it can have two supplementary texts: a subtitle and a footer.

Rating Indicator Facet

The rating indicator facet consists of a headline, a rating indicator, and one or two supplementary texts, which are dependent on the use case.

The rating indicator can be modified as described in the rating indicator article.

We recommend the following property settings when using the rating indicator in header facets:

• 5 symbols as the default.
• Use the Favorite icon as the symbol.
• Display half-stars to represent decimal values.

The rating indicator facet can be used for two different use cases, which are described below.

1. Aggregated rating:

   A typical example of an aggregated rating is the average of several user reviews for a product. The facet for aggregated rating has a mandatory header, an optional subtitle, the rating indicator itself, and a footer.

   Use the subtitle to indicate the amount of data being aggregated. For example, if you show an average rating, the subtitle shows the number of ratings.

   In the footer, display exact aggregation value. Use the format “<average rating> out of <maximum rating>”. For the average rating, use the exact value with one decimal place.
   Example: 2.2 out of 5

2. Single value rating:

If you display the rating as a single value, the facet has a mandatory header, an optional subtitle, and the rating indicator itself. Here, you can use the subtitle for a supplementary text. Do not use a footer.

Toolbars

The object page supports two toolbars:

• Header toolbar: Use this toolbar for global actions, such as Edit, Delete, Copy, and Share.
• Floating toolbar: Use this toolbar for closing and finalizing actions, such as Save, Post, Accept, Reject, and Activate.

This applies to all object page modes (display, edit, and create).

Navigation

There are three ways to navigate within the object page:

• Anchor bar (by default)
• No navigation (flat scrollable page)
• Tabs

Usage

• To offer a flat page for a simple object, use the dynamic page to prevent having sections and navigation. Create the header in the same way as for the object page.
• For more complex objects, use anchor or tab navigation.

Anchor Bar and Overflow

The anchor bar is the default navigation control for the object page. It consist 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.

Overflow

If there are more anchors than the screen can accommodate, the remaining anchors move into an overflow menu. The overflow overview 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 overview 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 document.

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

Behavior and Interaction

• Clicking an anchor link scrolls the page to the selected section.
• Clicking a section anchor that contains more than one subsection opens a subsection menu.
• Clicking a subsection scrolls the page to the selected subsection. The keyboard left and right arrows allow the user to move between the anchor links.
• Hovering over the fade area to the left or right of the anchor bar causes an overflow arrow button to appear (compact mode only). The overflow arrow button is always visible in cozy mode.
• Clicking the overflow scroll button (right arrow) scrolls the anchors horizontally to bring anchors that are hidden in the overflow into view.
• Clicking the overflow overview button ( ) displays a hierarchical dropdown list with all the sections and subsections of the document. Clicking an item in the overflow list scrolls to the respective section or subsection.

Hiding the Navigation

You can hide the navigation bar from the object page, leaving a flat, scrollable object. We recommend using this flat view for simple content that doesn’t require anchor navigation.

Tab Navigation

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

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.

Tab Bar Subnavigation

To make it easier to reach specific content on a long tab page, tabs can have subnavigation. Subnavigation is optional and the default state is “false”. If the state is set to “true”, a dropdown arrow is shown next to the tab. Clicking on the tab displays a dropdown menu with the subsection anchors for that tab.

Tables

If a section or subsection 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 or subsection title acts as the table title.

In an object page, tables with up to 20 expected items can be displayed right away without lazy loading.

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

1. Lazy Loading Behavior (“More” button)

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

2. Tab Navigation

If you expect to have more than 50 to 100 items, but less than 400, using the object page with tab navigation instead of anchor navigation also solves the problems associated with long tables. Here it is important to place the table within a tab as the only or at least the last element and to enable the scroll to load behavior.

3. Navigation to List Report

For tables with more than 400 items, or when the tab approach is unsuitable, the table itself should be restricted to a reasonable amount of items. We recommend only showing a preview of the data in the table, which should not contain more than 20 items. Ideally, you should have about 10 items. This can be either be achieved by prefiltering and/or by sorting the table, and if necessary, by restricting it to a fixed amount of items (such as top 10). To provide the user with a way to work with the entire table, a navigation to a separate list report containing the full table must be offered.  This navigation should be located below the table in the form of a right-aligned link labelled Show All (x), with x representing the total amount of items in the table.

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 a list report with the respective table type.

For all of the three options mentioned above, we recommend providing a search, and if feasible, sort and filtering for the table in the object page. Grouping should be avoided.

Child Page Representation

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.
• Item navigation arrows: Up and down arrows in the layout action area allow the user to navigate between subitems without going back to the original list.

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. 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 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 on 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.