SAPUI5 – Know Your Controls : List

Authored by

In SAPUI5, the list control is an  container, which can contain any list item. These list items contain homogenous data. For responsive usage, we use the List control in the sap.m.List library.

Declaration of a List :

In JS :-

In XML :-

Advantages of using lists to display data :

Lists provide an variety of uses, some of the advantages of using lists are listed below.

  • They show formatted and uniform data.
  • We can customize the view as per our requirement.
  • Binding with data model is easy.
  • List provides an easy method to sort, group and filter items.
List Item :

An list item refers to any specific row in the list, which contains data. There are various types of list items available in SAPUI5. One list can contain only one type of list item. The list items types mostly used are as follows:

  • Action List Item
  • Column List Item
  • Feed List Item
  • Notification List Item
  • Object List Item
  • Standard List Item
  • Input List Item
  • Display List Item
  • Custom List Item
Action List Item :

This list item is specifically used where on click of the list item, the user wishes to execute some action.

Column List Item :

This List item is used where the data has to be represented in the form of a column i.e. especially within a table. It can be used within the sap.m.Table control.

Feed List Item :

This list item is used when the user needs to be shown an structured data format.

Notification List Item :

This control can be used when it is required to show an notification to the user. It contains an variety of properties and aggregrations which an be used to customize the view of the notifications to the user.

Object List Item :

It is use when the user needs to be shown an summary of the objects in the form of a list. We have the additional features of markers, flag and favourite. Also, we can add additional status and attributes in an object list item.

In JS :

In XML :

Standard List Item :

It is just an standard interface providing common options such as title, image, description.

In XML :

In JS:

Input List Item :

In this, each list item consists of an label and an input field. It is mostly used in phones as form to input data.

Display List Item :

It is just used for showing name value pairs.

Custom List Item :

Using this list item, we can customize an list item as per the requirement i.e. the developer can use any screen elements in any layout within the list item.

What is ListItemBase ?

It is like an super class, which is inherited by all types of the list items. It contains all the base features (properties, associations, events and methods) which are to be used by all the list items. Some common features which we use in all our lists, which are from this super class are : type (the list type), selected, press (method).

What is ListType ?

It is also an base class, which is used to define the visual indication and behavior of all the list elements. The commonly used list types are : Active, Detail, Inactive and Navigation.

What is the Growing property in a List ?

When we set the growing property of the list to true, it fetched only a certain amount of data from the server instead of all the data. It provides a loading mechanism that requests data from the model in a lazy way. Due to this, we can fetch data from the server only when it is necessary.

What is NotificationListGroup ?

When we have many notifications (notificationListItem) and we want to group the similar ones and display in the UI, we can use this control. The NotificationListBase is the abstract base class for sap.m.NotificationListItem and sap.m.NotificationListGroup.

What is ListBase ?

The sap.m.ListBase control provides a base functionality of the sap.m.List and sap.m.Table controls. It handles the Selection, deletion, unread states and inset styles and many more properties for the Lists and Table.