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 🙂

 

 

 

In this Post, we will learn some of the popular UI5 components and how to use them in a form:

Step 1:- Now let us go to the c9 IDE from Here,where we have already setup a basic framework to create UI5 application like

So , we will create a folder named Form under that we will create the HTML file named as myApp.html
Now we will add the UI5 library inside our c9 IDE like mentioned below:-

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

Step 2:-We will write the UI5 code(the form) inside the script tag. Let’s go to the explorer and search for Simple Form. When it is opened we will search for its library(sap.ui.layout.form.SimpleForm), now click on the left side search image and search this library in the API Reference. Now select JsDoc Report – SAP UI development Toolkit for HTML5 – API Reference – sap.ui.layout.form.SimpleForm.

Step 3:-Now we have to add the simple form and add some properties like content which comprise of all the major things required in our form inside our code in cloud 9.

Inside the script tag let us add the Simple Form

<script>
var oMyForm = new sap.ui.layout.form.SimpleForm

also, the properties which we required. Now add all the components inside content required to design the form.

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.Bar({
contentRight:[new sap.m.Button({text:"Right Side"
})
]
}),

new sap.m.VBox({
items:[
new sap.m.Button({
text:"VBox Btn1"}),
new sap.m.Button({text: "VBox Btn2"
})
]
}),
new sap.m.HBox({
items:[
new sap.m.Button({
text:"HBox Btn1"
}),
new sap.m.Button({text:"HBox Btn2"})
]
})]
});     
</script>

In the Explored you might not find VBox and HBox, but we can find these in API reference and we are going to use  these to align components vertically and horizontally respectively:

Step 4:-Now if we go to the browser console and type

 
v = new sap.m.VBox()

&

v.getItems

which means items aggregation is possible inside the VBox so we can use inside our code similarly for HBox too which are already added to the above content.

Step 5:-We will place the oMyForm inside our content div

oMyForm.placeAt("content");

Lastly, click on preview & select Live Preview File

Ye ! We have designed successfully our Simple Form using the above simple steps.

Stay tuned for more 🙂

 

 

 

Let’s create a simple two page application as per the below-mentioned mockup design

 

First, we have to create a new project in eclipse. Below are the steps which we already saw in the previous blog post(here) :

Open eclipse, goto:New–>other–>Application Project–>Project Name(twoPageSimpleApp)–>select sap.m–>select create intial view–>Next–>give the name as first–>select javascript view–>Finish.

 

Now let’s open up the first view page, where we have a simple page returned in createContent part:

 return new sap.m.Page

instead of returning the first page directly, we can return an oPage variable to make the code more readable.

var oPage = new sap.m.PagePage

As we have already done a simple app example which you can find here, so we are not going to repeat the old steps .

As per our new mockup, we are going to add an evenListener button which will navigate to second page once we click on the submit button.

We can add the event listener with below code:

press:[oController.goToSecondPage,oController]

Now in the controller, we can add a custom controller function which should be called, when the submit button is pressed.Let’s go to first.controller.js and add an event listener function called with oEvt argument parameter.

goToSecondPage: function(oEvt){
 
 var oLabel = sap.ui.getCore().byId("idLabel");
 var oInputVal = sap.ui.getCore().byId("idInput").getValue();
 
 if (oInputVal !== undefined){
 oLabel.setText(oInputVal);
 app.to("idsecond1");
 }
 },

In the above code, we are trying to get the value of the idLabel which is an input field and then show it in the second page on the label.

As this application is going to contain two pages, so we are going to add one more view to the project.

 

For that, right click on the project–>New–>Other–>search for View–>Next–>give the name as second–>javascript–>Finish.

 

We will add a label to the second page

var oLabel = sap.m.Label("idLabel");

Also, we have to instantiate our second page. To do that let’s go to the index.html and add the changes as  mentioned below:

Now in the second page, we have to add a property called

showNavButton: true,

for oPage variable and also provide an actions listener function which will be executed when the back button is pressed.

navButtonPress:function(oEvt){app.back();},

 

This is how you create a  simple two page application in UI5 with back and forth navigation.

That’s all for now !

stay tuned for more posts 🙂