UI5: Dynamically build ListItems from JSON with different Icons

Question

I have this simple XML View:

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
        controllerName="listicons.list" xmlns:html="http://www.w3.org/1999/xhtml">
    <Page title="Title">
        <content>
            <List id="test-list"></List>
        </content>
    </Page>
</core:View>

In my controller, I call a method to build list items onInit. First of all set some data:

var data = {
        "products": [
              {
                  "prodName": "Apple",
                  "prodCountry": "Netherlands",
                  "price": "normal"
              },
              {
                  "prodName": "Orange",
                  "prodCountry": "Spain",
                  "price": "extra"
              },
              {
                  "prodName": "Strawberry",
                  "prodCountry": "Poland",
                  "price": "normal"
              }
          ]
        };
// create a Model with this data and attach it to the view
            var model = new sap.ui.model.json.JSONModel();
            model.setData(data);
            this.getView().setModel(model);
            var list = this.getView().byId("test-list");

Then I build the list and bind the items to it:

// bind the List items to the data collection
            list.bindItems({
                path : "/products", 
                sorter : new sap.ui.model.Sorter("prodName"),
                //template : listTmpl
                template : new sap.m.StandardListItem({
                    title: "{prodName}",
                    description: "{prodCountry}"
                })
            }); 

After I built the list and is alread rendered, I look after which items have an extra price and set an icon for them:

jQuery.each(list.getItems(), function(i, obj) {
                if(obj.mProperties.price == "extra") {
                    obj.setIcon("sap-icon://flag"); 
                }
            });

So. Everything works fine. But I am not happy with my solution, because I'd rather like to manipulate the data BEFORE rendering the list. I tried to build a list template directly before binding the items to the list and then use this template like:

var listTmpl = jQuery.each(data.products, function(i, a) {
            var lI = new sap.m.StandardListItem({
                title: "{prodName}",
                description: "{prodCountry}" 
            });
            if(a.price == "extra") {
                lI.setIcon("sap-icon://flag");
            }
            return lI;
        });

But then my list is not shown and I got an error in the console, saying

Missing template or factory function for aggregation items of Element sap.m.List ...

Does anyone have an idea how to improve my sol.? THX a lot..

Answer 1

bind the value for price to a formatter-function. so you can create the icons dynamically from the value

list.bindItems({
    path : "/products", 
    sorter : new sap.ui.model.Sorter("prodName"),
    template : new sap.m.StandardListItem({
        title: "{prodName}",
        description: "{prodCountry}",
        /* bind items to factory-function */
        icon: {
            path: "price",
            formatter: function(price) {
                if (price == "extra") {
                    return "sap-icon://flag"; 
                }
            }
        }
    })
}); 

ps: i did not test this, but it should work like this. if you receive errors just comment.