Skip to Content
Author's profile photo Mostafa SHARAF

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

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.

Screen Shot 2014-12-08 at 8.53.42 AM.png Screen Shot 2015-02-16 at 2.12.37 PM.png

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;

/wp-content/uploads/2015/02/login_646069.png LOGIN_SCRIPT_2.png

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:

Screen Shot 2014-12-08 at 8.54.45 AM.png

  1. First create your OData service based on HANA view or B1 table like OCRD [BP] as shown below;Screen Shot 2015-02-15 at 11.20.26 AM.png
  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 propertyDefault 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;
  2. Then create an SAPUI5 table which will represent the Business Partners data, as shown below [this step is repeated in each view];

/wp-content/uploads/2015/02/odata_ui5_table_view_1_645966.png/wp-content/uploads/2015/02/odata_ui5_table_view_2_645989.png/wp-content/uploads/2015/02/odata_ui5_table_view_3_645990.png

  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;/wp-content/uploads/2015/02/xsodata_controller_645967.png

2. Via HANA XS JS (JAVA Script)

Screen Shot 2015-02-16 at 1.44.41 PM.png

  1. You can validate the XSJS service via the Web or any Rest Client as the following;
  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; /wp-content/uploads/2015/02/xsjs_645645.png
  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; /wp-content/uploads/2015/02/xsjs_controller_645991.png

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;GetBPList.pngScreen Shot 2014-12-08 at 8.56.19 AM.png
    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; /wp-content/uploads/2015/02/udq_645993.png /wp-content/uploads/2015/02/udq_no_param_controller_3_645994.png
  2. Below is an example for UDQ with Parameter for the CardType “BYType”, so it can filter Business Partners as customers, suppliers or leads;

GETBPListParam.png

Screen Shot 2015-02-16 at 1.47.24 PM.png

    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; /wp-content/uploads/2015/02/udq_param_controller_1_646129.png
    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./wp-content/uploads/2015/02/udq_param_controller_2_646128.png

4. Via B1 Service Layer

Screen Shot 2015-04-22 at 7.55.13 PM.png

  1. You can validate the B1 Service Layer  via any REST Client like Postman or Advanced REST Client plug-in as the following;Screen Shot 2015-04-22 at 8.10.27 PM.pngScreen Shot 2015-04-22 at 8.10.35 PM.png
  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; Screen Shot 2015-04-22 at 8.01.23 PM.png
  3. Then you will have to add the login operation to the Service Layer, inside the login.html page “mentioned above”; Screen Shot 2015-04-22 at 8.03.02 PM.png
  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;

Screen Shot 2015-04-22 at 8.01.46 PM.png

Screen Shot 2015-04-22 at 8.01.46 PM.png

—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-—-

 

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”.

/wp-content/uploads/2015/02/main_shell_view_1_646143.png Screen Shot 2015-02-16 at 2.54.07 PM.png

