Posted on June 24, 2016July 15, 2017 by Abhishek Panigrahi

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

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 June 23, 2016July 15, 2017 by Abhishek Panigrahi

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

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 June 18, 2016August 12, 2019 by Abhishek Panigrahi

Two Page UI5 App : wireframe and development with Eclipse

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 🙂

Posted on June 16, 2016July 15, 2017 by Abhishek Panigrahi

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

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

Posted on June 14, 2016August 12, 2019 by Abhishek Panigrahi

Steps to Create a Simple SAPUI5 Application in Eclipse

Let’s start creating a simple UI5 app, based on the below mockup design:

Step 1. Open the existing project(myFirstApp) in eclipse. Goto demo.view.js, for the title property we have written as Hello World! before(blog link here), let’s change it to “Simple App” which is the title of our mock up design.

Step 2. Now we need to add an input text bar and a button, for doing so we need to go to the Open UI5 online library.Open the URL from here. Click on explored, now we can see all the components and elements of the application which we need to use.

Step 3. Now search for input keyword, then again drag down for the same(input) keyword,we need an input with a placeholder( i.e. inside the text field we should be able to see the name).Let’s check the first example(Input-Assisted).

Step 4. Now click on it–>goto the top right corner–>click on it to show the source code for this sample. Now it will show the code what we required as per the mockup design for the text field.

Step 5. Now let’s go to IDE ,eclipse and we will be doing bit correction inside the code,we will be creating an object of sap.m.Input. Here ‘o’ prefix to our variable refers to that it contains an object (similarly, we will be using ‘a’ if we were creating an array).Now we can pass the parameters inside it with syntax :


placeholder:"Enter Name",

Let’s add the submit button to the page.In our code just create a button object and include the text property(Submit) too.

SimpleApp5 — Create another variable called oPage,oBtn and we are going to simplify the object sap.m.Page & sap.m.Button respectively.

Step 6. Yes ! Just refresh the index.html page to see the updated output.

We have created our first application as per the Mockup diagram.We will learn more in our next post. Stay tuned,Thanks ! 🙂

Stay tuned and thanks for subscribing to our youtube channel ! 🙂