List Picker Form Cell
Fiori: GenericListPickerFormCell
Intro
The list picker form cell allows for the selection of one or more options among values within a defined category. It serves as the entry point to a list of available values for that category and summarizes the selected value.
List picker form cell on mobile (left) and tablet (right)
Usage
- Use a list picker form cell when the size and nature of available options are unknown or dynamic, for example, data from a database.
- Use a list picker form cell when the available options have or can be displayed with a consistent structure, for example, text or object cells.
- Don’t use the list picker form cell for boolean options (e.g., true/false or yes/no), use the switch instead.
- Don’t use a list picker if the selection requires complex input, for example, entering text, manipulating sliders, or interacting with multiple elements simultaneously.
Anatomy
List picker anatomy
A. List Picker Form Cell
The list picker form cell is comprised of a label, an overview of the selected values, and a chevron button.
B. Search (Optional)
The search function helps the user quickly find a specific value from the list.
C. “Selected Value” List (Optional)
The “Selected Value” list summarizes the values that have been selected and appears at the top part of the list. Users can deselect all values at once by tapping the “Deselect All” button.
This feature is optional and applicable to multi-select only.
D. “All Value” List
The “All Value” list displays all values within the list. Texts on the header can be customized. Users can select all values at once by tapping the “Select All” button.
The section header and “Select All” button are applicable to multi-select only.
E. Anchor Button
The anchor button appears in the selection view during scrolling and floats over the value list. It can take users back to the top of the list.
This feature is applicable to multi-select only.
F. “Apply” Button
The “Apply” button saves a user’s selection to the list picker form cell.
G. “Close” Button
The “Close” button discards the changes and quits the selection view.
Behavior and Interaction
Select and Apply
To select and apply values from a list, users can tap on the list picker form cell and drill down to the list picker selection view, where they can tap on values to select or deselect them.
- If the value list is long, users can scroll down and view more options in the expanded bottom sheet.
- To quickly review their selections, users can use the anchor button to go back to the top.
Once users have made their selections, they can save the changes by tapping the “Apply” button. The selected values are displayed in the list picker form cell, giving users an overview of their selection.
User interaction of selecting and applying values
Discard Changes
Users may exit the selection view by tapping on the “Close” button. To prevent users from accidentally losing their changes, consider adding an additional confirmation dialog.
Please refer to List Picker Detailed User Flow to learn more about the existing options and behaviors.
User interaction of discarding changes
Variations
Selection Type
The list of values can be either single-select (radio buttons) or multi-select (checkboxes).
Single-Select
To enable rapid selection, consider hiding the “Apply” button.
Multi-Select
To display all selected values, consider enabling the “Selected Value” list.
Single-select without “Apply” button (left) and multi-select without “Selected Value” list (right)
Value Type
Text Value
Text value is a common type of data to be displayed in the list.
By default, the text is displayed on the right side of the selection control and can be wrapped in several lines.
Object Cells
Use object cell instead of text values when additional information is essential for users to make a selection. For example, displaying an avatar with name and position in the list when selecting assignees would be very helpful.
When displaying object cells in a list, do not include the attribute and actions area. Instead, show the checkbox/radio button on the right side of the object cell.
Display the title text as the selected value in the list picker form cell.
Multi-select in text format (left) and multi-select in object cell format (right)
Selection View
There are two options a list picker selection view can be displayed. Depending on the size and nature of the value list, choose the option that best fits your app’s use case. If the value list is large, the half-screen view can be expanded to the full-screen view naturally while the user scrolls.
Half-Screen View (Default)
The half-screen view is a modal bottom sheet that occupies half of the screen height and overlays the background. It’s best used when the value list is expected to be short and simple, for example, such as when it contains only three to six values.
Full-Screen View
The full-screen view occupies the full screen height like a page. When the value list is expected to be long or unknown, choosing the full-screen view will help users to browse.
Half-screen view (left) and full-screen view (right)
Validation Message
Use a validation message only when necessary, such as to warn users that input fields must not be empty. Avoid providing users with irrelevant or unimportant information that may distract them. For page-level feedback, use a snackbar instead.
The validation message should be concise. We recommend using one line of text only.
List picker form cell with success message (top) and error message (bottom)
Adaptive Design
The selection view adapts to different screen sizes. On mobile devices, the list picker selection view appears as a bottom sheet. On tablets, the list picker selection view appears as a dialog. The other features remain the same on both device types.
Your feedback has been sent to the SAP Fiori design team. 