Event means action . The most common types of event are Click, Tap, Drag, Press, Change, Focus, KeyPress  .

Let us refer to our previous project which we have done earlier here .

So, at the time of pressing the submit button, we will execute a particular function so that an event will get fired.

Here we will use the onChange event handler function.

Step1:-  Let us go to the API reference URL and search for sap.m.input and again search for the liveChange event from Here .

Now , let us go to our demo.view.js page and create a function over there with the name as liveChange :-

var oSimpleInput = new sap.m.Input({
liveChange:[oController.liveChange,oController],
placeholder:"Enter Name"
})

Step2:- Let us create a function in our demo.controller.js with the toast message creation function which will be displayed on top of the page the string that is typed by the user :-

liveChange: function(oEvt){

var sValue = oEvt.getParameter('value');
sap.m.MessageToast.show(sValue);
},

Step3:- So here comes the output below and the change event is fired when the user writes any text on the text box:

 

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

 

 

 

Let us do add more CSS styling to the existing project which we have already done before from Here to make it like the screenshot below:-

Step1:- Let us first open up the same project in eclipse IDE.

Next , let us create a CSS folder and create a CSS file named as style.css

and we will link this CSS file to the index page :-

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

Step2:- Now let us add the custom CSS class(.addStyleClass(“newForm”),(.addStyleClass(“hBoxForm”),(.addStyleClass(“vBoxForm”)))) to it :-

<script>

var oMyForm = new sap.ui.layout.form.SimpleForm({

content:[

new sap.m.Label({
text: "Simple Form"
}),
new sap.m.Input({
placeholder: "Simple Input",
}),
new sap.m.Button({
text:"Press me"
}),
new sap.m.RatingIndicator({
value:4.7
}),
new sap.m.TextArea({
value:"Awesome Text Area"
}),
new sap.m.DatePicker({

}),

new sap.ui.unified.FileUploader({}),

new sap.m.VBox({
items:[

new sap.m.Button({
text: "VBox Btn1"
}),
new sap.m.Button({
text: "VBox Btn2"
})

]

}).addStyleClass("vBoxForm"),


new sap.m.HBox({
items: [
new sap.m.Button({
text:"HBox Btn1",
type: "Emphasized"
}),
new sap.m.Button({
text:"HBox Btn2",
type: "Accept"
})

]
}).addStyleClass("hBoxForm"),


]

}).addStyleClass("newForm");
oMyForm.placeAt("content");

</script>

In our style.css file let us add the code below:-

.newForm{
 
width: 70% !important;
padding-left: 30% !important;
padding-top: 10% !important;
}


.hBoxForm{
padding-left: 30%;
}

.vBoxForm{
padding-left: 40%;
 
}

Now all of our CSS properties are working fine only the issue is with the vBox & hBox, so for that let us add the media query to it to get the responsiveness perfectly when we run the app on any devices.

 

@media screen and (max-width:600px){
.hBoxForm{
padding-left: 0%;
}

.vBoxForm{
padding-left: 18%;
 
}
 
}

Now let us change the color of the buttons HBox Btn1 & HBox Btn2  at the property level at the index.html page , which can be also found in the URL Here which contains Accept & Emphasized code  :-

new sap.m.HBox({
items: [
new sap.m.Button({
text:"HBox Btn1",
type: "Emphasized"
}),
new sap.m.Button({
text:"HBox Btn2"
// type: "Accept"
}).addStyleClass("newBtnGreen")

]
}).addStyleClass("hBoxForm"),


]

}).addStyleClass("newForm");
oMyForm.placeAt("content");




We can also do the color change of the buttons in CSS like inspecting on the button element and by doing hit and trial method in the browser

We will add a custom style class to the 2nd button :- 



 new sap.m.Button({ text:"HBox Btn2" }).addStyleClass("newBtnGreen")

 

in the CSS:-

 
.newBtnGreen>.sapMBtnInner{
 
 background: green;
}
} 

Step3:- Finally , here comes the final desired output as below:-

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

 

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 🙂