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 🙂

 

 

In this Post we will see how to create a very simple List as shown below :-

 

Step1:- Goto the cloud9 IDE from Here . Then create a basic framework for the List as mentioned below to  start coding

Inside the script tag let us add the core library to load it into our application

<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">
</script>

Step2:- Let us create an object  oPage inside the tag along with we will also pass the parameters

var oPage = new sap.m.Page({

title: "List Page",
content: [
oList
]

});

Create the app object :-

var oApp = sap.m.App({

pages: [oPage]

}).placeAt("content");

Now create a div of the content inside the body

<div id="content">
</div>

 

Next, let us create the oData object and oModel for the list along with we will also pass the key parameters to them as Name and Place

var oData = {
Name:"Dinosaur",
Place: "Mountain"
};

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

Now we will create the list item and do the data binding in title and description.

var oItem1 = new sap.m.StandardListItem({

title: "{/Name}",
description:"{/Place}"
})

Step3:- Lastly we will create a List  and will put the standard list item inside the list

var oList = new sap.m.List({

headerText: "Animals",
items: [
oItem1
]
});

Ye ! Here comes the output :-

Thank You ! Stay tuned for more. 🙂

 

 

Step 1:- First of we will create a simple framework to start coding. Open C9 IDE here we will create a framework inside the IDE

Step 2:-Now let’s add the UI5 library inside the script tag

<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.layout,sap.ui.commons,sap.ui.demokit></script>

In the body we will have one class i.e sapUiBody which we will place inside the

<body class='sapUiBody'></body>

body tag.

Step3:-Now inside the script tag let’s create two labels and inside the text property, we will give the path to pick our data i.e key1 & key2 respectively which we have already defined in our JSON data model.

var oLabel1 = new sap.m.Label({ text: "{/key1}" });

var oLabel2 = new sap.m.Label({ text: "{/key2}" });

Step4:-Now lets us create a JSON data with the key as “key1” & “key2” with the value as Welcome to Data Binding & Happy Coding ! respectively.

 

var oData = {
 "key1": "Welcome to Data Binding",
  "key2": "Happy Coding !"
 };

Next, let us create a JSON data model

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

The above  syntax to create a JSON model .
Step5:-Next  add the oData to our model

 

oModel.setData(oData);

Now let us assign the model to our labels

 

oLabel1.setModel(oModel);
oLabel2.setModel(oModel);

Step6:-Now we will place these labels in our HTML page

 

oLabel1.placeAt("content1")
oLabel2.placeAt("content2")

So placeAt is the function which will place the elements in our HTML page.
Here the content is a div which we will create to display both the labels separately by creating two div.

 

<div id="content1">;
</div>
<div id="content2">
</div>

We are now ready to see the final output, just goto Preview and click on Live Preview File, there comes the output !
That’s all for now. Stay tuned for more 🙂