Last Update: Jan 10, 2023
Platform: Mobile
Designer: Ravishankar Sundaram
Intro
The Multiple Attribut 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 Multiple Attribute Picker UIs consists of 5 areas:
- Header
- Search and Filter Area
- Tab Strip Area
- Content (list)
- Footer
Behavior & Interaction
The following steps are shown on the screen flow:
- Add Attribute - browse by attribute type
- Attribute List - select attribute in a list
- Filter - the filter icons will lead to a screen with a list of filters.
- Search Results - the screen provides a list of searched attributes.
- Attribute Details - gives a detail view to explain the attribute
- Selected Attributes - as soon an attribute was selected the select panel* will display the selection.
- Selection Summary - via click on the select panel it will lead the user to the next screen, the summary selection
* When attributes are selected an area above the tab strip appears to display the number of selected attributes.
On the right side of the area an arrow control can be click to navigate to the aggregated list of selected attributes.
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/