UI Components Table View Cells Key Value Table View Cell

Updated: March 1, 2024

Key Value Table View Cell

FUIKeyValueTableViewCell

Intro

The key value table view cell is an uneditable table view cell that fits inside the table view container. It is ideal for displaying simple sets of data or information to the user.

Key value table view cell in compact (left) and regular-readable width (right)
Key value table view cell in compact (left) and regular-readable width (right)

Usage

Do
  • Display only a key label and value.
  • Convey uneditable information to a user.
Don't
  • Don’t display an image.
  • Don’t use as an editable field (i.e., text inputs).

Anatomy

A. Key Label

This is the label to describe the content.

B. Value

The data for a particular label. Values are read-only and uneditable but may be actionable.

Actionable values have a specific action associated with the text. 

Key value table view cell anatomy
Key value table view cell anatomy

Behavior and Interaction

Text Wrapping

The value text may wrap as needed to display all the information.

Actionable Value

By default, a key value table view cell is read-only and a user can’t edit or interact with it. However, in certain use cases, a value may be actionable.

Actionable values have a specific action associated with the text. For example, a phone number may open the native keypad, or an address may open the maps application.

Key value table view cells that have an actionable value must set the value text to tint color to indicate that there is an associated action. 

An actionable value is still uneditable.

Tapping on the phone number (left) opens the keypad (right)
Tapping on the phone number (left) opens the keypad (right)

Adaptive Design

Key value table view cell may be used in compact, regular, regular-readable, and regular full-width. Regular width may also be used in an optional two-column display.

Key value table view cell in compact (left), regular-readable (middle), and regular full-width (right)
Key value table view cell in compact (left), regular-readable (middle), and regular full-width (right)

Resources

Development: FUIKeyValueTableViewCell

SAP Fiori for Android: Key Value Cell