CODEWITHSUNDEEP
javascriptsapui5
keshet
keshet

Reputation: 1826

Set icon depending on text value

I need to build a table consisting of 2 columns - the 1st is the name and the second is if the person was approved or not.

Here is JSON I get from the server:

{"records":[
{"approved":"Yes","name":"Doe John"},
{"approved":"No","name":"Doe Jane"}]}

I use the above JSON to set model to the table.

I need to show icon in the second column depending on the value of "approved" key: sap.ui.core.IconPool.getIconURI("accept") if approved and sap.ui.core.IconPool.getIconURI("decline") if otherwise.

Here is how I tried to define the table rows:

var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(data); //the above JSON response
oTable = sap.ui.getCore().byId("tableId");
oTable.setModel(oModel);
oTable.bindItems({
    path: "/records", 
    template: new sap.m.ColumnListItem({
        cells : [ 
        new sap.m.Text({text: "{name}"}), 
        new sap.ui.core.Icon({ //my problem starts here
            path: "approved",
            formatter: function(approved){
                if (approved==="Yes"){return new sap.ui.core.IconPool.getIconURI("accept");}
                else{return new sap.ui.core.IconPool.getIconURI("decline");};
            }
        }), 
        ]
    })
});

I cannot define the Icon column properly. The code above shows what I tried to do after searching for the answer for some time.

How can I make it work?

Upvotes: 1

Views: 3090

Answers (1)

Qualiture
Qualiture

Reputation: 4920

Almost good :-) You forgot to include for which field you want to apply the formatter (in this case, src)

Change 

    new sap.ui.core.Icon({
        path: "approved",
        formatter: function(approved){
            if (approved==="Yes"){return new sap.ui.core.IconPool.getIconURI("accept");}
            else{return new sap.ui.core.IconPool.getIconURI("decline");};
        }
    }),

to

    new sap.ui.core.Icon({
        src : {
            path: "approved",
            formatter: function(approved){
                if (approved==="Yes"){return new sap.ui.core.IconPool.getIconURI("accept");}
                else{return new sap.ui.core.IconPool.getIconURI("decline");};
            }
        }
    }),

Upvotes: 3

Related Questions