Motivation

The motivation of this tutorial blog is to help (not limited to) SAP Business One Partners to:

  • Tackle Customer’s pain points by Developing Apps quickly
  • Build responsive SAP Fiori (SAPUI5) App > Role-based & Decomposed App Perspective
  • Move away from (only) developing Traditional B1 add-ons to (more) Modern Loosely-Coupled App
  • Improved User Experience with Mobile-first approach by using Enterprise-ready UX (SAPUI5)
  • Achieve quick Hybrid App development and initial to market, ready to use

 

Here’s a minute of the outcome:

A simple app idea to get you quickly started. Refer here for more information about the App Use-Case.

 

Contents

1. What are You getting into?

2. What will You achieve?

3. Overview Diagram of Tools & Technologies

4. Prerequisites

5. Use Case

6. How do You Get Started?

7. Back-end: SAP HANA XS & SAP Business One HANA Service Layer

8. Front-end: SAP Cloud Platform Web IDE + Hybrid App Toolkit + HANA Studio + Xcode

9. Tools & Components Compatibility Versions

10. Next Steps

 

 

What are You getting into?

back to top

Objective
Utilize SAP tools to ease development efforts in packaging & deploying SAPUI5 applications on Mobile.
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 will You achieve?

back to top

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 Artifacts (XSJS / XSODATA)

 

Overview Diagram

back to top

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

Prerequisites

back to top

The following prerequisites are required.

Strictly follow the documentation on the provided links to install & achieve the following steps.

The screenshots are mainly for your reference.

SAP Cloud Platform Trial Account
… to utilize their services – SAP Web IDE & other Cloud Components.

 

SAP HANA Tools (Eclipse Plugin) or SAP HANA Studio or SAP HANA Web-based Development Workbench: Editor
… to support your SAP HANA XS Development with Application / Database artifacts. Either of the tools mentioned above will be fine, depends on your preference.

SAP HANA Web-based Development Workbench: Editor

Chrome Browser > https://:8000/sap/hana/ide/editor

 

SAPUI5 – UI Development Toolkit for HTML5 (Eclipse Plugin)
… to develop modern enterprise-ready web apps, responsive to all devices and running on the browser of your choice.

Install SAP HANA Tools Plugin in Eclipse.

 

SAP Cloud Platform, Web IDE Personal Edition (Optional)
… can be installed and used to develop SAP Fiori Apps on your local workstation. Mainly to use the Layout Editor, which gives you a GUI to edit the UI components instead of code level. However, compared to SAP Cloud Platform’s Web IDE, it is less comprehensive.

 

After installing successfully, you should be able to run SAP Web IDE on your local machine.

 

It is very similar to SAP Cloud Platform Web IDE.

 

SAP Mobile Platform (SMP) SDK
… to build and deploy mobile apps that keep people connected. This industry-leading mobile application development platform solves mobility challenges, supports mobile apps that fit your business-to-enterprise (B2E) or business-to-consumer (B2C) use case, and helps balance device user requirements with enterprise requirements.

 

SAP Web IDE Hybrid App Toolkit add-on / SAP HAT Direct Download
… enables developers to develop hybrid mobile apps in SAP Web IDE. The apps can be previewed and deployed to mobile emulator and device in local development environment via Hybrid App Toolkit Connector.

Step-by-Step setting up SAP HAT.

 

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.

 

In SAP Cloud Platform, you could test the connection to your SAP HAT. Next, you’ll be ready to package & deploy an app from SCP Web IDE into your device directly / packaged iOS or Android Project files locally.

SCP > Services > SAP Web IDE > Preferences > Plugins

 

Plugins > Enable Hybrid App Toolkit > Logout Browser Session & Relogin into SCP Web IDE

 

Now you should be able to see Hybrid Application Toolkit as one of the items in Preferences.

 

SAP Business One HANA Service Layer

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 & config 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://:50000/b1s/v1
https://:50001/b1s/v1

 

Checking Service Layer’s version in your HANA server.

 

SAP Business One HANA Demo Database

For this demo shown, you will be using a demo company database – “SBODEMOSG”.

 

