SAPUI5 Getting Started (SAP HANA)

Aus MattWiki

This page contains basic knowledge on how to start with SAPUI5 development on SAP HANA development stack and also how the SAPUI5 application looks like.

SAPUI5 Micro Service

SAPUI5 libraries can be used from the public SAPUI5 libraries.

Since SAP HANA 2.0 SPS 03 XS Advanced is capable of providing a micro service itself for local consumption.

A local micro service can be created either in XS Advanced Cockpit at

  • HANAExpress -> development space -> Services -> Service Marketplace -> sapui5_sb

or via command line with:

xs create-service sapui5_sb sapui5-1.52 openSAPHANA_00-ui5

The service has to be added in:

Path File Function
/ mta.yaml Create new resource and add it to modules
/web/ xs-app.json Use replace capability of app router to insert UI5 service URL dynamically
/web/ index.html Fetch bootstrap from resource by utilizing variable

Listings:

  1. https://github.com/mattxdev/opensap-hana7/blob/master/mta.yaml
  2. https://github.com/mattxdev/opensap-hana7/blob/master/web/xs-app.json
  3. https://github.com/mattxdev/opensap-hana7/blob/master/web/resources/index.html

Text Bundles

Path File Function
/web/resources/i18n/ messagebundle.properties Default language message bundle
/web/resources/i18n/ messagebundle_de.properties Language DE message bundle

Add code:

/* Language Resource Loader */
jQuery.sap.require("jquery.sap.resources");
var sLocale = sap.ui.getCore().getConfiguration().getLanguage();
var oBundle = jQuery.sap.resources({url: "./i18n/messagebundle.properties", locale: sLocale});

// create the button instance
var myButton = new sap.m.Button("btn");

// set properties, e.g. the text (there is also a shorter way of setting several properties)
// myButton.setText("Hello World!");
myButton.setText(oBundle.getText("helloworld"));

Listing: https://github.com/mattxdev/opensap-hana7/blob/master/web/resources/index.html

SAPUI5 App Structure

Path File Function
/web/resources/odataView/ index.html
  • Load SAPUI5 bootstrap
  • Load error handler
  • Load startup.js for session info, unified shell
/web/resources/odataView/ Component.js
  • Represents the real start of the application
  • Initialize SAPUI5 component
  • Define manifest
  • Create instance of JSON configuration model
  • Load first view
/web/resources/odataView/ manifest.json

Specifies:

  • libraries and versions
  • device types and supported themes
  • root view
  • dependencies
  • odata models