Intro

The object page floorplan is used to display and categorize all relevant information about an object. Categorized content can be accessed quickly using anchor or tab navigation, and users can switch from display to edit mode to change the content. To create a new object, users can switch to create mode.

The object page floorplan comes with a flexible, responsive layout and a dynamic page header that can be adapted to display simple and complex business objects. This allows you to adjust the layout to a wide range of use cases.

Object page floorplan

When to Use

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.

Components

The object page consists of the following elements:

• Dynamic page header (mandatory)
• Navigation bar (optional)
• Content area (mandatory)

The image below provides an overview of the object page components.

1. Dynamic page header
2. Navigation bar
3. Content area
4. Shell bar
5. Breadcrumbs
6. Global actions
7. Header content
8. Footer toolbar

The following sections explain these components in more detail.

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.

If the object page is used in the flexible column layout, it can also contain layout actions.

Please note:

• To display images and placeholders in the header, use the avatar control.
• The subtitle is now below the title. (In the former object page header, it was next to the title.)

For more information, see the Dynamic Page Header section for the dynamic page layout.

Breadcrumbs

A breadcrumb is displayed above the object title. Limit the breadcrumb to the drilldown levels within the object page.

Header Content (optional)

The header content displays app-specific contextual information. You build the content using containers, called facets.

The facets are arranged inline, with a left float. Each facet adapts its size to the content and makes optimal use of the space without truncating the texts. If the facets do not all fit on one line, those on the right wrap to the line below.

The header content is hidden by scrolling down the page or clicking the collapse indicator.

There are several types of header facets for different kinds of data. The facets must be implemented by the app team for standalone object pages. For SAP Fiori elements, they are predefined.

The following header facets are available:

• Form (dataset)
• Plain text
• Image
• Key value
• Micro chart
• Progress indicator
• 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.

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 (:icon-overflow) 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”.

Content Area

The object page content consists of sections and subsections arranged in a column layout.

Forms within the Object Page

Form columns can be displayed with the standard number of columns or more to allow application teams to efficiently handle information density.

For guidance on layout columns and content density for form content in the object page, see Responsiveness.

Forms are located within subsections. They follow the column design of the object page, whereby each form group is arranged into a column. The title of the form is given by the subsection header. To improve access to the different forms we recommend always using one subsection per form, rather than placing multiple forms into one subsection.

To add actions, use the subsection header. For actions at the group level, use a group header. To prevent confusion, we recommend inserting actions only in one place, depending on the use case.

Use top-aligned labels for form fields. Top-aligned labels are known to reduce completion times and are the best approach for forms requiring localization or long labels. Using top-aligned labels also prevents issues with the spacing between the label and form field, which can occur with left- and right-aligned labels.

You can enable users to show and hide forms, groups or label-value field pairs using the Show More / Show Less toggle button.

SAP Fiori elements provide an option to show or hide fields on small screen devices based on their importance.

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, sorting 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.

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

Behavior and Interaction

The basic layout of the object page in terms of header, navigation, and content remains the same in all modes (display, edit, create).

Initial Focus

When the object page is loaded, set the initial focus as follows:

• If the object page is in edit mode, set the focus on the first empty mandatory field.
• If there are no mandatory fields, set the focus on the first editable element or first action.

[internal_only]For more information, see Fiori Keyboard Interaction, Initial Focus section (page 54).[/internal_only]

Edit

The object page can contain a mixture of editable and read-only content.

Use the same content layout for both display and edit mode – content should not change location when the user switches between display and edit modes.

For global and local editing guidelines, see Object Handling (Create, Edit, Delete).

There are two ways of editing header content depending on whether you’re implementing Global Edit or Partial Edit, both of which are explained below.

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.

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

Create

Create mode is similar to edit mode, except that the user creates a new object and defines a title for it. Until the new object title is known, display the placeholder text “New ” (for example, New Purchase Order). Replace the placeholder text with the actual name or ID of the new object as soon as this has been entered or generated.

Consider using the wizard floorplan instead of the object page floorpan if:

• You need to guide the user through a series of steps when a new object is created.
• You need a progressive disclosure approach for the creation process.
• The creation process is not linear, but can have different paths, depending on the information selected.
• The user is not familiar with the creation task.

Message Handling

Message Strip

In Edit Mode

In edit mode, use the message popover to help validate forms and tables as a single object.

Responsiveness

The object page floorplan is responsive and supports all SAP Fiori screen sizes: small (S), medium (M), large (L), and extra large (XL).

For standard columns provided by the form, see the Form / Simple Form.

SAP Fiori Elements: Extended Columns Feature

SAP Fiori elements, by default, provide reduced content density for form content:

• Small: 1 column
• Medium: 3 columns
• Large: 4 columns
• Extra large: 6 columns

Use

• For general content or for forms that contain longer text/label value pairs, use the standard column distribution provided in Form / Simple Form.
• For forms that contain short text/label value pairs in SAP Fiori elements, use the extended column feature to improve information density.

Extra Large Screens

Responsiveness of Form Content

For size XL, we recommend using the full 6 columns for forms with a lot of content. This gives you greater flexibility when you organize the form content and the groups

XL screen extended (up to 6 columns)

Large Screens

Content Density of Forms with Large Screens

Forms on an L screen have 3 columns by default. You can increase the number to as many as 4.

Large Screen Extended (4 columns)

Medium Screens

Content Density of Forms with Medium Screens

Forms on an M screen have 2 columns by default. You can increase the number to 3.

Medium screen extended (3 columns)

Small Screens

Forms on an S screen (smartphone or small desktop screens) have one column by default.

Small screen with form content (1 column default)

Guidelines

Dynamic Page Header

Use the header to set the context. Ensure that it is clearly structured and contains only essential information. Too much information impedes the main purpose of providing clear context.

Actions

Arrange the actions in the header toolbar with care, and consider what matters most to the user:

• Highlight actions that are common or most important.
• Differentiate between secondary and generic actions.
• Use either a text button or an icon for an action, but not both.
• Use icons only for generic actions (such as :icon-actionfor Share). For all business actions, use text buttons.
• Place the most important actions on the left (actions go into the overflow from right to left).
• Establish a coherent visual approach.

For more information, see Action Placement.

Image Facet

If you intend to use images in the object header, consider the following:

• How will the user manage the images?
• How will the system block people without permission from editing images?
• How will these images be reflected in other floorplans if they are part of the object?
• If there are a large number of items, how would a user be able to manage images without having to navigate from page to page?
• Will the organization be able to manage the images?

Tab Navigation

If you have a complex object page, use the tab navigation approach. This can be useful when a complex object page has performance issues in a flat view, or in response to a specific user preference.

Content Area

• Avoid using the object page as a universal container for masses of information. Use the object page in accordance with the SAP Fiori principles: role-based, coherent, simple, and adaptive.
• Give your users quick and easy access to the information they need to complete their task(s). Use a progressive disclosure strategy to keep your interface clean. You can always provide additional information on request.
• Only present your users with information that makes sense for their industry, role, activity, and task.

Dynamic Side Content

You can offer dynamic side content alongside the object page under the following conditions:

• Use the side panel only for contextual content. Do not place finalizing or global actions in the side panel. This is because opening the side panel occupies the whole right side of the screen. There is no way to show it only below the header and anchor bar.
• Do not place object information in the side panel. This information should always be in the content area of the object page.

Standard Naming Conventions

For all objects, follow the standard conventions for action buttons, the object name, and the title in the shell bar. For more information, see:

• Object Handling – Naming Guidelines
• Launchpad Shell Bar – Page Title and Navigation Menu.

Resources