Specific IDEs (Xcode / Android Studio)

iOS app, you’d need Xcode.

Android app, you’d need Android Studio.

 

Use-Case

back to top

You may apply the following Design Thinking methodology to develop a specific Use-Case for your SAP Fiori Application.

For this demonstration, you will be using a specific Use-Case for a specific Persona.

This is just a simple app example and of course, you may feel free to elaborate further once you’re done.

Persona

Procurement Officer (end-customer)

Pain Point

  • Lack of stock visibility
  • Manual calls / emails
  • No discounted rates due to order placed on non-optimal period (peak season)
  • …

Feature

  • View on Stock Availability
  • Place Sales Order
  • …

Application Overview

It will be a B2B Application.
Business could give this App for end-customer to view on specific stock availability & authorize the customer to create a direct-sales order into Business’ SAP Business One ERP System.

Stock Availability App for Customer’s Procurement Officer

 

Now, you will get started with the specific steps to get this App deployed. In the next section, you will be. provided with screenshots & code snippets for your reference to get this deployed from SAP Cloud Platform into your local environment.

Make sure you’ve completed the prerequisites section above before proceeding on.

 

How do You Get Started?

back to top

In the following sections, you will see in details how you can develop & deploy a Loosely-Coupled Hybrid App, consuming SAP Business One HANA Service Layer, packaged by SAP HAT & SAP Mobile Platform SDK into your device.

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 Fiori App Template, pointing to your OData-point and deploying it into your device directly or local server (exporting) for further development.

 

Back-end: SAP HANA XS & SAP Business One HANA Service Layer

back to top

Starting with the back-end topic, you will be creating a SAP HANA XS Project first and next, you will implement some of the XS Artifacts relating to SAP Business One HANA Server.

Basically, you will prepare the data level & semantic layer to contain the data, ready to push to the Front-end.

For those who are new to SAP HANA XS, you may refer to:

Tutorial to get started on how to create & deploy a SAP HANA XS Project.
Follow the first 3 tutorials in the link.

 

SAP HANA Extended Application Services (XS)

Create a New SAP HANA XS Project.

a. In SAP HANA Studio or Eclipse (with SAP HANA Tools installed), under Project Explorer > File > New > Other…

 

b. Select SAP HANA > Application Development > XS Project

 

c. Fill in Project Name (trial.stock) – this will be the namespace for the demo I’ll be showing.

 

d. Tick “Share project in SAP Repository” – your project will be shared in your HANA server repository, thus the project name (namespace) is very important.

 

e. Click Next > Repository Package (Project Name – namespace) will be in there. And by default, it will already navigate your project to be deployed in the root level of your workspace.

 

f. Thus, Untick “Add Project Folder as Subpackage”.

 

g. Click Next > Tick both “XS Application Access” & “XS Application Descriptor”.

 

h. Click Finish.

 

i. [IMPORTANT] Right Click Project > Team > Activate

This is to push the local files into your remote HANA server and make it active.

Make sure you activate the files frequently as some of the following steps might have a dependency of some files. e.g. .xsaccess pointing to .xssqlcc file. Thus your .xssqlcc file has to be active first.

 

This should be the output of your project, and of course, feel free to add additional XS components into your project to look like the screenshot.

In later parts, you will learn about the usage of each file & how to add them.

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" }

In your Chrome Browser > Go To > http://: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": "trial.stock::public", "exposed" : true, "authentication" : null }

 

3. B1SL.xshttpdest:

HTTP Destination Config Syntax File – You can define specific destination host details in this file so that the information won’t be revealed publicly.

For this scenario, you will be defining your SAP Business One HANA Service Layer HTTP destination in this file.

NOTE: This demo you won’t be using HTTPS (SSL not setup for the demo environment). It will be HTTP instead. This might pose some security issues, thus it is not recommended for production systems.

Please edit the following code snippet to your HANA environment. e.g. host & port might differ from your environment.

Using an Internal IP Address is fine here.

By default, 50000 (HTTPS), 50001-50004 (HTTP).

New > Other > SAP HANA > Application Development > XS HTTP Destination Configuration > B1SL.xshttpdest

