SAP UI5 Tutorial Part-2 : Developing Simple SAPUI5 Application

This Blog will provide step-by-Step guide for developing simple SAPUI5 Application.

In case you have not configured development environment please follow blog On How to SetUp SAP UI5

Follow below steps for developing simple SAPUI5 Application.

Step 1: Open Eclipse IDE and then click New —> Other —> SAPUI5 Application Development —> Application Project.

New_App_IDE_1

Provide Project Name and click Next.

On next screen give the View Name and select development paradigm. You can select paradigm in which you our comfortable.

By default following 3 files will be created.

  • Index.html,
  • MyView.View
  • MyView.Controller.

Below is code of Index.html

Step 2: SAP UI5 Application is implemented in JavaScript, so for loading UI5, its bootstrap just needs to be included with a <script> tag. The last two attributes select the visual design to apply initially (other choices would be “sap_hcb” or “sap_platinum”) and the UI5 control library/libraries to use (“sap.ui.dev” would be another one).

Note : Make sure the URL points to a SAPUI5 installation.

<script id=”sap-ui-bootstrap”

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

        data-sap-ui-theme=”sap_goldreflection”

        data-sap-ui-libs=”sap.ui.commons”>

</script>

 

As a minor detail, the <body> should have a certain CSS class, so the page background and some other styles are properly set

<body class=“sapUiBody”>

two meta-Tags at the beginning of the <head>

  • first to ensure that Internet Explorer 8+ uses its most-standards-compliant rendering mode.

<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />

  • second to let all browsers treat the file as UTF-8 encoded (assuming that you use this encoding when editing/saving the file)

<meta http-equiv=”Content-Type” content=“text/html;charset=UTF-8″/>

Step 3:  The Index.html has the reference to the View that need to be called. So we can start our application development in the view.

Example: Create a button in the View and then handle the action in the controller.

Create a button and attach an event to it. Place the button in the content container as shown below

Step 4:. Create the method for the event described in the button in controller file and give an alert message when the button is clicked.

Application Preview

Right Click on the Index.html file and Run As -> Web APP Preview

Deploying to Tomcat Server

There are multiple ways you can deploy the SAP UI5 application to your local tomcat server.

  1. You can configure the Tomcat server in your eclipse and run the application on server. (or)
  2. Do an Export of the project as war file and place it inside the /webapps folder in Tomcat installation directory. Stop and start the tomcat server.

Run the application URL as http://localhost:8080/SimpleApplication

One thought to “SAP UI5 Tutorial Part-2 : Developing Simple SAPUI5 Application”

  1. A very good tutorial for developing a simple sapui5 application

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.