Last Update: Sept 02, 2022
Platform: Web
Designer: Matthias Stenzl
Intro
Introduction Container is a Fiori+ component based on Fiori standard component . The introduction Container is a container for grouping and displaying information. It can be collapsed to save space on the screen.
Based on standard Expandable Panel, the Introduction Container provides a different visual with icon and panel background to indicate this session is an introduction session.
Usage
- You need to group or display information.
- You want to give users the option of hiding this information.
- You want to show additional information on demand.
- You have multiple additional information to show at the same time.
- KPI, important information or key data shouldn’t use this pattern.
Structure
Components of the Introduction Container
Behavior & Interaction
- When there is many content, there will be vertical scrolling inside the Panel Content area.
- No Drag and Drop support.
- User can click Tab to select and focus on close button or the container title, press Enter to close the Introduction Container.
- User can click Tab to select and focus on the container title, press Enter to expand and show the Introduction Content.
- Please follow the Web Accessibility QuickGuide
The content is configured by admin/company, if they configured nothing, there will be a “No Data” in the Introduction Container.
Parameters
For standard Panel parameters, please refer to: https://wiki.wdf.sap.corp/wiki/pages/viewpage.action?pageId=2040117220
For Introduction Container spec, please refer to: https://sapsf.invisionapp.com/share/XWYEAQ8Q3CD
You can use different icons to replace the original info icon.
Responsiveness and Adaptiveness
Accessibility
Based on A11Y team’s suggestion, we are using standard Fiori button for close button.
And for non-visual label, the Introduction panel title should contain the “collapse/expand + panel title information”, so the screen reader can read the panel title as actions to collapse and expand the panel.
Examples (Application-specific examples)
- Goals b2005/b2011 dev demo：https://github.wdf.sap.corp/pages/xweb/goalmanagementx/?path=/story/goal-components-goalintrocontainer--default
- Goals b2005 sales demo (Please contact Vanessa, Li)
- InVision: https://sapsf.invisionapp.com/share/XWYEAQ8Q3CD