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 🙂

 

 

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

 

 

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.

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

 
 

 

In below steps we are going to cover, how to create your first hello world application with SAPUI5:

Step 1.Open the eclipse IDE–> click on File–>New–>other

 

 

Step 2.Now select SAPUI5 Application Development,under that select Application Project.

 

Step 3.Click on Next –> Enter the Project Name,which will be stored inside workspace folder.Workspace is the place where all the files,components related to the working project will be stored.Now select the library as sap.m .Next moving to the options section, we can see that Create an initial view is checked by default,which means that eclipse will automatically generate some controller & view for us.If we do not want the automated views & controllers then we can uncheck it.

 

Step 4.Click on next,Select Javascript, because it’s quite flexible to work on.Click on next, it will be showing all the list of libraries which will be added to the application.Next, click on finish to create the application.

 

Step 5.Great we have created a simple project structure !

Now we can see the three files(index.html,demo.controller.js & demo.view.js) which are by default opened, that are present in a folder named my first app(the name of our project).Under the folder web content, there is an index file(index.html) where all the action is happening, to run our application we will be running the index.html file.

 

Now we will edit the title inside the demo.view.js, by default it will be “title” we will change it to “Hello World!!”.Save the file by pressing ctrl+s.
Step 6.Finally, we will be running the index.html page to see the output of our first Hello World!! application.Right click on index.html–>Run As–>Select Web App Preview.As we are only related to HTML5,CSS related artifacts so its good to choose Web App Preview.

 

Step 7.Yay !

Here comes the output !

You can see that a new tab called index.html is opened with the text as Hello World!

 

Step 8.We can copy the URL & open it in chrome browser, we can see the same output on chrome as we have seen in eclipse.

 

 

You have successfully created your first UI5 application.

Thank You ! Stay tuned for more 🙂