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

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.