Intro

Text input controls are used to request a text entry from users. They are normally found in Create and Edit views as a part of completing the task.

Types

Currently, there are two types of text inputs provided in the SAP Fiori for Android. Depending on the length of the text that users need to provide, there are two types of text input controls:

Single-line input: simple property form cell

Multi-line input: note form cell

Simple Property Form Cell

A simple property form cell consists of a label (property key) and text field. It is used for collecting short input. The label gives the user more context about the associated text entry. The label is always required, while the prompt text is optional. The prompt text should inform the user about the type or format of the value to be entered.

The height of the field is fixed, so the text will overflow to the left if the user types more than one line.

An optional help text can be used to provide additional information. When the input does not pass validation, an error message will appear. Do NOT have both help text and message at the same time, replace help text with error message.

Simple Property Form Cell with Scan

A secondary action can be added to a simple property form cell to provide input methods besides typing. Currently, we support getting a text value through bar code or QR code scan. A “scan” icon is used to indicate the feature. Helper text can be used to explain the feature to the users.

A scanner is launched when user taps on the “scan” icon. User may scan a barcode or QR code of the object to get the property specified in the cell. The value will be filled in the simple property cell. User may edit the value directly if needed.

Note Form Cell

The note form cell is best used for collecting long user input, such as a note, comment, or description.

The default state of the note form cell is the same as simple property cell, so it doesn’t take up too much screen space. When the user types more than one line, the text will wrap, and the cell expands to show the new line. As a result, content below this cell is pushed down. This is useful for showing long text on a limited screen.

To avoid taking over the whole screen, note form cell is limited to show a maximum 6 lines of text. After reaching the maximum height, the cell stops expanding and the text continues to wrap to a new line, but the content would scroll vertically inside the text field area.

An optional help text can be used to provide additional information. When the input does not pass validation, an error message will appear. Do NOT have both help text and message at the same time, replace help text with error message.

Specs

Simple Property Form Cell

Simple property form cells are responsive to screen size. The horizontal padding follows the keylines of the device.

Mobile

Below are specs for simple property form cells in idle (filled with user input), active, and error states.



Tablet

Below are specs for simple property form cells in idle (filled with user input), active, and error states.



Note Form Cell

Note form cells are responsive to screen size. The horizontal padding follows the keylines of the device.

Mobile

Below are specs for note form cells in idle (no user input), active, and error states.

Below are specs for note form cell at maximum height.



Tablet

Below are specs for note form cells in idle (no user input), active, and error states.

Below are specs for note form cell at maximum height.



Sample Element Alpha Hex
Input text #32363A
Idle label (property name) text
help text
#6A6D70
Placeholder text #74777A
Idle input line #89919A
Scan icon #0A6ED1
Active input line
Active label (property name) text
#0854A0
Error message text
Error state label and control
#BB0000
Success message #107E3E