Notepad List Item Content Controls

Notepad controls can be used to create reusable controls in a structured way and can be used to use SAPUI5 controls in custom list items.

The following example assumes that you want to build a product list item. It shows an image of the product and product details. You can create a notepad control for the list item content and then add it to the CustomListItem as follows:

jQuery.sap.declare("my.control.ListItemContent");
sap.ui.core.Control.extend("my.control.ListItemContent", {

metadata: {
        properties : {
            "name": {type: "string", defaultValue: ""},
            "description": {type: "string", defaultValue: ""},
            "price": {type: "string", defaultValue: ""},
            "currency": {type: "string", defaultValue: ""},
            "image": {type: "string", defaultValue: ""}
        },
                events: {
            "myTap": {},
        },
    },

    init: function(){
        this._image = new sap.m.Image({src:"<myImageSrc>"}).addStyleClass("myImageCSS").setParent(this);
    },
    
    renderer: function(oRm, oControl) { 
        oRm.write("<div class='listItemCSS'");
        oRm.writeControlData(oControl);
        oRm.write(">");
            oRm.renderControl(oControl._image); 
            oRm.write("<div class='descCSS'>");
            oRm.writeEscaped(oControl.getDescription());
            oRm.write("</div>");        
                        
            oRm.write("<div class='priceCSS'>");
            oRm.writeEscaped(oControl.getPrice());
            oRm.write("</div>");

            oRm.write("<div class='curCSS'>");
            oRm.writeEscaped(oControl.getCurrency());
            oRm.write("</div>");
                            
            oRm.write("<div class='nameCSS'>");
            oRm.writeEscaped(oControl.getName());
            oRm.write("</div>");        
        oRm.write("</div>");        
    oRm.write("</div>");
    }
});

//example how to avoid rerendering of text, when the name property is changed
my.control.ListItemContent.prototype.setName = function(sText){
    this.setProperty("name", sText, true);
    return this;
};

//example how to use events
my.control.ListItemContent.prototype.ontap = function(){
        //your own tap logic
    this.fireMyTap({});
};

var oCustomListItem = new sap.m.CustomListItem({ content: [new my.control.ListItemContent({
    //usual control setup
})]});