SAPUI5 Programming for Beginners

This article will help you learn SAPUI5 step-by-step. Jump start SAPUI5 programming and create your first SAPUI5 application using SAP Web IDE.

In this application, we create a button and display a toast message on the press of button based on latest SAPUI5 coding standards. The preferred development IDE for building SAPUI5 applications is SAP Web IDE.

Log into SAP Web IDE. If you do not have a Web IDE account refer http://www.amarmn.com/sapui5-development-environment-setup/ to create one.

In Web IDE switch to development perspective by clicking on the icon “</>”. You will find a Workspace folder as shown in image below. We will create our first SAPUI5 example MyFirstApp.

This is hands-on SAPUI5 tutorial, hence we will build the application from scratch. Right-click Workspace and select New > Folder to create new project folder named MyFirstApp. Under MyFirstApp folder create folder webapp. Repeat the process to create all folders and files as displayed in the image below.

sapui5 development from scratch
sapui5 development from scratch

SAPUI5 MVC paradigm

SAPUI5 follows the Model View Controller paradigm. In the above folder structure, we created separate files for the controller and the view, thereby separating the UI code from the logic code. Following MVC gives an application with better readability, maintainability and extensibility.

SAPUI5 MVC paradigm
SAPUI5 MVC paradigm

SAPUI5 index.html

SAPUI5 index.html
SAPUI5 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MyFirstApp</title>
<script id="sap-ui-bootstrap"
	src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
	data-sap-ui-theme="sap_belize"
	data-sap-ui-libs="sap.m"
	data-sap-ui-resourceroots='{"Amarmn.MyFirstApp": "./"}'
	data-sap-ui-compatVersion="edge"
	data-sap-ui-oninit="module:Amarmn/MyFirstApp/index"
	data-sap-ui-async="true">
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>

Let’s understand the code of index.html file. I assume that you have basic knowledge of html. The <script> tag with id=”sap-ui-bootstrap” is responsible for loading and initializing SAPUI5 core.
The src attribute provides path to load SAPUI5 core library. Here we have used content delivery network CDN ‘https://sapui5.hana.ondemand.com/resources/sap-ui-core.js’. The Core facilitates loading of other libraries also specified in the data-sap-ui-libs attribute.
data-sap-ui-theme mentions the theme used in the application.
data-sap-ui-compatVersion=”edge” ensures to use latest functionality of SAPUI5
data-sap-ui-async=”true” is asynchronous loading of SAPUI5 resources for performance.
data-sap-ui-oninit=”module:Amarmn/MyFirstApp/index” defines a module that will be loaded initially. This attribute enhances app security as it helps avoid directly executable JavaScript code in index.html file.
data-sap-ui-resourceroots='{“Amarmn.MyFirstApp”: “./”}’ tells SAPUI5 core that the resources in the namespace are in the same folder as index.html file.

sapu5 index.js file

The index.js file will be called only when the resource loading is successful. The init event triggers when the bootstrapping is successful, and the index.js file is called in the callback function for the init event.

Paste the below piece of code inside index.js file. In the index.js file, we instantiate the XML view.

sap.ui.define([
	"sap/ui/core/mvc/XMLView"
], function (XMLView) {
	"use strict";

	XMLView.create({
		viewName: "Amarmn.MyFirstApp.view.App"
	}).then(function (oView) {
		oView.placeAt("content");
	});
});

Asynchronous Module Definition

sap.ui.define is for Asynchronous module definition AMD and facilitates asynchronous loading of defined libraries. The code inside function will only execute when all dependencies are loaded.

sap.ui.define Asynchronous Module Definition
sap.ui.define Asynchronous Module Definition

sap.ui.define holds the array of required modules with their fully qualified path. This Asynchronous Module Definition helps in asynchronous loading of required modules and also separates the module loading from code execution.

The resource objects are passed as parameters to the call back function.

sapui5 xml view

In index.js we instantiated the SAPUI5 XML view file.

The view.xml file holds UI of SAPUI5 application. Paste the below code in App.view.xml file.

<mvc:View	controllerName="Amarmn.MyFirstApp.controller.App"
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc">
	<Button
		text="Press the button"
		press=".onPress"/>
</mvc:View>

controllerName=”Amarmn.MyFirstApp.controller.App” is reference to the controller.

xmlns=”sap.m” is the default namespace where most of controls that we will use in our view resides. xmlns:mvc=”sap.ui.core.mvc” namespace is defined with alias mvc and refers to the core mvc.
Make sure that you define the namespace before using it in XML view.

SAPUI5 has a rich set of controls and in this example we have used the Button control and defined one property text and one event Press. The .onPress event handled function will be called when the button is pressed. The code of this event handler function is written in the Controller file.

sapui5 view

SAPUI5 support four View Types. XML, JS, HTML and JSON. It is recommended to use XML views. XML view ensures that you strictly follow MVC architecture and gives a better readable code.
Its very easy to sprinkle logic in a JS code, which leads to poor coding standards on the long run.
Also, all SAPUI5 references provided by SAP are in XML coding, so its better we also follow the same.

SAPUI5 view types
SAPUI5 view types

Code in App.Controller.js file

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/m/MessageToast"
], function (Controller, MessageToast) {
	"use strict";
	return Controller.extend("Amarmn.MyFirstApp.controller.App", {
 onPress : function () {
 MessageToast.show("My First SAPUI5 application");
		}
	});
});

As you can find from the above code, we have written onPress function here. It displays a toast message.

Controller file has the Asynchronous Module definition to load the modules which is then used in the controller.

Test the App to see the result

Click the Run button on the toolbar.

SAPUI5 Application Run button
SAPUI5 Application Run button
SAPUI5 button press
SAPUI5 Button Press

If you have worked till here, then this is a remarkable achievement. Above steps are as per latest SAPUI5 coding standards using SAP Web IDE.

Leave a Reply

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