Last Update: Jan 10, 2023
Platform: Mobile
Designer: Ravishankar Sundaram
Intro
The Single Attribute Picker dialog enables users to select one or more items from a comprehensive list. The select dialog comes with a list of entries and a search field and a filter area to filter the list.
Usage
- Users need to select one or more entries from a comprehensive list that contains multiple attributes or values.
- Users need to pick one item from a predefined set of options that contains one attribute or value only such as languages. In this case, consider using the combo box or select instead.
- Your use case requires more enhanced functionalities such as a selection based on ranges. For the selection of values, consider using the value help dialog instead.
- Your use case requires tabs, filters, or an Add New functionality in the select dialog. In this case, use a standard dialog instead.
Types
There are two types of attribute picker available: single and mutiple
Structure & Components
The Single Attribute Picker UIs consists of 4 areas:
- Header
- Search and Filter Area
- Content (list)
- Footer
Behavior & Interaction
The following steps are shown on the screen flow:
- Attribute List
- Filter - the filter icons will lead to next screen with a list of filter.
- Attribute Details - will give a detail view to explain the attribute
- Selected Attributes - as soon an attribute was selected the select planel will display the selection.
- Selection Summary - via click on the select panel will lead the user to the next screen, the summary selection
Single Attribute Picker Screen Flow (Mobile)
Responsiveness & Adaptiveness
A web and mobile version are offered for the Single Attribute Picker. The componente thus meets the standard for responsiveness.
Application-specific examples
The Attribute Picker is an SF common component and is used in the same way in all modules. So far there are no application specific examples, only a standard form.
Accessibility
The Attribute Picker is a UI5 composite component. It is based on several UI5 controls and thus follows the requirements of the A11y standards.
Resources
Regarding to input helps, there is some related information in the Fiori Guideline that is worth paying attention to:
Value Help Dialog: https://experience.sap.com/internal/fiori-design-web/value-help-dialog/
Table Select Dialog: https://experience.sap.com/internal/fiori-design-web/table-select-dialog/