Category: Developer

Posted on by

Creating a Basic List Using UI5 by 3 simple steps

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

Framework to create List Items

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

OutputList

Thank You ! Stay tuned for more. 🙂

 


 

Posted on by

Data Binding in SAPUI5 using Simple App by 6 simple steps

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

Folder

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 🙂

 

 


 

Posted on by

Designing a Simple Form using SAPUI5 Elements in 5 Simple steps

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

Simple Form Design 1
We will follow the API Reference for the syntaxes from Here and how those components can also be found Here

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

Folder

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 🙂

 

 


 

Posted on by

Two Page UI5 App : wireframe and development with Eclipse

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

Design
Mock up 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:

TwoPageApp2

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 🙂

 


 

Posted on by

Control flow in UI5 Application

In this post let’s look into a simple UI5 application control flow.

In an UI5 app the program execution starts from the index.html file. The very first action which is going to be performed here is the loading of the mentioned UI5 core library from the code

src="resources/sap-ui-core.js"

Similarly, in the line

 data-sap-ui-libs="sap.m"

we  are mentioning what are the library file we need for our application.

Lastly in

 data-sap-ui-theme="sap_bluecrystal"

we are mentioning what is the theme we require for our application.

Now let’s see the objects we have created for our application.

Here in the screenshot marked in line 1,2 refers to the two objects we have created for our application and for our View-Controller respectively.Then to add that view into the app(3) and then place the app into the content div(4).

obj

 

Content is the id of the div element which is mentioned in the index page i.e

 



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

and our entire application will be placed inside this div element.

Let’s go to the view & controller and see what are the objects present and how the control will pass through them.If we see in the view.demo.js we will notice that the first step here is the execution of the

 

getControllerName : function()

Once this function is executed then the program will get the name of the controller. After that it will execute the


createContent : function(oController)

At the end of this function, the page object will be returned which will contain all components like textbox,input box,submit button etc.Now before creating the content of the page there are few more functions which will be called from demo.controller.js which are

 

onInit: function()

followed by

 

onBeforeRendering: function()

i.e before the page is loaded. After that

 

onAfterRendering: function()

is called until you exit from the application.And on closing or exiting the app

onExit: function()

is called.

That’s all about simple code level control flow.

Stay tuned for more! 🙂