The main motto of styling &  theming in our application is responsiveness as well as  look & feel.

Here, we will design a form and will change the styling of the page by using the CSS as per the screenshot :-

Step1:- Open our existing previously developed application from Here

Open the application in eclipse and right click on the WebContent and create a new folder named it as CSS as mentioned below:-

Then right click on the created CSS folder and create a new file named as new.css :-

Next , let us open the index.html in HTML editor and add this piece of code(marked in yellow) to our existing code:-

<link rel="stylesheet" type = 'text/css' href='css/new.css'>

Step:2 Now if we want to add the CSS to that particular element then add this function [.addStyleClass(“inputCss” & .addStyleClass(“btnCss”)] respectively for the text field and the button to the code:-

createContent : function(oController) {
 var oSimpleInput = new sap.m.Input({
 
 placeholder:"Enter Name"
 
 }).addStyleClass("inputCss");
 
 var oBtn = new sap.m.Button({
 text:"Submit"
 }).addStyleClass("btnCss");

Now, let us add this CSS in our new.css file :-

.inputCss{
 
 width: 60% !important;
 padding-left: 30% !important;
 
}

.btnCss {
 
 width: 60% !important;
 padding-left: 30% !important;
 
}

Now to change the color of the button to red let us apply the mentioned code to the button class :-

.btnCss>.sapMBtnInner {
 background: #007cc0;
}

Step:3 Now we have got the exact output as below:-

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

 

 

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 🙂