Last Update: Sept. 15, 2023
Platform: Web
Designer: Matthias Stenzl
Intro
The dynamic page header is part of the predefined dynamic page. The page header comes in different versions, empty, with content, with action and can be expanded and collapsed. The header helps the user to focus on the actual page
content, while ensuring that important header information and actions are readily available.
Usage
The dynamic page header should be used to provide the user with the necessary information at the beginning of the user interface. This page header can also be used to provide the user with necessary actions, so-called global actions, right at the top of the UI. Furthermore, additional elements as text and filter inputs can be used which can then be hidden in a collapsed area.
Types
There are a number of different designs for the header area, from the empty header just with actions to the header with content, actions, filters and several other functions:
Structure & Components
The page header contains the following elements:
- Page Header
- Header Content
- Breadcrumb
- Key Information
- Control to collapse header sections
- Global Actions
- Layout Actions
Behavior & Interaction
In the header there are a number of controls for the interactions:
Global actions: controls for the entire floorplan appear on the right-hand side of the header title bar. Always offer the actions as buttons, visualized either as text or icons.
Breadcrumb: Above the title. Depending on the floorplan and use case, you can add breadcrumb navigation. The breadcrumb is primarily used to display the hierarchy of subpages.
Layout actions: Typical layout actions are the Close, Full Screen, or Exit Full Screen icons, which are mainly offered by the flexible column layout.
Expand and collapse feature: allow users to control the visibility of header content for instance as a filter area.
Responsiveness & Adaptiveness
The page header was designed to follow the requirements for responsiveness. Below we have examples of the responsive behavior of headers with different elements: with search field, filter bar and object details.
Application-specific examples
The dynamic page header and the dynamic page are used in most SF modules. Here is just a small selection of different application examples:
Growth Portfolio Admin (Proficiency Settings - Rating Scale)
My Learning Course Home (course details)
UXR Benefits Enrollement (Review Familiy Members)
UX Writing Guidance
When creating a page text:
- Keep the title short and crisp.
- Don´t use abbreviations.
- Don't use synonyms.
- Use active formulations.
The following links point to:
- a chapters in the Frontify UX Guideline for additional information: About UX Writing
- the page: SAP SuccessFactors HXM Suite - Product Assistance: SAP SuccessFactors HXM Suite
For questions to the UA Team, please use the following DL:
Accessibility
The dynamic page and the dynamic page header are standard elements and follow the specifications of the accessibility standards.
Resources
Dynamic page header from Fiori Guideline
Dynamic page header in the object page floorplan from Fiori Guideline
Dynamic page from Wiki / Object page floorplan from Wiki / Object Header from Wiki
Dynamic REACT component/ Object Page REACT component
SF Web Stencils Horizon Template