UI5 ListItem change DetailAndActive Icon

Question

I would like to change the "pen" icon of the ListItem of type DetailAndActive I found already following solution for it: UI5 StandardListItem DetailAndActive change Icon

But this once dosn't work with binding items from a model. I tried therefore to also create a custom list control.

sap.m.List.extend('my.List', {
metadata: {
    properties: {},
    aggregations: {
        items: {
            type: "my.StandardListItem",
            multiple: true,
            singularName: "item"
        }
    }
},
renderer:  {}
});

The binding itself is working. But the detailIcon dosn't change.

See sample at http://jsbin.com/kijisanepa/edit?js,output

Answer 1

In your excample you overwrite the "setDetailIcon" Method which was generated from SAP-Framework.

setDetailIcon: function(icon) {         
   console.log(icon)        
   this.DetailIconURI = sap.ui.core.IconPool.getIconURI(icon);  
},

so in the method you need to call

this.setProperty("detailIcon", icon);

This set the value of your property and trigger a rerender.

If you dont want to rerender your listItem, use

this.setProperty("detailIcon", icon, true);