Using HTML Controls for Creating Custom List Items

Adding an HTML control is an easy way to create simple CustomListItems.

Context

Caution This approach only works when you use JavaScript for the UI. When using a declarative model, such as XML Views, use an on-the-fly control, see Developing UI5 Controls in JavaScript.

You can write your HTML either directly, you can use a model and data binding and then use a formatter to integrate it in the HTML. The following example assumes a model with first name, last name, age and city properties.

Procedure

Create a CustomListItem, add an HTML control to the list items content and then write a formatter as follows:

var myCustomListItem = new sap.m.CustomListItem({
  content: new sap.ui.core.HTML({
    content: { parts: [
                          {path: "firstName"},
                          {path: "lastName"},
                          {path: "age"},
                          {path: "city"}
                      ],
            formatter: function(firstName, lastName, age, city) {
      return "<div><div class='myStyleClass'>Name: " + firstName + " " + lastName + 
                 "</div><div>Age: " + age +"</div><div>City: " + city +"</div></div>";  
    }
    }}),
  type : 'Navigation' //({type} if provided by the model)
  press : myTapEvent
});