Assigned Tags

      20 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Mostafa,

      I installed your delivery on my SAP HANA server ( rev 74 & B1H 9.1 PL5 ).

      I get error message

      Capture.JPG

      Which role might be missing ? I am connecting with System user.

      Regards,

      Grégory Borysiak

      Author's profile photo Mostafa SHARAF
      Mostafa SHARAF
      Blog Post Author

      Hi Grégory ,

      You might need to greant the select privilege to your HANA _SYS_REPO user as the following:

      GRANT SELECT ON SCHEMA SCHEMA_NAME TO _SYS_REPO WITH GRANT OPTION;

      Kindly,
      Mostafa

      Author's profile photo Former Member
      Former Member

      Hi Mostafa,

      I'm trying your sample, but can't get it seem to work.

      First in your example, the B1SLadress is an http adress, why not a https ?

      When I change it to the https, then I get the error : currently HTTPS is only supported via securec destinations

      Author's profile photo Former Member
      Former Member

      Hi Mostafa,

      I'm not an expert in javascript, but something in the B1SLLogic.xsjs gives me the error. I've change in populate table the url to the direct SL Odata url and then everything works fine

      This doesn't work : var xsjsUrl = "/ItemMatrix/XSJS/B1SLLogic.xsjs?cmd=Attributes";// + document.cookie;

      This works : var xsjsUrl ="https://administrator:50000/b1s/v1/U_DS_ATTRIBHEADERS";

      Author's profile photo Mostafa SHARAF
      Mostafa SHARAF
      Blog Post Author

      Hi IDE,

      Does it work now fine?

      Kindlly,
      Mostafa

      Author's profile photo Mostafa SHARAF
      Mostafa SHARAF
      Blog Post Author

      Hi IDE,

      The error you get is the reason why I put it http :)! to use https based destinations from HANA XS, you would need first to setup an .xshttpdestination "config file of your https destination" and then assign to it the ServiceLayer certificate-Trust Store Object "after importing it in your HANA Trust Store Manager".

      Please look at my blog: https://blogs.sap.com/2016/07/06/how-to-build-fiori-apps-for-sap-business-one-version-for-sap-hana-part3/

      There you can fine my presentation with all necessary steps.

      Kindly,
      Mostafa

       

      Author's profile photo Charles PAULET
      Charles PAULET

      Hi,

      Thanks for this great document.

      I use the UDQ servive but it seems there is a limitation of 1000 lines in the result.

      Is it possible to use paging and how ?

      Regards,

      Author's profile photo Mostafa SHARAF
      Mostafa SHARAF
      Blog Post Author

      Hi Charesl,

      Yes it is possible, but you need to define such paging in your query by your own.Please look at the B1 App Framework Layer guide, you can find it in the partneredge: 1858188  – Extreme App Framework for SAP Business One: Samples and Documentation (S-user required).

      Kindly,
      Mostafa

      Author's profile photo Raphael Mendoza
      Raphael Mendoza

      Hi,

      I'm having this error on the login page.
      HttpClient.request: request failed: SSL requested, but no trust store configured
      What should I do?

      Regards,
      Raphael

      Author's profile photo Mostafa SHARAF
      Mostafa SHARAF
      Blog Post Author

      Hi Raphael,

      This is because the app tries to access an https based destination from HANA XS, you would need first to setup an .xshttpdestination “config file of the Service Layer destination” and then assign to it the ServiceLayer certificate-Trust Store Object “after importing it in your HANA Trust Store Manager”.

      Please look at my blog: https://blogs.sap.com/2016/07/06/how-to-build-fiori-apps-for-sap-business-one-version-for-sap-hana-part3/

      There you can fine my presentation with all necessary steps.

      Kindly,
      Mostafa

       

      Author's profile photo Goga Didebashvili
      Goga Didebashvili

      Hello, can you please update the download link ? It is not valid anymore. Thanks

      Author's profile photo Jacob Tan
      Jacob Tan

      Link has been renewed! Please download it before expiry again.

      Author's profile photo Chao Feng
      Chao Feng

      Hi Mostafa,

      The download file was expired.

      Download  

      Could you share it again?

       

      Regards

      Robin

      Author's profile photo Jacob Tan
      Jacob Tan

      Link has been renewed! Please download it before expiry again.

      Author's profile photo Former Member
      Former Member

      Hello,

       

      I keep get this error when trying to login:

      db.getConnection: expects an authenticated session

      do you know what's the problem?

      Author's profile photo Anantharuban M
      Anantharuban M

      I cant able to download file it through the Error

      Access to share has expired

      Share is no longer available; contact the owner if you need access

      Author's profile photo Jacob Tan
      Jacob Tan

      Link has been renewed! Please download it before expiry again.

      Author's profile photo Manikandan S
      Manikandan S

      i need to download this . kindly renew it again

      Author's profile photo Mostafa SHARAF
      Mostafa SHARAF
      Blog Post Author

      As my colleague Jacob mentioned, I ave renews the download link :),

      Thanks for the interest.

      Kindly

      Mostafa

       

      Author's profile photo Thomas Arnold
      Thomas Arnold

      I believe that this has expired again.

       

      Tom Arnold