Last Update: Jun 14, 2022
Platform: Web
Designer: Joyce Lin
Intro
Details Panel is a Fiori+ component based on Fiori standard component Flexible Column Layout- details panel.
Users can expand the column they want to focus on, switch between different layouts, and view the rightmost column in full screen mode.
In 2111 assignment, assignment owner can view more applicant info on applicant list page, such as contact info, resume, capabilities, timestamp, and approver info.
If admin sets approver permission, assignment owner could see approver info by clicking the info icon.
Usage
- You want to create a list-detail or list-detail-detail layout, in which the user can drill down or navigate.
- You want to show more applicant's info.
- You want to build a workbench or tools layout. The flexible column layout is not meant to provide a main column with additional side columns on the left and/or right. If you want to display additional content to enrich the main content and to help users better perform their tasks, use the dynamic side content instead.
- You want to create a dashboard with context-independent pages.
- You want to open multiple instances of the same object type. Use the multi-instance handling floorplan instead.
- You want to split a single object into multiple columns, or display only a small amount of information.
Structure and Components
The user closes the third column by clicking the Close icon in the upper-right corner.
Behavior & Interaction
Clicking on "name" or "avatar" the detail panel opens to display more information about applicant.
Responsiveness and Adaptiveness
Accessibility
A11y Annotation and behavior can be found in here.
Examples (Application-specific examples)
The detail panel with SAP Fiori Horizon style:
Full page example:
Resources
2211 eng spec- https://www.figma.com/file/HuMVUnqbWNsDWINmGOKGRJ/Assignment-2202-2211_Web?node-id=7467%3A212448
2111 specs: https://zpl.io/b6KAZNR