Intro
Icon Tab Bar (for status filtering) is a Fiori+ component. Based on current Icon Tab Bar, it provides the visual when icon is not s, and keeps the filtering function. It also provides customize capability to indicate soft-verification information (optional).
The current Icon Tab Bar in Fiori standard library doesn’t support customization. There is total number, different filtering numbers and icons. This Fiori+ component works for the situation that no icons are configured. It provides the ability to filtering different status and their colors.
Usage
- Your business objects need to show multiple facets at the same time.
- You want to allow the user to browse through these facets.
- You need a prominent or very visual filter on top of a list.
- Your configuration doesn’t contain icons.
- You plan to use only one single tab.
- If your configuration has icons, use standard Icon Tab Bar.
- You don’t need very highlighted visual filter, use standard Filter Bar.
Structure
The Icon Tab Bar (for status filtering) contains main parts and optional parts:
- Total value and label
- Each value and label tab
- Soft verification or other additional information button (optional)
- Show all arrow (for small screen or many tabs can’t be show at once, optional)
Behavior & Interaction
On responsive mobile screen, if there are many tabs and the user can’t see all the tabs at once, user can scroll horizontally to see other tabs.
User can click Tab to select and focus on each tabs
User can click Tab to select soft verification info button, click Enter will open the popover, click ESC will exit the popover.
Please follow the Web Accessibility QuickGuide
There should be at least 2 tabs aside from Total tab. So on tab level, there is no empty state.
If the value in the tab is 0, show 0 and content empty state.
Value State
Icon Tab Bar show different value states for each tab. All labels/color are default setting or configured by admin/company.
Parameters
- For Icon Tab Bar standard Parameters, please refer to: https://wiki.wdf.sap.corp/wiki/pages/viewpage.action?pageId=2043268480
- For Soft verification info button, please refer to: https://zpl.io/blqY5Z1
Responsiveness and Adaptiveness
Icon Tab Bar (for status filtering) share the same responsive behavior with Icon Tab Bar.
https://sapui5.hana.ondemand.com/#/entity/sap.m.IconTabBar/sample/sap.m.sample.IconTabBar
*Attention that we have removed the status indication color bar of goal card. Please check the updates from Goal Card:Goal Card (WIP)
Accessibility
Checklist:
Examples (Application-specific examples)
- Goals b2005/b2011 dev demo：https://github.wdf.sap.corp/pages/xweb/goalmanagementx/?path=/story/goal-components-goalicontabbar--default
- Goals b2005 sales demo (Please contact Vanessa, Li)
- Zeplin: https://zpl.io/blqY5Z1
- InVision: https://sapsf.invisionapp.com/share/TCYE8FDXNVH