Last Update: July 02, 2022

Platform: Web, Mobile

Designer: SF UX Team

Intro

In SF the object page floorplan is used to display and categorize all relevant information about objects or personas.

Categorized content can be accessed quickly using anchor or tab navigation, and users can switch from display to edit mode to change the content.

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.

In SF we have extended requirements regarding the flexibility and efficiency of the UI. The object page was extended to the needs of HXM use cases.

Usage

• Users need to display, create, or edit an object or a persona.
• Users need to get an overview of an object and interact with different parts of the object.
• Users need to edit several items at the same time.
• Users need to find relevant items without knowing the exact item details.

_________________________________________________________

• Users need to be guided through a series of steps when a new object is created.
• The creation process for a new object is not linear, but can have different paths, depending on the information selected.

_________________________________________________________

• Users need to find one specific item, where the item or an identifying data point is known to the user (such as a code identified by a scanner).

_________________________________________________________

• Users need to analyze data step by step from several perspectives to drill down to investigate a root cause and act on transactional content within one page.
• Users to interacts with interdependent chart and table views (rather than using charts for visualization only).

List report floorplan

____________________

Wizard floorplan

____________________

Initial page floorplan

____________________

Analytical list page

Structure & Components

• Dynamic page header
• Navigation bar
• Content area
• Shell bar
• Profile Picture
• Global actions
• Header content

Behavior & Interaction

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

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

• If the object page is in display mode, set the focus on the first section.
• Header and content can be set to edit mode vial local edit and add controls.

Responsiveness & Adaptiveness

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

Application-specific examples

Accessibility

Resources

Reference to the Fiori Guideline:

https://experience.sap.com/fiori-design-web/object-page/

SAP UI5 tool kit: https://sapui5.hana.ondemand.com/#/entity/sap.uxap.ObjectPageLayout/sample/sap.uxap.sample.ObjectPageOnJSON