description = "B1 SL HTTP Connection"; host = "172.31.31.64"; port = 50001; proxyType = none; proxyHost = ""; proxyPort = 0; authType = none; useSSL = false; timeout = 0;​

 

4. ITEM.calculationview:

Graphical Calculation View (Semantic Layer) – Here is a semantic view to wrap your Item data. Suitable for quick View Operations.

For this scenario, you will pull information from SAP Business One HANA Demo Database.

– Item Master Data: OITM & ITM1
– Item Group: OITB

New > Other > SAP HANA > Database Development > Modeler > Calculation View > ITEM.calculationview

– Fill in the details.
– Make sure Data Category is “DIMENSION“.

 

Add a Join Node > Select the OITM & ITM1 Tables into the Join & Select the Fields as listed below.Make sure you follow the properties too.

Make sure you follow the properties too.

 

Add another Join Node & connect Join_1 with OITB table.

 

Add a Projection Node to Add a Filter on the Price List.

SAP Business One manages a number of price list per item. Thus for simplicity of our app, you will just choose the base price list of the item = 1.

 

Add another Projection Node to Project the required fields to the Semantics.

 

Lastly, Select ItemCode as the Key.

 

Do not forget to Activate your Calculation View.

Right Click Calculation View > Team > Activate

 

5. stock.xsodata:

OData Service Definition – this is used to expose your data (direct data table / semantic view) in a commonly-used OData container.

NOTE: In this scenario, you will wrap your Calculation View (Semantic Layer) to expose your SAP Business One Demo Data, strictly for READ-ONLY purposes.

For other operations (CREATE / UPDATE / DELETE), you will be using SAP Business One Service Layer to manage those transactions, this is to prevent any data integrity issues.

New > Other > SAP HANA > Application Development > XS OData File > stock.xsodata

Here, you will point to your Calculation View.

service { "trial.stock::ITEM" as "Item" keys ("ItemCode"); }

 

SAP Business One HANA Service Layer

It is a ready-to-consume Web Service (RESTful API) for SAP Business One HANA, design as an Application Server that exposes System & Business Objects as a Service via HTTP Protocol.

To learn more about SAP Business One Service Layer, visit the following blogs:

B1 Service Layer: Sample Payload of CRUD and How to find help by Yatsea Li

B1 Service Layer: Entity CRUD – Update by Andy Bai

How to call SAP Business One Service Layer from HANA XS by Maria Trinidad MARTINEZ GEA

 

For your Stock Availability App scenario, you will be using the following API calls from Service Layer:

Login – POST /b1s/v1/Login

Stock Availability Check – GET /b1s/v1/Items(‘’)/ItemWarehouseInfoCollection

Sales Order – POST /b1s/v1/Orders

 

You may use RESTful API Clients such as Postman or Advanced Rest Client to test your Service Layer Calls.

 

Those API calls will be elaborated in the Front-end section later.

For now, you will be implementing a server-side proxy to handle those calls easily. In future, you can reuse this file for other usages.

 

6. B1SL_Proxy.xsjs:

XS JavaScript – In the nutshell, it serves as a proxy between your front-end to service layer that defines the business logic required to serve client requests for data via HTTP.

New > Other > SAP HANA > Application Development > XS JavaScript File > B1SL_Proxy.xsjs

