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:-

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:-

 

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

 

 

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 🙂

 

 

Tiles are the way of providing multiple features that are separated logically.

First of open the cloud 9 editor from here .

Step 1:- Create a basic framework like as mentioned in the image :-

Now add to the third party library

<script id="sap-ui-bootstrap" type="text/javascript" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table" />

Now let us create four tiles with the title,info & icon(which we have picked from the URL Here )as the properties:-

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"

})

Step2:- Let us now create a tile container and put all of the above tiles inside it.

var oTileContainer = new sap.m.TileContainer({

tiles:[

oT1,

oT2,

oT3,

oT4

]

})

Now let us add the tiles to the Page :-

var page = new sap.m.Page({

title: "Simple Tiles",
content: [
oTileContainer
]

});

Yee!! Now we can able to see the output as below with the four tiles which we create just now.

That’s all for now. Stay tuned for more posts 🙂

 

 

Open the existing project in eclipse which we have done in the previous blog from here.

Step1:- Open the index.html page in HTML editor & add some more ui5 library(sap.ui.commons & sap.ui.table) into it.

 data-sap-ui-libs="sap.m,sap.ui.commons,sap.ui.table" 

Now go to the table.view.js & change the column type & add the label,template property with the contents of the column over there as :-

var oCol1 = new sap.ui.table.Column({

label : new sap.m.Label({
text : "Name"
}),
template : new sap.m.Text({

text : "{Name}"
})

});
var oCol2 = new sap.ui.table.Column({

label : new sap.m.Label({
text : "Name"
}),
template : new sap.m.Text({

text : "{Name}"
})

});
var oCol3 = new sap.ui.table.Column({

label : new sap.m.Label({
text : "Name"
}),
template : new sap.m.Text({

text : "{Name}"
})

});

Now let us change the table type too  :-

var oTable = new sap.ui.table.Table({
title : "Simple Animal List",
columns : [

oCol1, oCol2, oCol3 ]

});

Next, we can use another variation of binding without defining the property path  i.e

oTable.bindRows("/names")

Step2:- Now, here comes the output which we can notice is somewhat different as compared to the previous post i.e sap.m.table .

As per your requirement(functionality,device type on which the app will be running) choose which type of table(sap.m.table OR sap.ui.table) you need to implement.

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

 

 

The table is the most used element in UI5 library.We will use the table in almost all of our development work.

 

Step1:- Open the eclipse IDE File–>New–>Other–>UI5 application project–>project name–>name.In the table.view.js change the code as below :-

createContent : function(oController) {
var oPage = new sap.m.Page({
title: "Title",
content: [
 
]
});
return oPage;
}

Step2:- Now let us create the data after the createContent

var oData = {
"names": [{

id: 1,
Name: "Dinosaurus",
Place: "Mountain"
}, {

id: 2,
Name: "Elephant",
Place: "Forest"
}, {
id: 3,
Name: "Whale",
Place: "Sea"
}, {
id: 4,
Name: "Duck",
Place: "Water"
},{
id: 5,
Name: "Monkey",
Place: "Tree"
}]

};

Let us create the model:-

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

Now let us create three columns and pass the headers inside it with the label :-

var oCol1 = new sap.m.Column({

 header : new sap.m.Label({text:"Name"})

 });
 var oCol2 = new sap.m.Column({

 header : new sap.m.Label({text:"Place"})

 });
 var oCol3 = new sap.m.Column({

 header : new sap.m.Label({text:"Id"})

 });

Now let us create the table & inside it we will pass the title & the columns :-

var oTable = new sap.m.Table({

title:"Simple Animal List",
columns:[
oCol1,
oCol2,
oCol3
]

})

Now let us create the view of the template and we will provide the cells & the text content of the each row:-

var oTemp = new sap.m.ColumnListItem({
cells:[
 
new sap.m.Text({
text:"{Name}"
 
}),
new sap.m.Text({
text:"{Place}"
 
}),
new sap.m.Text({
text:"{id}"
 
}),
]
 
})

Next, let us set the binding & mention the path where our data is present & also the template :-

var oPage = new sap.m.Page({
title : "Title",
content : [
oTable
]
});

Now let us do the coding of the view part in the controller too as we are following the MVC architecture(table.controller.js in my case) in the onInit function i.e when the controller is initialized:-

onInit: function() {

var oData = {
 "names" : [ {

id : 1,
 Name : "Dinosaurus",
 Place : "Mountain"
 }, {

id : 2,
 Name : "Elephant",
 Place : "Forest"
 }, {
 id : 3,
 Name : "Whale",
 Place : "Sea"
 }, {
 id : 4,
 Name : "Duck",
 Place : "Water"
 }, {
 id : 5,
 Name : "Monkey",
 Place : "Tree"
 } ]

};
 
 },

Now let us set the global model:-

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

Step3:- Here comes the final output:-

That’s all,stay tuned for more 🙂