Intro

The object view is a floorplan for displaying objects in SAP Fiori. It can either be embedded in a master-detail app (as in typical approval apps) or shown as a full-screen page. This floorplan offers optimal support for multiple devices.

The object view is suitable for both simple objects and more complex, multi-faceted objects. You can use a tab container to present the information in different categories.

For editing, the layout switches to a flat object view. In other words, all the sections that were presented as tabs appear together on one long page. Switching to this flat layout prevents user input and validation errors from being scattered across multiple tabs.

Object view on a desktop device with letterboxing

Usage

Use the object view floorplan if:

• You have objects with up to 5–7 facets.
• You want to display complex objects with minimal navigation.
• You want to combine a long table with other object facets, but keep the table visible. In this case, the other aspects are shown as tabs and the table appears below the tab area.
• You are building a typical approval app.

Do not use the object view floorplan if:

• You want to keep the same layout when the app switches between create/edit and display modes. In this case, use the flat object view.

Structure

Responsiveness

Object view on a desktop

Tabs

The key element of the object view is the icon tab bar. Each of the tabs shows a certain facet of the object. There are two primary facet types:

1. Form-based facets display attributes of the object in a form layout (for example, object details or contact details).
2. Tabular facets show a list of similar attributes or relationships in a list or table structure (such as attachments, contacts, or products).

Defining Tabs

You can define tabs as expandable, allowing users to show or hide the tab content as needed.

You can also define the default tab that is selected when the user opens the application. This might not always be the first tab on the left. However, you should ensure that the tab state is consistent for object views of the same type. This gives the user a coherent user experience when navigating between object views.

The user can switch between the object facets by just switching tabs. You can display additional information below the tabs.

Object view with text-only tabs

In the object view, you can use the following tab types:

1. Icon tabs: Use icons if you only need the standard tabs, such as information, attachments, and notes.
2. Text only: Use text if you need tabs for other (non-standard) object facets.

Guidelines for choosing a tab type:

• As a simple rule of thumb, if you have to think about which icon fits best, use the text-only type instead.
• Do not mix the text-only and icon tab types.
• Do not use separators between the tabs.
• Do not use any other icon tab bar types (tabs as filters or process steps).

Don't

Using actions specific to tabs

Don't

Using actions specific to tabs

Do

Using actions specific to tabs

Do

Using actions specific to tabs

The footer toolbar in the object view floorplan is global. Actions in the footer toolbar must not change when the user switches tabs. If you need to include actions that relate to a specific tab (facet), include them in the tab content. For example, if the tab contains a table, offer actions in a table toolbar.

Flows and Variants

Create

Edit

Attachment tab in an object view – Modeless editing

While the edit mode involves switching to a flat object view, some elements support “modeless” editing. These elements can be changed in both display and edit modes.

For example, adding a new attachment is a one-click action that is guided by a dialog. This action can be triggered without switching to edit mode. Any errors that might occur can be handled during this creation process.

If you do not want to switch to a global edit mode, you can encapsulate your action in a dialog. Example use cases include:

• Editing certain attributes of an element (use a dialog)
• Adding line items to a tabular facet (use the plus (:icon-add ) button and a dialog or create page)
• Removing a line item (use a one-click action in the table)

Guidelines

• Do not switch the actions in the footer toolbar when the user switches tabs. The footer toolbar is global and constant. If you have tab-specific actions, place them in the tab content area.
• You can hide empty tabs, but only if there is no way of adding content to the tab. For example, you still need to show an empty Attachments tab to enable users to upload attachments.
• Try to persist the selection state of tabs during a session so that the user finds a similar view while navigating between instances.

Visual Design

The object view floorplan has no visual design of its own, but application design and development should ensure that the margins and paddings are similar to the normal page layout. For example, the controls should have the same margins inside the side content container.

Basic layout of the object view on a smartphone

Basic layout of the object view on a tablet

Basic layout of the object view on a desktop

Basic layout of the object view on a desktop – Split screen

Resources