SAP Fiori App on HANA XS/SAP Cloud Platform/Mobile Devices, Consuming SAP Business One HANA Service Layer

Objective
Utilize SAP tools to ease development efforts in packaging & deploying SAP UI5 Applications on Mobile/SAP Cloud Platform/Hana Platform.
Show a very simple Loosely-Coupled end-to-end Hybrid App solution utilizing SAP Business One Service Layer

Duration
90 minutes (not including setting up prerequisites)

Difficulty Level
Advanced

Challenge
Setting up various plugins & IDEs & Connecting the dots.

 

What you will achieve?

Hybrid Application deployed on mobile devices (iOS / Android), packaged by SAP Hybrid Application Toolkit (SAP HAT)

Consuming SAP Business One Service Layer (RESTful Web API), ONLY available on SAP Business One version for HANA

Developing using SAP HANA XS Engine (XS Application)

 

Overview:

Here’s a quick overview of methods, tools & technologies involved.

 

 

 Prerequisites

The following prerequisites are required.

1. SAP Cloud Platform Trial Account

Required for utilizing Web Ide for downloading SAP UI5 templates and deploying application

2. SAP HANA Studio or SAP HANA Web-based Development Workbench

Required for XS Applications Development

 

3. SAP B1 Hana Service Layer

Required for performing backend operations and pushing data to front end.

Make sure you’ve installed Service Layer as part of the SAP Business One HANA Server Components installation. Once you’ve installed, you may check the following URLs & configuration files to verify that your Service Layer is setup successfully.

 

Navigate to your SAP Business One HANA Service Layer API endpoint (either HTTP/HTTPS):

https://<hana_ip>:50000/b1s/v1
http://<hana_ip>:50001/b1s/v1

 

4. SAP B1 Hana Database

For this demo shown, we will be using a demo company database SBODEMOUS

5. SAP HAT

Required for packaging UI Applications for mobile device (Android/IOS)

Refer https://blogs.sap.com/2015/07/13/how-to-install-hybrid-application-toolkit-hat-on-windows-part-1-of-3/ blog for getting HAT Setup

 

After setting up successfully, you can run the Hybrid App Toolkit on your local machine before “hooking” it to SAP Cloud Platform’s Web IDE.

 

This is an important step required later.

 

 

Use-Case

For this demonstration, we will be using specific use case for view Purchase Request created by a user.

 

Start Building Your Application

In the Back-end section, you’ll learn how to implement control flow logic using SAP HANA XS & Service Layer. It will be heavy (more manual hands-on) but it will benefit you a lot after understanding the mechanics.

In the Front-end section, you’ll learn how to exploit SAP Web IDE UI5 App Template, pointing to your OData-point and deploying it into your device directly or local server (exporting) for further development.

 

Option 1: SAP HANA Extended Application Services (XS)

Step 1: Created New project from Template by selecting UI5 application template.

Step 2: Right click on project click on Export to export the application.

Step 3: Open Hana Studio and go to window -> Perspective -> Open Perspective and Choose SAP            HANA DEVELOPMENT

Step 4: To create a new project Click on File -> New and select XS Project

Step 5: Extract the project exported from IDE and copy all application folders and files to the XS application in HANA DEVELOPMENT STUDIO.

Step 6: Add xsaccess and .xssqlcc to the project.

1. public.xssqlcc:

This is a SQL-connection configuration file specifies the details of a connection to the database that enables the execution of SQL statements from inside a server-side (XS) JavaScript application with credentials that are different to the credentials of the requesting user.

In short, you want to expose the application without any login prompt > anonymous_connection.

New > Other > SAP HANA > Application Development > SQL Configuration File > public.xssqlcc

{

“description” : “Public Open Connection”

}

After adding the script Activate the Project to apply the changes.

In your Chrome Browser > Go To > http://<hana_ip>:8000/sap/hana/xs/admin/

Navigate to public.xssqlcc > Edit the details as accordingly (Username & Password)

2. xsaccess:

SAP HANA App Access File – Basically you can define authorization & authentication configuration in this file. It is the entry point of every XS App. Without this file + .xsapp, your App will not fire up in the browser / device.

Make sure the value of anonymous_connection is pointing to the correct location of your .xssqlcc file. And of course .xssqlcc has to be activated on the server first, otherwise by activating your .xsaccess file, it will give you an error.

By default, you should already have this.

New > Other > SAP HANA > Application Development > XS Application Access File > .xsaccess

{

“anonymous_connection”: “PR_Demo1.1::public”,

“exposed” : true,

“authentication” : null

}

After adding the script Activate the Project to apply the changes.

Step 7: To connect application through SAP B1 service layer we need to establish the session.

For this we take reference of API of Service Layer. https://XXXXXXXX:50000 at this page there will be API Reference link click on it and Search for Login. Expand Login and click on post that will tell you request format with payload.

Step 8: To consume any entity in SAPUI5 we need to create ajax call on Login entity with post operation. This will establish a session with SAP B1 using credentials and database. (I have only shared the CRUD operation code as sample not complete application code)

$.ajax({

url: “https://XXXXXXXX:50000/b1s/v1/Login”,

xhrFields: {

withCredentials: true

},

data: jData,

type: “POST”,

dataType : “json”,

async:false,

success: function( json ) {

},

error: function( xhr, status, errorThrown ) {

var msg;

if(xhr.status===401){

msg = “Invalid Username/Password”

}

else{

var a = xhr.responseText;

var b = JSON.parse(a);

msg = b.error.message.value;

}

sap.m.MessageToast.show(msg);

},

complete: function( xhr, status ) {

}

});

After completing the changes Run the project

Step 9: After Login Post we can perform CRUD operation on all the entities listed in API reference.

$.ajax({

url: “https://XXXXXX:50000/b1s/v1/PurchaseRequests”,

xhrFields: {

withCredentials:true

},

type: “GET”,

dataType : “json”,

async:false,

success: function( json ) {

result = json.value;

},

error: function( xhr, status, errorThrown ) {

console.log( “Error: ” + errorThrown );

},

complete: function( xhr, status ) {

}

});

Output array will be the purchase requests which we can mount to UI tables

Option 2: SAP Cloud Platform Web IDE

Step 1: Login into SCP with your Account Details

Step 2: Copy the modified Hana Studio project in SAP WebIDE template project

Step 3: Right click and select Deploy option either SAP Cloud Platform

Step 4: For mobile device  select HAT à Prepare Hybrid Project

Step 5: After deployment complete go to deployed project path and as below and open command prompt. Then run command “cordova build android” to package the application

 

Step 6: To package the application for IOS run same process on Mac Book or any Mac System. During packaging some additional steps you have to follow as creating provisional profile for application to allow it package