Posted on by

UI5 Data Binding Using Factory Functions in 3 simple steps

Factory function will give us more control in which data binding is happening.

Step1:- Let us open the cloud9 editor from here. Then create a basic framework as mentioned:-

Data Binding

Let us create the  oData as done :-


 var oData = {
 "names": [{

 icon: "sap-icon://sap-ui5",
 Name: "Dinosaurus",
 Place: "Mountain"
 }, {

 icon: "sap-icon://general-leave-request",
 Name: "Elephant",
 Place: "Forest"
 }, {
 icon: "sap-icon://map-2",
 Name: "Whale",
 Place: "Sea"
 }, {
 icon: "sap-icon://travel-expense",
 Name: "Duck",
 Place: "Water"
 }

 ]

 };
var oModel = new sap.ui.model.json.JSONModel(oData);

sap.ui.getCore().setModel(oModel);

Step2:-Now create a list and pass the header text as the properties.


var oList = new sap.m.List({

headerText: "Animals"
});

Next , create the factory function with the parameters as sId, oContext & bind aggregation and let us pass the arguments into it, we have also created the variables for sValue, sDesc1, sDesc2 to get the name of the animal,to check if they are still roaming or extinct.Then, let us check the value of the name if its Dinosaur then it should return the  description as sDesc2 in all other cases it will return the other animal names with the description as sDesc1:-


oList.bindAggregation(

"items",

"/names",

function(sId, oContext){
var sValue = oContext.getProperty("Name");

var sDesc1 = "Are still roaming around";

var sDesc2 = "Are Extinct";

if (sValue === "Dinosaurus"){

return new sap.m.StandardListItem({

title: sValue,
description: sDesc2

});

}

else {

return new sap.m.StandardListItem({

title: sValue,

description: sDesc1

});

}

}

);

Step3:- Finally, here comes the output:-

Bind Output

 

That’s all for now, stay tuned for more 🙂