SAPUI5 Getting Started (SAP HANA)

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.

The repository for the examples can be found here: https://github.com/mattxdev/opensap-hana7

SAPUI5 App Structure

Dynamic odataView App

We create an app odataView. All of its files will be located inside

/web/resources/odataView/

Content:

Relative Path	File	Function
./	index.html	Load SAPUI5 bootstrap Load error handler Load startup.js for session info, unified shell
./	Component.js	Represents the real start of the application Initialize SAPUI5 component Define manifest Create instance of JSON configuration model Load first view
./	manifest.json	Specifies: libraries and versions device types and supported themes data sources root view dependencies odata models (Binding data source to model) text bundles
./i18n/	i18n_en.properties	text bundles for language EN
./view/	App.view.xml	Contains: Shell control and overall flow of the page Fragment for embedded areas
./view/	MRead.fragment.xml	Contains: Input fields Fragment for header area Fragment for item area
./view/	MTableHead.fragment.xml	SmartTable control for display of Purchase Order Header returned by XSODATA service
./view/	MTableItem.fragment.xml	SmartTable control for display of Purchase Order Items
./controller/	App.controller.js	Contains methods: onInit: Model binding to table callMultiService: Handles call of odata service to dynamically create columns in table controls callExcel: Calls download of PO data in Excel format
./controller/	Base.controller.js	Base controllers can contain functions and share them to multiple app controllers.
./model/	formatter.js, grouper.js, GroupSortState.js, models.js	Model subdirectory contains reusable functions like formatters

Basic OData App Skeleton from SAP

Source: https://github.com/SAP-samples/hana-xsa-opensap-hana7/blob/snippets_2.3.2/ex4/odataBasic.zip

The file contains all necessary subfolders and should be imported in your project into this module:

/web/resources

This will create a subfolder for the skeleton app named:

/web/resources/odataBasic

Tasks to be done in order to bind an OData service to the SmartTable defined wihtin the App.view in the skeleton app:

File	Section	Task
manifest.json	"sap.app"	Specify data source Define model
manifest.json	"models"	Create model Bind model to data source defined above
controller/App.controller.js	onInit	Set model created above to oTable table control Specify visible fields for SmartTable

Text Bundles

Text bundles are best located in a subfolder of:

/web/resources/

Contents:

Relative Path	File	Function
./i18n/	messagebundle.properties	Default language message bundle
./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

Local 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

How to Implement

Dynamic Table Field List Based on OData Service Metadata

This example is based on the odataView App from above.

Visible table columns can eiter be hard coded in controller/App.controller.js in OnInit with oTable.setInitiallyVisibleFields:

onInit: function() {
  this.getView().addStyleClass("sapUiSizeCompact"); // make everything inside this View appear in Compact mode
  var oConfig = this.getOwnerComponent().getModel("config");
  var userName = oConfig.getProperty("/UserName");
  var bpModel = this.getOwnerComponent().getModel("bpModel");
  var oTable = this.getView().byId("bpTable");
		
  oTable.setModel(bpModel);
  oTable.setEntitySet("BusinessPartners");
  oTable.setInitiallyVisibleFields("PARTNERID,COMPANYNAME,PARTNERROLE");
},

Or they can be made visible dynamically by looking them up in the meta data of the service at dataServices.schema[0].entityType[0].property:

function fnLoadMetadata() {
  try {
    oTable.setModel(bpModel);
    oTable.setEntitySet("BusinessPartners");
    var oMeta = bpModel.getServiceMetadata();
    var headerFields = "";
    for (var i = 0; i < oMeta.dataServices.schema[0].entityType[0].property.length; i++) {
      var property = oMeta.dataServices.schema[0].entityType[0].property[i];
      headerFields += property.name + ",";
  	 }
  	 oTable.setInitiallyVisibleFields(headerFields);
  } catch (e) {
  	 console.log(e.toString());
  }
} 
bpModel.attachMetadataLoaded(bpModel, function() {
  fnLoadMetadata();
});
fnLoadMetadata();

Hint: If your service metadata has multiple tables then you probably have to loop through the different entityType or even schema.

OData CRUD with Input List and SmartTable

Based on the odataView app from above the following has to be changed:

(The results are implemented in the odataCRUD app.

Model in manifest.json has to be changed:

    "userModel": {
      "dataSource": "userService",
      "type": "sap.ui.model.odata.v2.ODataModel",
      "preload": true,
      "settings": { 
        "useBatch": false,
        "json": true,
        "defaultBindingMode": "TwoWay",
        "defaultUpdateMethod": "PUT"
      }
    },  

Notably is the defaultBindingMode TwoWay. This means that changes, which happen in the odata Service, are automatically reflected in bound UI controls and vice versa. When changes happen in the UI controls, they are automatically reflected in the model and sent to the server.

New event handlers in app controller for the buttons:

• callUserService -> for create operation -> calls the oModel.create function
• callUserUpdate -> for update operation -> calls the oModel.submitChanges function