/** * Reference: * SAP Business One Solution Architect Team * https://github.com/B1SA * * */ function callServiceLayer(path, method, body, sessionID, routeID) { try { $.trace.debug("Service Layer Proxy -- callServiceLayer (path: " + path + ", method: " + method + ", body: " + body + ", sessionID: " + sessionID + ", routeID: " + routeID + ")"); /** * The following destination is defined in your .xshttpdest file to locate your Service Layer URL * For this example, we're using HTTP instead of HTTPS (Environment for SSL has not been setup yet) * * */ var destination = $.net.http.readDestination("trial.stock", "B1SL"); var client = new $.net.http.Client(); var header = ""; if (method === $.net.http.PATCH) { method = $.net.http.POST; header = "X-HTTP-Method-Override: PATCH"; } var req = new $.net.http.Request(method, path); if (header !== "") { req.headers.set("X-HTTP-Method-Override", "PATCH"); } if (body) { req.setBody(body); } if (sessionID) { req.cookies.set("B1SESSION", sessionID); } if (routeID) { req.cookies.set("ROUTEID", routeID); } var response = client.request(req,destination).getResponse(); var myCookies = [], myHeader = [], myBody = null; for (var c in response.cookies) { myCookies.push(response.cookies[c]); } for (var h in response.headers) { myHeader.push(response.headers[h]); } if (response.body) try { myBody = JSON.parse(response.body.asString()); } catch (e) { myBody = response.body.asString(); } $.response.contentType = "application/json"; $.response.status = response.status; $.response.setBody(JSON.stringify({ "status": response.status, "cookies": myCookies, "headers": myHeader, "body": myBody })); $.trace.debug("Service Layer Proxy -- callServiceLayer Response status: " + $.response.status); } catch (e) { $.trace.warning("Service Layer Proxy -- callServiceLayer Exception: " + e.message); $.response.contentType = "application/json"; $.response.setBody(JSON.stringify({ "error": e.message })); } } var B1SLAddress = "/b1s/v1/"; var aCmd = $.request.parameters.get('cmd'); var actionURI = $.request.parameters.get('actionUri'); var sessionID = $.request.parameters.get('sessionID'); var routeID = $.request.parameters.get('routeID'); var filter = $.request.parameters.get('filter'); var path = B1SLAddress + actionURI; var body = null; if ($.request.body) { body = $.request.body.asString(); } $.trace.debug("B1SL_Proxy cmd: " + aCmd); switch (aCmd) { case 'login': path = B1SLAddress + "Login"; /** * [POTENTIAL SECURITY BREACH] * Login credentials should be stored safely somewhere * * */ var loginInfo = {}; loginInfo.UserName = "manager"; loginInfo.Password = "manager"; loginInfo.CompanyDB = "SBODEMOSG"; body = JSON.stringify(loginInfo); callServiceLayer(path, $.net.http.POST, body, sessionID, routeID); break; case 'Add': callServiceLayer(path, $.net.http.POST, body, sessionID, routeID); break; case 'Update': callServiceLayer(path, $.net.http.PATCH, body, sessionID, routeID); break; case 'Delete': callServiceLayer(path, $.net.http.DEL, body, sessionID, routeID); break; case 'Get': callServiceLayer(path, $.net.http.GET, body, sessionID, routeID); break; case 'Action': callServiceLayer(path, $.net.http.POST, body, sessionID, routeID); break; default: $.trace.warning("Service Layer Proxy -- callServiceLayer Exception: " + e.message); $.response.status = $.net.http.INTERNAL_SERVER_ERROR; $.response.contentType = "application/json"; $.response.setBody(JSON.stringify({ "Unknown command": aCmd })); break; }​

 

With that, you’re done preparing the Back-end. Now, test the XSOData point in the Browser.

In your Chrome Browser, Navigate to http://:8000/trial/stock/stock.xsodata/Item

This will be required later.

 

 

Front-end: SAP Cloud Platform Web IDE + Hybrid App Toolkit + HANA Studio + Xcode / Android Studio

back to top

Now, this is the interesting part where you will use SCP + SAP Web IDE + SAP HAT + SMP SDK. In this section, you will develop a Fiori App with step-by-step template, pointing to your XSOData Point setup in the previous section.

In SAP Cloud Platform, you will setup a Destination with your XSOData and consume it immediately via SAP Web IDE from an App perspective. It will be interesting to see how quick an App then will be developed automatedly.

SAP Cloud Platform Web IDE

1. Login into SCP with your Trial Account > Click on Destination.

 

2. Add a New Destination of your XSOData point (Use your Public IP Address or Domain Name)
e.g. https://://8000/trial/stock/stock.xsodata

Enter the following information.

Take note of the Description, it will be used later.

Add the following Additional Properties:

  • WebIDEEnabled: true
  • WebIDESystem:
  • WebIDEUsage: odata_gen

 

3. SCP > Services > SAP Web IDE.

 

