How to build SAPUI5 apps for SAP Business One on HANA?

[MostafaSharaf]

This SAP Business One App demonstrates how to bind SAP UI5 Web based App to SAP Business One Tables on HANA, via several ways;

1. HANA XS OData Service.


2. HANA XS JS (JAVA Script).


3. UDQ (User Defined Query) service in SAP B1 App Framework.


4. B1 Service Layer.

 

Please Download  the B1 Demo App package here.

 

You can access the B1 App via one of the the two links below;

1. https://<hana-server>:43<no>/B1ExtremeApp/login.html


2. http://<hana-server>:80<no>/B1ExtremeApp/login.html

--> no: stands for the HANA Instance No., that is usually 00.

This SAP Business One App demonstrates as well how to authenitcate and authorize your B1 App to access the desired SAP B1 Database (SBODEMOUS), HANA XS, and login to the SAP B1 App Framework via the built-in Login Service of the SAP B1 App Framework;

In this SAP B1 App we have got 4 demo scenarios for how to bind and connect SAPUI5 UI Table Control to an B1 HANA DB Table, as mentioned below;

 

1. Via HANA XS OData Service:

1. First create your OData service based on HANA view or B1 table like OCRD [BP] as shown below;


2. The "SAP_CA_BP" calculation view has been built based on the SBODMEOUS schema, so please ensure that you have got this schema otherwise you will need to modiy the script node of the calculation view. You can also set the property "Default Schema" of the view instead of hardcoding it.


3. Please ensure that the HANA Technical User "_SYS_REPO" has got select privilege on your schema, otherwise execute the following sql statement:

     grant select on schema "YOUR_SCHMEA_NAME" to "_SYS_REPO" with grant option;

1. You can validate the OData service via the Web or any Rest Client as the following;
   
   
   
   • https://<hana-server>:43no/B1ExtremeApp/odata/BusinessPartners.xsodata
   
   
   • no: stands for the HANA Instance No., that is usually 00 --> 4300.
   
   
   
   


2. Then create an SAPUI5 table which will represent the Business Partners data, as shown below [this step is repeated in each view];

1. In the View's Controller create a method "populateBPTable" that will bind the table to your OData service, and then populate with the corresponding data;

2. Via HANA XS JS (JAVA Script)

1. You can validate the XSJS service via the Web or any Rest Client as the following;
   
   
   
   • https://<hana-server>:43no/B1ExtremeApp/xsjs/getBP.xsjs
   
   
   • no: stands for the HANA Instance No., that is usually 00 --> 4300.
   
   
   
   


2. First create an XS JS file, which will query your B1 Tables or HANA view for reading data from the backend, as shown below;


3. After then create in the View the same table as in mentioned above in the step [b] of the first approach.


4. Then in the View's Controller create a method "populateBPTable" that will bind the BPs table to your XS JS service, as shown below;

3. Via UDQ service in B1 App Framework

 

1. First you will need to create the UDQ from B1 Client, that query for Business Partners data, as shown below it does not have parameters;
   
   
   
   1. Then create in the View the same table as in mentioned above in the step [b] of the first approach.
   
   
   2. After then in the View's Controller create a method "populateBPTable" that will bind the BPs table to your UDQ No Param service, as shown below;
      
   
   
   
   


2. Below is an example for UDQ with Parameter for the CardType "BYType", so it can filter Business Partners as customers, suppliers or leads;

1. 
   
   
   
   1. Then create in the View the same table as in mentioned above in the step [b] of the first approach.
   
   
   2. After then in the View's Controller create a method "populateBPTable" that will bind the BPs table to your UDQ No Param service, as shown below;
   
   
   3. After a successful completion of the AJAX call, the BPs Table will be populated by the corresponding results of the UDQ service's call.
   
   
   
   

4. Via B1 Service Layer

1. You can validate the B1 Service Layer  via any REST Client like Postman or Advanced REST Client plug-in as the following;


2. First create an XS JS file, which will act as a proxy for calling your SAP B1 Service Layer to read/write data from/to your B1 DB, as shown below;


3. Then you will have to add the login operation to the Service Layer, inside the login.html page "mentioned above";


4. After then create in the View the same table as in mentioned above in the step [b] of the first approach.


5. At end in the View's Controller create a method "populateBPTable" that will bind the BPs table to the JSON output coming from calling the SAP B1 Service Layer for reading Business Partners data, as shown below;

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

Finally, I would like to highlight here how to create a Shall Container for your SAPUI5 App, so it act as web Container that hosts all your SAPUI5 based views. In this B1 apps, there are 6 views;

1. Main View for the Shell UI Control, called "Main.view".


2. View for the OData approach, called "ODATA.view".


3. View for the XSJS approach, called "XSJS.view".


4. View for the UDQ with No PARAM approach, called "UDQ.view".


5. View for the UDQ with PARAM approach, called "UDQ_Param.view".


6. View for the B1 Service Layer approach, called "SL.view".