SAPUI5 – Know Your Controls : Input

Authored by

We use the input field for entering or editing text or numeric values in the application. The sap.m.Input provides an set of extended features like auto complete suggestions and value state to help enrich the user experience while entering any thing in the application.

Types of Input in SAPUI5 :

Date Time Input :

We can input an date or select an date using this control. This control has been deprecated now (from version 1.32.8), we can now use the sap.m.DatePicker for the same purpose.

Feed Input :

This input control can be used when the user has to enter an text which is to be used as a feed entry for posting.

Input :

The sap.m.Input is the most commonly used control for better UX form input fields. The control is used for short inputs like emails, phones, passwords, fields for assisted value selection. SAPUI5 provides a variety of Input types listed below :

  • Email
  • Number
  • Password
  • Tel
  • Text
  • Time
  • Url

Mask Input :

It is used when the user has to enter data in a certain format and in a fixed-width input (for example: date, time, phone number, credit card number, currency, IP address, MAC address, and others).

Step 1 : 

Step 2 : 

Step 3 : 

Multi Input :

This control, allows the user to enter multiple values, which are displayed as tokens. Features like auto complete suggestions or value help can be used along with multi input. The tokens in multi input can be displayed as single or multi line mode.

Step Input :

This control is used when the user requires to change the input by increment or decrement the value.

Other Input mechanisms in SAPUI5 :

Range Slider :

With this control, the user can select a range of values. This control represents a numerical interval and two handles to select a sub-range within it. The purpose of the control is to enable visual selection of sub-ranges within a given interval.

Rating Indicator :

Using an Rating indicator, we can input the rating by selecting the control. Additionally, we can also show the average of an entity using this control. Half values can be shown during average, but cannot be selected by the end user.

Search Field :

The search field is an input control which can be used when the user needs to find an specific search item. It is mostly used in lists and tables, for searching within the records.

What is input base ?

It is like an base class for input control in sap.m library. It contains all basic functionality for the input control. Properties like enabled, value state, placeholder, textDirection belong to the input base class.

What is input text format mode ?

The input text format mode is a class, used to define how the text is to be formatted when displaying in the output. The basic types are key, value, keyValue.