4. You should see the following Home page of SAP Web IDE.

Click on New Project from Template.

 

5. Select All Categories  > SAPUI5 Master Detail Kapsel Application.

 

6. Project Name: StockQuery

 

7. Select Service URL > Select the Destination (Setup earlier) > Enter “/” > Click Test.

 

8. Enter & Select the following information. Take note of your Project Namespace.

Project Namespace: .stock

 

9. Click Next > Finish.

 

10. Expand your Project. Workspace > StockQuery > view > Right Click Detail.view.xml > Open With Layout Editor.

 

11. Drag Button Control into Footer Bar & Edit the Icon & Text > Check.

 

12. Drag another Button Control & Edit the Icon & Text >  Order.

 

13. Click Run.

 

14. Preview your App.

 

Now, let’s package & deploy it with SAP Hybrid App Toolkit (HAT).

Make sure you’ve completed Setting up SAP HAT in the Prerequisites section of this blog. Ensure that your SAP HAT is up & running.

15. SAP Web IDE > Tools > Preferences.

 

Plugins > Enable Hybrid App Toolkit > Logout Browser Session & Relogin into SCP Web IDE

 

16. Preferences > Hybrid Application Toolkit > Click Test Connection.

You should see a success message of, “The connection is available. The HAT Connector version is v1.28.2.”

 

17. Right Click on Project > StockQuery > Project Settings.

 

18. Fill in the required information & select the Build Options & Platforms.

For this demo, you’ll be using iOS.

Click Save.

 

19. Right Click Project > StockQuery > Run > Run on Local Device/Simulator > iOS Device.

 

20. Your StockQuery App is currently being built, packaged & deployed into your local machine by SAP HAT.

 

21. The Cordova Project is Ready.

 

22. Ignore Harmless Error in iOS Device Code Signing.

 

23. You should be able to see the Hybrid App is being packaged locally in the following structure.

 

At this point, you’ve successfully packaged the Hybrid App into your local machine via SAP HAT.

Next steps, you will modify the packaged Hybrid App with SAP HANA Studio or Eclipse & add in SAP Business One HANA Service Layer API calls, to complete the App Features.

Eclipse (with SAP HANA Tools plugin installed) or SAP HANA Studio

In this scenario, you will edit the packaged Fiori (SAPUI5) Project files to include the following functions:

  • Global Variable
  • Login
  • Check Stock Availability
  • Place Sales Order

1. Open SAP HANA Studio or Eclipse (see prerequisite section on how to install SAP HANA Tools in Eclipse)

2. File > New Project > SAPUI5 Application Development > Application Project

 

3. Project Name: StockQuery

Uncheck “Create an Initial View“.

 

4. Default Project Structure will be created in your Project Explorer.

 

5. In your System / Windows Explorer, navigate to the Hybrid App location.

SAPHybrid > StockQuery > hybrid > platforms > ios > www

Copy All Files & Folders into your newly SAPUI5 Project in SAP HANA Studio / Eclipse.

 

6. Paste Copied Files & Folders into WebContent.

 

7. You should achieve the following results.

 

8. Share Project into your SAP HANA Server Repository.

Right Click StockQuery > Team > Share Project…

 

9. Select SAP HANA Repository.

 

10. Click Browse… Select your SAP HANA XS Project > “trial.stock”

Tick “Add Project Folder as Subpackage“.

Click Finish.

 

11. StockQuery > Team > Activate.

Push (Activate) the updated files into your SAP HANA Server.

 

12. (OPTIONAL) You might face with this error on “Unsupported encoding ISO…”

Click Ok.

 

13. Under Problems Tab / Windows, locate the error.

Right Click > Quick Fix.

 

14. Select the following components to fix encoding.

Click Finish.

 

15. Activate Project.

 

16. StockQuery > WebContent > Component.js

Open Component.js.

Edit the serviceUrl to your XSOData Point (Public IP Address), as you will be accessing from your mobile app.

The following template is auto-generated by SCP Web IDE, thus such changes are required.

 

17. StockQuery > WebContent > index.html

Open index.html.

