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

Anatomy

The structure of this cell type is simple. There is a key label at the top and a value below. Key value cells can be read only, which are displayed in standard text colors, or they may allow for an action such as a quick way to call or view an address. Key value cells that have an action must set the value text as tint color to indicate to the user there is an action.

Key Label

This is the label to describe the content.

Value

The data for a particular label. Values can be read only, editable or have a specific action associated with it (e.g. phone number or email address).

Adaptive Design

When it is used in full-regular width, you have the option to use a two column view displayed in regular. If you are using the two column, the cells will automatically stack as a single column when you switch to a compact width.

Specifications

Specific measurements for the different iOS size classes are shown in the image with compact width (1), regular width (2), regular full width (3), regular width with two columns (4), regular readable width (5).

Resources

Development: FUIKeyValueFormCell

SAP Fiori for Android: Key Value Cell