List Picker Form Cell
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.
Usage
- Use when the size and nature of available options are unknown or dynamic (for example, data from a database).
- Don’t use the list picker form cell for boolean options (e.g., true/false or yes/no), use the switch instead.
Behavior and Interaction
There are two levels in the list picker form cell. In the first level, the list picker form cell is displayed as a two-line cell with a chevron. The whole cell is a touch target. By tapping the cell, users will drill down to the second level: the list of available values. The drill down page would open within the same container as the form cell.
Values in the list can be grouped to help users quickly locate the one they want to select. The search function can be included when there is a large number of values to choose from.
The list of values can be either single selection (radio buttons) or multiple selection (checkboxes). In case of a multiple selection, all selected values will be grouped into the “Selected” section at the top of the page for easy view.
The back button leads users back to the first level, where the list picker form cell is located. All selected values should be displayed in one line under the label text. If it’s too long, truncate the text at the end (for example, “Value A, Value B, Value C…”).
Selected values truncated at the end
User interaction with list picker form cell
Variations
Text Values
The type of data in the list depends on context. Text value is a common type of data to be displayed in the list.
By default, display the text on the right side of the selection control. If the text is long, it can wrap to several lines. But list picker form cell is best used for selecting simple values.
List of values with multiple checkbox selection
Object Cells
The other type of data we support is object cell. Only use object cells instead of text values when additional information is important for users to make the selection. For example, display avatar with name and position in the list when selecting assignees would be very helpful.
When display object cells in a list, do not include the attribute and actions area. Instead, display the checkbox / radio button in the right side of the object cell.
Display the title text as the selected value in the list picker form cell.
List displaying object cells
Validation Message
Use validation message only when necessary: to show error message or direct feedback of this control. Do not distract users with unimportant information. For page level feedback, use a snackbar instead.
The validation message should be concise. One line of text is recommended for the validation message.
By default, there is no validation message. When the validation message is triggered, insert the message with padding below the selected value (before the divider line if used). The content under it will be pushed down.
List picker form cell with error message
Specifications
The list picker form cell is responsive to the screen width.
Mobile
List picker form cell
Specifications of list picker form cell
List picker form cell with validation message
Specifications of list picker form cell with validation message
Checkbox cells
Specifications of checkbox cells
Object cells
Specifications of object cells
Tablet
On tablet, the cell width depends on the container. When directly used in a full screen, it follows the keylines. When used in a modal dialog, it has 24dp left and right padding.
List picker form cell
Specifications of list picker form cell
List picker form cell with validation message
Specifications of list picker form cell with validation message
Checkbox cells
Specifications of checkbox cells
Object cells
Your feedback has been sent to the SAP Fiori design team.