Modify SAPUI5 library src to the following remote SAPUI5 library source.

https://sapui5.hana.ondemand.com/resources/sap-ui-core.js

 

18. Add a New File in WebContent > global.js & update index.html to include the file.

global.js

Make sure you define your Public HANA IP Address / Domain Host Name.

var Protocol = "http"; var HANA_IP = ""; // e.g. "54.254.198.40" var Port = "8000"; var XSJSUrl = Protocol + "://" + HANA_IP + ":" + Port + "https://learntips.b-cdn.net/trial/stock/B1SL_Proxy.xsjs"; var XSODataPoint = Protocol + "://" + HANA_IP + ":" + Port + "https://learntips.b-cdn.net/trial/stock/stock.xsodata"; var SLSessionID = "";

index.html

 

19. Modify Buttons > Press Function in your App.

StockQuery > WebContent > view > Detail.view.xml

Open Detail.view.xml

Modify the Button Function Accordingly.

 

20. Add Button Function into Controller file.

StockQuery > WebContent > view > Detail.controller.js

Open Detail.controller.js

Add New Function for Check Stock Availability Button, onCheckPress method.

onCheckPress: function(oEvent) { /** * [METHOD TO GET ITEMID] * Option 1: Substring away the path of the OData * Option 2: sap.ui.getCore().byId("__xmlview1--list").getBindingContext().getPath().substr(1)); * */ var ItemID = this.getView().mObjectBindingInfos.undefined.path.substr(7,6); var SLCall_Login = XSJSUrl + "?cmd=login"; // Service Layer Call URL to Login $.ajax({ type: "POST", url: SLCall_Login, success: function (result) { if (result.error) { alert(result.error); return; } else { SLSessionID = result.cookies[0].value; localStorage.setItem("b1session", SLSessionID); // Store B1 Service Layer SessionID into browser's LocalStorage var SLCall_CheckStock = XSJSUrl + "?cmd=Get&actionUri=Items('" + ItemID + "')/ItemWarehouseInfoCollection&sessionID=" + SLSessionID; // Service Layer Call URL to Check on Stock Level $.ajax({ type: "POST", url: SLCall_CheckStock, success: function (result) { var inStock = result.body.ItemWarehouseInfoCollection[0].InStock; var comStock = result.body.ItemWarehouseInfoCollection[0].Committed; var StockAvail = inStock - comStock; var resultDialog = new sap.m.Dialog({ title: 'Stock Availability', state: 'Success', content: new sap.m.Text({ text: 'Stock Item: ' + ItemID + "  Availability Level: " + StockAvail }), beginButton: new sap.m.Button({ text: 'Close', press: function () { resultDialog.close(); }.bind(this) }) }); resultDialog.open(); }, error: function (request, textStatus, errorThrown) { alert("SAPB1 Service Layer Call has failed: " + textStatus + " / " + errorThrown ); } }); } }, error: function (request, textStatus, errorThrown) { alert("SAPB1 Service Layer Call has failed: " + textStatus + " / " + errorThrown ); } }); }

 

21. Add Button Function into Controller file.

StockQuery > WebContent > view > Detail.controller.js

Open Detail.controller.js

Add New Function for Create Sales Order Button, onOrderPress method.

onOrderPress: function(oEvent) { /** * [METHOD TO GET ITEMID] * Option 1: Substring away the path of the OData * Option 2: sap.ui.getCore().byId("__xmlview1--list").getBindingContext().getPath().substr(1)); * */ var ItemID = this.getView().mObjectBindingInfos.undefined.path.substr(7,6); var SLCall_Order = XSJSUrl + "?cmd=Add&actionUri=Orders&sessionID=" + localStorage.getItem("b1session"); // Service Layer Call URL to Login /** * [ORDER JSON Array] * Prepare Order object to be created * - to be further developed - * */ var orderInfo = {}; orderInfo.CardCode = "C99998"; orderInfo.DocDueDate = "2017-09-09"; orderInfo.Comments = "Added from StockQuery App."; orderInfo.DocumentLines = []; var orderItem = {}; orderItem.ItemCode = ItemID; orderItem.Quantity = "1"; orderInfo.DocumentLines.push(orderItem); $.ajax({ type: "POST", url: SLCall_Order, data: JSON.stringify(orderInfo), dataType: "json", success: function (result) { console.log(result); var resultDialog = new sap.m.Dialog({ title: 'Success Order', state: 'Success', content: new sap.m.Text({ text: 'Order placed for: ' + ItemID + "  Order Reference Number: " + result.body.DocNum }), beginButton: new sap.m.Button({ text: 'Close', press: function () { resultDialog.close(); }.bind(this) }) }); resultDialog.open(); }, error: function (request, textStatus, errorThrown) { alert("SAPB1 Service Layer Call has failed: " + textStatus + " / " + errorThrown ); } }); }

 

22. Activate your Project & Test with Public IP Address on Chrome Browser.

Navigate to your SAP HANA Repository Namespace of your Project.

e.g. https://:8000/trial/stock/StockQuery/WebContent/index.html

[IMPORTANT] Please use your Public HANA IP Address throughout, otherwise you’ll face with cross-origin issues.

 

And you’re done with your Back-end & Front-end!

Next, you’ll deploy the App into your device.

 

Deployment

Before opening the Xcode / Android Project file for deployment, you’d need to update the old contents.

There will be 3 locations to replace the contents of the Updated Project:

  • SAPHybrid > StockQuery > webapp
  • SAPHybrid > StockQuery > hybrid > www
  • SAPHybrid > StockQuery > hybrid > platforms > ios > www

 

1. Right Click Project & Open in System Explorer.

StockQuery > Show In > System Explorer.

 

2. Copy Contents from StockQuery > WebContent.

 

3. Paste Contents into Hybrid App Folder.

SAPHybrid > StockQuery > webapp

 

4. Paste Contents into Hybrid App Folder.

SAPHybrid > StockQuery > hybrid > www

 

5. Paste Contents into Hybrid App Folder.

SAPHybrid > StockQuery > hybrid > platforms > ios > www

 

6. Now, you can open the Xcode Project File.

Open Stock Availability Check.xcodeproj.

 

7. In Xcode, make the following changes:

Bundle Identifier: Give it a suitable identifier

Tick “Automatically manage signing”

Select a Team.

 

8. Open info.plist file for further configuration.

Stock Availability Check > Resources > Stock Availability Check-info.plist

Make sure you have the following configurations:

  • UIRequiresFullScreen – NO
  • Status bar is initially hidden – YES
  • View controller-based status bar.. – NO

 

9. Select your Device > Run.

Tools & Components Compatibility Versions

back to top

Tools compatibility version dated as of 23rd September 2017.

SAP HAT
Version: 1.28.2

SAP Mobile Platform (SMP) SDK
Version: 3.15.0

SAP Web IDE
Version: 170330

SAP SAPUI5
Version 1.46.12

SAP HANA 1.0 SPS 12
1.00.122.05.1481577062

SAP Business One HANA
9.2 PL07

SAP Business One HANA Service Layer
9.2 PL07

Xcode version
8.3

Next Steps

back to top

How to build Fiori apps for SAP Business One on HANA by Mostafa SHARAF

In this blog, you’ll learn how to build a Sales Order Fiori App with SAP Business One Service Layer.

 

SAP Fiori for iOS – Build Your First Native Mobile App

In this course, you’ll learn how to build a native iOS Fiori App. From there, you can leverage on the native capabilities of your device that drives a better user experience.

 

SAP HANA Express Edition

Utilize SAP HANA Express Edition (HXE) to host your Solution on a HANA server, up to 32GB for FREE! From there you can deploy your XS artifacts and let it run in your server in parallel to SAP Business One HANA. With that, you can achieve a Loosely-Coupled Solution approach – Solution Utilizing HXE memory while your SAP Business One is Utilizing your own HANA Server Memory.

 

Explore SAPUI5 Libraries

To successfully understand and build Enterprise-ready solution with SAPUI5, you’ll find this Toolkit with great examples and API Reference.

back to top

New NetWeaver Information at SAP.com

Very Helpfull

User Rating: Be the first one !