Last Update: January 23, 2022
Platform: Web
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 consists of 5 areas:
- Header
- Search and Filter Area
- Tab Strip Area
- Content (list)
- Footer
Behavior & Interaction
The search and filter area can be expanded. The Show Filter control opens the area and shows a series of input controls that can be filled with predefined filters.
When attributes will be 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 mobile version is offered for the attribute picker. The guideline chapter just worked out and then linked to this chapter.
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.
UX Writing Guidance
When creating a dialog text:
- Keep the title short and crisp, it can´t exceed one line in length.
- Don´t use abbreviations.
- Don't use synonyms.
- Use active formulation.
- Use initial capital letters.
The following links point to:
- a chapters in the Frontify UX Guideline for additional information: About UX Writing
- the page: SAP SuccessFactors HXM Suite - Product Assistance: SAP SuccessFactors HXM Suite
For questions to the UA Team, please use the following DL:
Accessibility
The attribute picker follows the A11Y standard.
Resources
Regarding to input helps, there is some related information in the Fiori Guideline that is worth paying attention to:
https://experience.sap.com/internal/fiori-design-web/select-dialog/
https://experience.sap.com/internal/fiori-design-web/value-help-dialog/
https://experience.sap.com/internal/fiori-design-web/table-select-dialog/