Intermediate
SAPUI5 User Interface
January 5, 2021
Created by
September 6, 2016
15 min.
SAP HANA XS Advanced, Creating a SAPUI5 user interface to consume XSJS and oData services
You will learn
In this tutorial, you will create a SAPUI5 user interface, including the view and their controllers, to call xsjs and OData services. Be sure to have completed SAP HANA XS Advanced - Consume the OData service in a basic HTML5 module as this tutorial adds the SAPUI5 service to the project and properly wires it into the web module. With this step done we can focus on creating new SAPUI5 interfaces which leverage this work.
Prerequisites
- This tutorial is designed for SAP HANA on premise and SAP HANA, express edition. It is not designed for SAP HANA Cloud.
- Tutorials: Creating an OData Service with Create Operation and XSJS Exit and SAP HANA XS Advanced - Consume the OData service in a basic HTML5 module
Step 1: Create a new HTML file
Return to your web module and create a new folder named resources/odataView with an HTML file called index.html
Here is the complete coding for the new page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link type="image/x-icon" href="/images/favicon.ico" rel="shortcut icon">
<link type="image/x-icon" href="/images/favicon.ico" rel="icon">
<!-- <script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" -->
<script id="sap-ui-bootstrap" src="{{{sapui5_sb.url}}}/resources/sap-ui-core.js"
data-sap-ui-theme="sap_belize_plus"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async"
data-sap-ui-language="en"
data-sap-ui-oninit="module:common/index"
data-sap-ui-resourceroots='{
"common": "../common",
"root": "./",
"opensap.odataTest": "./"}'
data-sap-ui-frameOptions="trusted">
</script>
<script type="text/javascript" src="/common/error.js" ></script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content">
</body>
</html>
Step 2: Create `csrf.js`, `error.js`, and `index.js`
There are three utility JavaScript libraries you reference in this HTML page:
- common/csrf.js for the handling of CSRF tokens
- common/error.js for producing error messages
- common/index.js for bootstrapping the shell
Create a common folder in resources and add these three files.
Here is the coding of csrf.js :
/*eslint no-console: 0, no-unused-vars: 0, no-use-before-define: 0, no-redeclare: 0*/
$.ajaxSetup({
beforeSend: function(xhr,settings) {
if (settings && settings.hasOwnProperty("type")
&& settings.type !== "GET"){
var token = getCSRFToken();
xhr.setRequestHeader("X-CSRF-Token", token);
}
},
complete: function(xhr,textStatus) {
var loginPage = xhr.getResponseHeader("x-sap-login-page");
if (loginPage) {
location.href = loginPage + "?x-sap-origin-location=" + encodeURIComponent(window.location.pathname);
}
}
});
function getCSRFToken() {
var token = null;
$.ajax({
url: "/xsjs/csrf.xsjs",
type: "GET",
async: false,
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRF-Token", "Fetch");
},
complete: function(xhr) {
token = xhr.getResponseHeader("X-CSRF-Token");
}
});
return token;
}
And here is the code for error.js:
/*eslint no-console: 0, no-unused-vars: 0, no-use-before-define: 0, no-redeclare: 0*/
/*eslint-env es6 */
function onErrorCall(jqXHR, textStatus, errorThrown) {
sap.ui.require(["sap/ui/core/Core", "sap/m/MessageBox"], function (Core, MessageBox) {
if (typeof jqXHR.status === "undefined") {
var errorRes = JSON.parse(jqXHR.response.body);
MessageBox.show(
errorRes.error.innererror.errordetail.DETAIL, {
icon: MessageBox.Icon.ERROR,
title: "Service Call Error",
actions: [MessageBox.Action.OK],
styleClass: "sapUiSizeCompact"
});
} else {
if (jqXHR.status === 500 || jqXHR.status === 400) {
MessageBox.show(jqXHR.responseText, {
icon: MessageBox.Icon.ERROR,
title: "Service Call Error",
actions: [MessageBox.Action.OK],
styleClass: "sapUiSizeCompact"
});
return;
} else {
MessageBox.show(jqXHR.statusText, {
icon: MessageBox.Icon.ERROR,
title: "Service Call Error",
actions: [MessageBox.Action.OK],
styleClass: "sapUiSizeCompact"
});
return;
}
}
});
}
function onODataError(oError) {
sap.ui.require(["sap/m/MessageBox"], (MessageBox) => {
if (oError.statusCode === 500 || oError.statusCode === 400 || oError.statusCode === "500" || oError.statusCode === "400") {
var errorRes = JSON.parse(oError.responseText);
if (!errorRes.error.innererror) {
MessageBox.alert(errorRes.error.message.value);
} else {
if (!errorRes.error.innererror.message) {
MessageBox.alert(errorRes.error.innererror.toString());
} else {
MessageBox.alert(errorRes.error.innererror.message);
}
}
return;
} else {
MessageBox.alert(oError.response.statusText);
return;
}
});
}
function oDataFailed(oControlEvent) {
sap.ui.require(["sap/m/MessageBox"], (MessageBox) => {
MessageBox.show("Bad Entity Definition", {
icon: MessageBox.Icon.ERROR,
title: "OData Service Call Error",
actions: [MessageBox.Action.OK],
styleClass: "sapUiSizeCompact"
});
});
return;
}
Finally check that your common folder also has a file named index.js. You likely created this in a previous tutorial. If not, please create it now with the following content:
/*eslint no-console: 0, no-unused-vars: 0, no-use-before-define: 0, no-redeclare: 0, no-shadow:0*/
/*eslint-env es6 */
sap.ui.require(["sap/ui/core/Core", "sap/ui/core/Component"], (oCore, Component) => {
function onLoadSession(myJSON) {
try {
var result = JSON.parse(myJSON);
if (result.session.length > 0) {
if (result.session[0].familyName !== "") {
return result.session[0].givenName + " " + result.session[0].familyName;
} else {
return result.session[0].UserName;
}
}
} catch (e) {
return "";
}
return "";
}
function getSessionInfo() {
var aUrl = "/node/getSessionInfo";
return onLoadSession(
jQuery.ajax({
url: aUrl,
method: "GET",
dataType: "json",
async: false
}).responseText);
}
Component.create({
id: "comp",
name: "root",
manifestFirst: true,
async: true
}).then((oComp) => {
sap.ui.require(["sap/ui/core/ComponentContainer"], (ComponentContainer) => {
let oCont = new ComponentContainer({
component: oComp,
height: "100%"
});
let username = "Test User";
oCore.loadLibrary("sap.ui.unified", {
async: true
}).then(() => {
let oShell = new sap.ui.unified.Shell({
id: "myShell",
icon: "/images/sap_18.png",
headEndItems: new sap.ui.unified.ShellHeadItem({
icon: "sap-icon://log",
tooltip: "Logoff",
press: () => {
window.location.href = "/my/logout";
}
}),
user: new sap.ui.unified.ShellHeadUserItem({
image: "sap-icon://person-placeholder",
username: username
}),
content: oCont
}).placeAt("content");
});
});
});
});
Step 3: Create optional images folder
Step 4: Create `Component.js`
Step 5: Create manifest.json file
Step 6: Create `App.view.xml`
Create a folder called view inside odataView. This is where you will hold all of your views and controllers. Create the root view named App.view.xml.
Here is the complete coding of the App.view.xml file. It creates the shell control and the overall flow of your page, but then defers the design of the header and table areas to an XML fragment we will create next.
<mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" controllerName="opensap.odataTest.controller.App"
class="sapUiSizeCompact" height="100%">
<Page id="mPage" title="{i18n>appTitle}" titleLevel="H1">
<content>
<IconTabBar id="iBar" class="iconTabBarPaddingTop" upperCase="true" expanded="true">
<items>
<IconTabFilter id="tabFilter1" text="{i18n>H1}">
<core:Fragment fragmentName="opensap.odataTest.view.MRead" type="XML"/>
</IconTabFilter>
</items>
</IconTabBar>
</content>
</Page>
</mvc:View>
Step 7: Create fragments
Step 8: Create a controller for the main view
Step 9: Create a reusable Controller
Step 10: Add model helpers
We can also have reusable functions like formatters, sorters, and grouping functions. We have prepared these model support tools for you. You can download the model.zip file from Github here: https://github.com/SAP-samples/hana-xsa-opensap-hana7/raw/snippets_2.4.0/ex4/model.zip.
Please import this file into the odataView/model folder.
Step 11: Text strings
Step 12: Run and test the web module
So now run the web module. It will need to rebuild and redeploy all the newly added artifacts.
In the running tab, you should see the index.html from earlier. Adjust the URL and add /odataView.
Test the Execute Service button
Navigate tutorial steps
-
Step 1: Create a new HTML file
-
Step 2: Create `csrf.js`, `error.js`, and `index.js`
-
Step 3: Create optional images folder
-
Step 4: Create `Component.js`
-
Step 5: Create manifest.json file
-
Step 6: Create `App.view.xml`
-
Step 7: Create fragments
-
Step 8: Create a controller for the main view
-
Step 9: Create a reusable Controller
-
Step 10: Add model helpers
-
Step 11: Text strings
-
Step 12: Run and test the web module
- Back to Top