Now in this post we will see how to make the hard-coded tiles which we have already done in our previous post Here, to make it more generic.

Step1:- First let us create the  oData  , instead of id which we had given before replace it with icon:-

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"
}]

};

Step2:- Now let us remove this hard coding of the tiles which we have done in our previous post,just remove the below-mentioned code from the previous blog code:-

var oT1 = new sap.m.StandardTile({
 
title: "Dinosaur",
 
info:"Mountain",
 
icon:"sap-icon//sapui5"
 
})
 
var oT2 = new sap.m.StandardTile({
 
title: "Elephant",
 
info:"Forest",
 
icon:"sap-icon//general-leave-request"
 
})
 
var oT3 = new sap.m.StandardTile({
 
title: "Whale",
 
info:"Sea",
 
icon:"sap-icon//map-2"
 
})
 
var oT4 = new sap.m.StandardTile({
 
title: "Duck",
 
info:"Water",
 
icon:"sap-icon//travel-expense"
 

Next  let us create a standard tile template and pass the icon,title,info properties into it:-

var oTileTemp = new sap.m.StandardTile
({
icon: "{icon}",

title: "{Name}",
info: "{Place}"});

Now it’s not required to give any properties in the tile itself, so let us remove the below mentioned( tiles:[oT1,oT2,oT3,oT4])from our previous post:-

 var oTileContainer = new sap.m.TileContainer({ tiles:[ oT1, oT2, oT3, oT4 ] });  

Step3:- Now let us do the binding of the data and pass the types of aggregation that we will bind i.e tiles ,names(the path which contains an array of data) with the final path i.e oTileTemp:-

oTileContain.bindAggregation("tiles","/names",oTileTemp);

So here comes the proper output i.e without hard coding the data and getting the output by binding.

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