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.

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.

• 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 displays 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 & Adaptiveness

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:

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

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

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

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

As a simple rule of thumb: if you have to think about which icon fits, use the text-only type.

• 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).

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

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 ( ) 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.

Resources

Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.