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 🙂