The object page floorplan allows the user to display, create, or edit an object. This is now the recommended floorplan for representing both simple and complex objects in SAP Fiori, and is set to replace the flat object view floorplan and object view floorplan. The object page floorplan comes with a flexible header, a choice of anchor or tab navigation, and a flexible, responsive layout. These features make it adaptable for a wide range of use cases.

You can implement the object page floorplan in two ways:

• Use the pre-built SAP Fiori element (formerly known as a smart template). This implementation uses OData annotations, and allows you to speed up development if the supported feature set matches your requirements. For an overview of the supported features, see the SAP Fiori Element section.
• Implement the floorplan yourself using the respective SAPUI5 controls.

Usage

Use the object page floorplan if:

• You need to let users display, create, or edit an object.
• You want to offer a flat page with no navigation for a simple object.
• You want to use tabs or anchor navigation for a more complex object.

Do not use the object page floorplan 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.

In all these cases, consider using the wizard floorplan instead.

Responsiveness

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

Structure

The object page is a full screen floorplan with a display mode, a create mode, and an edit mode.

In all modes, the object page contains:

• A snapping header
• A navigation bar
• A content area

The following sections explain these components in more detail.

Breadcrumbs

If the object page uses a hierarchical parent-child drilldown, you can offer a breadcrumb for navigation. The breadcrumb is part of the snapping header.

Content Area

The object page content consists of sections and subsections arranged in a column layout. For large documents, you can enable a lazy loading mechanism (property: enableLazyLoading) to mitigate the loading time.

Sections

Sections are containers for subsections. They provide the basic structure for navigation, and are directly reflected in the navigation bar. Sections can have a title, subsections, and actions. However, they cannot contain controls.

Use title case for the section title (property titleUppercase = “false”). The title can have an item counter, which is displayed in parentheses. If a section contains only one subsection, the title of the subsection is used as the name of the section. In this case, there is no subsection submenu in the anchor bar.

Global actions are always placed at subsection level. Sections can only contain subsections, not content. Because of this, the object page only provides toolbars for global actions at the subsection level.

Subsections

Subsections are the containers for actual content. Always place individual controls inside the subsections. Subsection content is arranged according to the column layout approach for the respective screen size. A subsection can include containers for different controls (mixed content).

Subsections have a progressive disclosure mechanism to show and hide content. App developers can specify which content is shown initially, but the user can also display everything by selecting the Show All button at the bottom right of the subsection.

Each subsection can have a toolbar, which is placed at subsection header level on the right. The toolbar contains actions that affect the content of the subsection.

Subsections within the same section are separated by a gray horizontal line. Subsections can have an item counter, which is displayed in parentheses next to the subsection header.

You can include various types of related content in one subsection. The layout blocks for the object page give you the flexibility to combine different content types.

Responsiveness

The content blocks in a subsection display in a row. The width of the row depends on the column layout for the respective screen size. If there is not enough space to display a content block, it wraps to the line below.

Forms

Forms follow the standard layout of the object page:

• Large: 3 columns
• Medium: 2 columns
• Small: 1 column

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. Only use the form title if you are using several forms within the same subsection.

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 avoids issues with the spacing between the label and form field, which can occur with left- and right-aligned labels.

Blocks

Layout blocks allow content to be aligned within the columns as follows:

• Layout 1: Occupies the maximum available horizontal space of one column.
• Layout 2: Occupies the horizontal space of only two columns. If there is only one column available, it occupies one column.
• Layout 3: Occupies the horizontal space of three columns. If there is only one column available, it occupies one column. If there are only two columns available, it occupies two columns.

Contacts

The contacts on the object page are technically a list, but they can be represented visually as a card.

The cards can contain:

• An image (optional)
• A title (mandatory)
• A subtitle (optional)
• A text snippet consisting of two lines maximum (optional)

A single card covers the column’s entire horizontal space. To avoid alignment problems, all cards are the same height. The card with the most content defines the overall height for all cards. The image can be rectangular or round. It shows in the top left corner of the card. The content of the card never truncates. If there is not enough space to display the information, it wraps onto the next line.

Behavior and Interaction

Edit

The basic layout of the object page in terms of header, navigation, and content remains the same in all modes (display, edit, create). In edit mode, the object page can contain a mixture of editable and read-only content.

If the user needs to edit elements in the header, a header section is added in the content area for edit mode to enable editing.

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 manage objects – create, edit, delete.

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 or taps the Close icon or anywhere outside the popover.

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, use the placeholder text “New <Object>” (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.

Guidelines

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 a 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.
• Place the most important actions on the left (actions go into the overflow from right to left).
• Establish a coherent visual approach.

Tab Navigation

Use tab navigation if you need a facet approach to your content. This could be due to performance issues in a flat view, or in response to a specific user preference. If you need to use icons, tabs as process steps, or tabs as filters, use the object view floorplan.

Not a Content Dump

Avoid using the object page as a universal container for masses of information. You should use the object page in accordance with the SAP Fiori principles: role-based, coherent, simple, and adaptive.

Simplify Content for Your Users

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

SAP Fiori Element

Use the table below to see which features are available for the “object page” SAP Fiori element.

Resources