Last Update: January 23, 2022
Platform: Web
Designer: Ravishankar Sundaram
Intro
The Single 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 Single Attribute Picker consists of 4 areas:
- Header
- Search and Filter Area
- Content (list)
- Footer
Behavior & Interaction
The search and filter area can be expanded. The Show Filter control opens the area and can shows a series of input controls that can be filled with predefined filters.
Responsiveness & Adaptiveness
A mobile version is offered for the attribute picker. The mobile guideline chapter is in progress and will be linked to this chapter soon.
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/
SF Web Stencils Horizon Template