Intro

The key value cell is a table view cell that fits inside the table view container. It is ideal for displaying sets of data that also need to display their labels.

Usage

Do
  • Use a key value cell to display a piece of information with its label.
Don't
  • Don’t use the key value cell to display an image.
  • Don’t use the key value cell to display text content that is not related to a property.

Anatomy

A. Key Label

This is the property name that identifies what the value is representing.

B. Value

Value is used to show the data for a property. This could be pre-defined values or input created by users. If there is a specific action associated with it (for example, phone number or email address), the value should be a button color.

C. Expand/Collapse Icon

When the value text exceeds six lines, it’s truncated at the end of the sixth line, and an expand icon shows up. Users can tap the expand icon to view the rest of the value text. When the cell is expanded, a collapse icon replaces the expand icon.

Key value cell anatomy
Key value cell anatomy

Behavior and Interaction

Key value cells have a maximum height of six lines of value text. If the content is more than six lines, it is truncated at the end of the sixth line and an expand icon will appear on the top right corner of the cell. Users can tap to expand/collapse the cell to view all of the text.

Expand and collapse behavior
Expand and collapse behavior

In general, key value cell is for display only. Tap to drill down is possible, though it depends on the context. If the value displayed has a specific action associated with it (for example, phone number or email address), tapping on the cell would trigger that action (for example, call that phone number or send an email to that address).

Blue text indicates an actionable item
Blue text indicates an actionable item

Adaptive Design

Mobile

On mobile, always display the key value cell as one full-width column.

A list of key value cells on phone
A list of key value cells on phone

Tablet

On tablet, key value cells can be displayed as one or two columns.

One-column

A list of key value cells on tablet
A list of key value cells on tablet

Two-columns

Key value cells can be displayed in two columns layout on tablet devices to take advantage of screen space. Only use the two-columns layout when the cells in this group have relatively consistent height among all the rows. This layout is only recommended for a group of items with short value text. Avoid having expandable key value cells in a two-columns layout.

Key value cells in two-column layout on tablet
Key value cells in two-column layout on tablet

Specifications

One to Six Lines of Value Text

Mobile

Mobile: key value cell with an actionable item
Mobile: key value cell with an actionable item
Mobile: key value cell with an actionable item specifications
Mobile: key value cell with an actionable item specifications
Mobile: key value cell with plain text
Mobile: key value cell with plain text
Mobile: key value cell with plain text specifications
Mobile: key value cell with plain text specifications


 Tablet

Tablet: key value cell with plain text
Tablet: key value cell with plain text
Tablet: key value cell with plain text specifications
Tablet: key value cell with plain text specifications


More Than Six-Lines of Value Text

Mobile

Mobile: key value cell with expandable content
Mobile: key value cell with expandable content
Mobile: key value cell with expandable content specifications
Mobile: key value cell with expandable content specifications


 Tablet

Tablet: key value cell with expandable content
Tablet: key value cell with expandable content
Tablet: key value cell with expandable content specifications
Tablet: key value cell with expandable content specifications


Two-Column Layout (Tablet Only)

Tablet: key value cells in two-column layout
Tablet: key value cells in two-column layout
Tablet: key value cells in two-column layout specifications
Tablet: key value cells in two-column layout specifications

Resources

Development: Key Value Cell

SAP Fiori for iOS: Key Value Cell