Skip to Content

This blog explains the part3 of how to build B1 Fiori apps running on top of SAP HANA, with the help of the WEB IDE for HCP.

Please follow part1&2 for basic understnading of Fiori:

In order to make it simpler for you, I have attahced in this blog a ppt presenation here B1_Fiori_Presentation where it explain all details about how to build an B1 Fiori app on HANA in two different backend connectivity methods:



  1. using the HANA XS based OData service – reading purpose.
  2. using the B1 Service Layer on HANA – reading and posting purposes.

I have attached two samples here Samples, and and as well inside the ppt presenation so you can import them in your HANA System and try them as per instructions provided in the ppt;

  1. Sample_A
    • This is an B1 Fiori app that shows Business Partners details.
    • It can run on HCP and as well on HANA Platfrom “On-Premise“.
    • It is based on an OData service, which is only for reading purpose. /wp-content/uploads/2016/07/sample1_989871.png
  2. Sample_B
    • This is an B1 Fiori app that shows Sales Orders details.
    • It can run on HANA Platfrom “On-Premise“.
    • It is based on the B1 Service Layer on HANA.
    • It shows sales order details, and allow to cancel or close a specific opened sales order via the B1 Service Layer on HANA. /wp-content/uploads/2016/07/sample2_989872.png
To report this post you need to login first.

25 Comments

You must be Logged on to comment or reply to a post.

  1. Chin Chong

    Hi Mostafa,

          Thank you for your post, powerpoint and code for the 2 projects. I have opened both your power point and your 2 projects, SLFiori and BCN_Demo. I need your help in the following:

    1.  Slide 19. For option b) “In case of using the Service Layer”, you mentioned “The connectivity and the call to the Service Layer will have to be managed manually and explicitly by the developer”  Please elaborate and give examples or links on how this can be done

    2.  Slide 19 – For option a). Can the Web IDE (local installation) be used then?

    3.  Slide 26 – In this example, you had a url that points to one entity, BusinessPartners.xsodata. What if I need to have 4 entities – OrderHeader, OrderItems, BusinessPartner and a UDT, ApprovalHistory (which contains the approval history of one sales orders) – how do I specify the url then?

    4. In SLFriori project, there is a metadata.xml in the model sub folder. It seems this metadata.xml defines all B1SL entities and relationship. How was this retrieved into this project? Was it within Web IDE? What steps are needed? How is this metadata.xml used in this project?

        The project I described in paragraph 3 is actually one we are trying to build. We face difficulties trying to connect Web IDE (local installation) with B1SL.

        Thank you in advance.

        Chong  Chin

    (0) 
    1. Mostafa SHARAF Post author

      Hi Chong,

      Thanks for your feedback. Please find below my answers;

      1. Till now, we don’t have a possible direct connection from the SAP Web IDE for HCP to the Servie Layer for SAP B1. Having said that, you won’t be able to connect directly your Fiori app built inside the Web IDE to the Service Layer, thus you will have to manage the connectivity to the Service layer manually –> you will have to adjust the coding after building the Fiori app with the Web IDE for HCP.

      2. yes you can, however the Web IDE for HCP has more templtaes and more featured. The local Web IDE is NOT for productive use, just for testing.

      3. Please put yll your entities (tables/views) in one SINGLE xsodata file, so then when the odata service is exposed, you can refer to all entities inside easily.

      4. You can save the xml file of the Service Layer Metadata in your local filesystem, and then refer to it from the Web IDE, however no real connection will be established it will just offline use –> you can test your Fiori app in mock data mode.

      Kindly,

      Mostafa

      (0) 
      1. Chin Chong

        Hi Mostafa,

              Thank you for your reply.

        1.  In Web IDE, xml views depend on the entities and associations defined in the metadata.xml. The SAP course “Developing Web Apps with SAPUI5” implies this. Without the metadata.xml (obtained through integration), then how can xml views (for multiple related entities) be built and also tested?

          

             In your paragraph 4, you mentioned that this metadata.xml can be saved into local file system. But as far as we know (from Web IDE sample examples) , such a local file system copy is limited in usage to mock data , not data read directly from B1. Is this correct?

        2. B1SL, we understand, is equivalent to DI API, and we need to use it to insert or update B1 standard tables. Since there is a lack of integration of B1SL to Web IDE, does this mean that we cannot test writes to B1 standard tables within Web IDE.

        3. In your samples, you have xsodata files. Must this be created first in Hana Studio, then opened up in Web IDE? Can Web IDE create this file?

        4. In your paragraph 1, you said ” You will have to adjust the coding after building the Fiori app with the Web IDE for HCP”  Please clarify precisely what has to be adjusted?

        5. I tried to reconcile your slides with your code

           a) Are slides 23 to 30 for Sample A? and slides 32 to 45 for Sample B?

           b)  Why does Sample B (SL Friori) have both component.js and manifest.json, while Sample A  (BCN_Demo) has only component.js

           c)  SL Fiori – routing, routes and data sources are defined in both manifest.json and also component.js. There appears to be a duplication. In SAPUI5 SDK, we understand that some of the metadata in component.js should be moved to manifest.json

          We are trying to build  building a B1 Gross Profit (Sales Order) Approval on Frioi – and this has been a real challenge. So any help from you will be deeply appreciated by our team.

          Thank you.

          Chong Chin

        (0) 
        1. Mostafa SHARAF Post author

          Hi Chong,

          1. yes correct, it is just for buidling the app and avoiding real data connectivity. it is for customizing the Fiori app template based on metadata’s entities and asscotiations without taking care of the real connectivity from the Web IDE to the HANA backend system like the case of B1 on HANA Onpremise system.

          2. yes that’s not possible in the meantime, however you can just adopt your app to connect to the Service Layer and then performs data reading/writing from/to B1 System Tables.

          3. Yes it is a must to do this first in your HANA System. It cannot be done via Web IDE.

          4. to use the Service Layer, you would need to adopt the codeafter building the Fiori app with the Web IDE, such as login, session handling and readaing/posting data/documents.

          5. a. yes

          5. b. it is just two different ways of building samples; new structure is to use mainfest.json for matadata and refer to it from the component.js file.

          5. c. please use mainfest.json for such configuration points: navigation, routing, data source…etc.

          I hope my answers are clear enough and can help you to move forward.

          Kindly,

          Mostafa

          (0) 
          1. Chin Chong

            Hi Mostafa,

                 Thank you for your reply.  We plan to shift to your approach of using both Web IDE and Hana Studio.

            1. Could I confirm that this should be the typical steps for a Friori application using B1 Service Layer application

               a) Create a project within Web IDE

               b)  Import the B1 metadata.xml file into local file system

               c)  Create mock data

               d)  Create xml views and their controllers

               e)  Test with mock data using mockserver.js

               f)   Create an XSJS project into Hana Studio

               g)  Import the code from Web IDE

               h)  Add the code for login, session handling – as seen in your B1SLLogic.xsjs and create html code to login for authentication

               i)   Add the business logic code – as seen in your callSL.js

               j)   Add the B1SL.xshttpdest file

               k)  Modify Component.js / manifest json for data source, disable the mock service.

              

            2. Since the same xml views are also used in Hana Studio, how are the relationships between different entities (e.g. SO header, SO Items, BP) enforced?  In step 1e) above (within Web IDE), the mockserver.js uses the local copy of the metadata.xml to enforce the associations for the mock data? The code in B1S1Logic.xsjs and callSL.js appear to to be ODATA rest calls. But by themselves they cannot enforce the relationships in the xml views? Or am I wrong?

            3.  CORS

                 From B1 Service Layer with JavaScript – Handling B1 Objects without .Net (nor DI API)

                 there was an instruction to add 2 lines in b1s. conf file in the server  a) CorsEnable : true and b) CorsAllowedOrigins : (various IP sources).  Is this necessary still?

               Thank you.

               Chong Chin

            (0) 
            1. Mostafa SHARAF Post author

              Hi Chong.

              1. yes that looks fine, however you would need to create HANA XS project “not XSJS”.

              Please condier to create a Trust Store Object in the Trust Manager, by importing the Service Layer certificate.

              2. If you would use the Service Layer for reading so this means that you will have to handle this manually in your HANA XS Fiori based project after importing it on your HANA On-Pemise system. With using the HANA XS based OData services, everything is managed dynamically.

              3. yes please kep them.

              Kindly,

              Mostafa

              (0) 
              1. Chin Chong

                Hi Mostafa,

                      Thank you. Our team appreciate your effort. I am still not clear on paragraph 2 of your answer, about the use of ODATA calls instead of service layer calls.

                1. Binding B1 data to xml views. Please confirm that the following code in your SLFlori example, uses ODATA services and not the service layer, and therefore do not depend on the metadata.xml of the service layer.

                  a)  In Detail.controller.js, in the OnInit function, there are 2 references to “idItemsTable” and “IdColListItems” in the xml view

                  var oItemsTbl = this.getView().byId(“idItemsTable”);

                  var oColListItem = this.getView().byId(“idColListItem”);

                  oItemsTbl.setModel(oModel);

                  oItemsTbl.bindItems(context.sPath + “/DocumentLines”, oColListItem);

                 

                  b)  These 2 IDs are found in your Detail.view.xml, and you use the “path” parameter to reference DocumentLines

                <Table id=”idItemsTable”

                  inset=”false”

                  items=”{

                  path: ‘/DocumentLines’,

                  sorter: {

                  path: ‘ItemCode’

                  }

                  }”>

                   c) In callSL.js, the following line is used to get “Orders” and the related “DocumentLines”

                      var xsjsUrl = “xsjs/B1SLLogic.xsjs?cmd=Get&actionUri=Orders&filter=DocumentStatus&sessionID=” + document.cookie;

                2.   Data integrity for insert and update to B1 standard tables

                      In .NET development, we have been instructed by SAP never to write directly to SAP B1 standard tables, but use the DI API instead. If now, we do not use the service layer to insert / update  SAP standard tables, but use ODATA calls instead, will the data of standard B1 tables  be correctly updated ?

                    Thank you again

                     Chong Chin

                (0) 
                1. Chin Chong

                  Hi Mostafa,

                      I missed out 1 more point from your paragraph 1 and related to your slide 33. Our service layer is internal and our application is internal within our company. Do we then still need to create a certificate for the service layer and then a trust store or can we skip this step?

                     Thanks

                     Chong Chin

                  (0) 
                  1. Chin Chong

                    Hi Mostafa,

                         Sorry for not asking these questions in 1 go.

                    1.  Our trial Friori application is to be finally installed on a mobile device e.g. tablets for managers, to approve sales orders when they are not in the office.

                    2.  WEB IDE provides a “Hybrid Application Toolkit” (HAT) for mobile development. Can HAT be used for the above approach (Web IDE + Hana Studio) that you demonstrated with the SLFriori example?

                       Thank you

                       Chong Chin

                    (0) 
  2. Luis Oliveira

    Hi Mostafa,

    Thanks for your post and for part 1 and 2 of this “how to”.

    The Samples in this post expired, so i can’t open them to see the implementation.

    I have opened your power point and i have the same question of Chin Chong, about slide 19, when you mention “In case of using the Service Layer”, “The connectivity and the call to the Service Layer will have to be managed manually and explicitly by the developer.”

    Can you explain this, and if possible, mention how it’s done?

    Thanks,

    Luis Oliveira

    (0) 
    1. Mostafa SHARAF Post author

      Hi Luis,

      With pleasure! Thanks as well for your feedback.

      Please check the samples download link again, it works with me!

      In slide 19, I meant to say that the connectivity and handling of the calls to the Service Layer from inside the B1 Fiori app, will have to be managed by the developer since there is no dynamic way to do this from the Web IDE or Fiori apps till now, suhc as the case of the HANA XS Odata Services for example.

      I hope things are more clear now to you. Let me know if you need further help.

      Kindly,

      Mostafa

      (0) 
  3. Chin Chong

    Hi Mostafa,

       I change the url to our local server, then execute the login.html. I had this error, “User is not authorized to use the destination (package:SLFriori.xsjs, name B1SL). According to

    https://scn.sap.com/thread/3507014  &nbsp;

    this could be due to the folder structure. Mine is as follows

    SLFriori.jpg.png

        Please let me know if you have advice on this.

         Thank you.

         Chong Chin

    (0) 
    1. Yatsea Li

      Hi Chong Chin,

      The root cause is mismatched folder structure of your B1SL.xshttpdest and the destination used in B1SLLogic.xsjs. Please find out the relation as attached screenshot.

      To fix this issue, you need to

      1.find out the right folder structure in the Workspace of the development perspective of HANA Studio where B1SL.xshttpdest locates. BTW, I’m use the Web-based Development Workbench in the screenshot.

      2.use the right destination in the readDestination of B1SLLogic.xsjs

      B1SLhttpdestination.png

      Kind Regards, Yatsea

      (0) 
      1. Chin Chong

        Hi Yatsea,

           Thanks for the quick reply. Attached is the screen shot. Compared to your code, it appears to be correct.

           Kind regards

           Chong Chin

        xsjsFolders_20180819A.png

        (0) 
        1. Yatsea Li

          Hi chin Chong,

          not, as mentioned in last reply, you should the folder structure in Workspace instead of Project tab.

          kind regards, yatsea

          (0) 
          1. Chin Chong

            Hi Yatsea,

               1. In Hana Studio, my workspace is “Default” as shown below. I tried to prefix with “Default”, “(Default)”, but all did not work. So what should be the correct prefix. Thanks

            Chong Chin

            xsjsFolders_20180819B.png

            (0) 
            1. Chin Chong

              Hi Yatsea,

                 I open up in Development Work Bench. Here there is no upper folder above SLFriori. Where can I find the Workspace for the project, SLFriori in Development Work Bench. Thanks.

              Best Regards

              Chong Chin

              xsjsFolders_20180819C.png

              (0) 
            2. Yatsea Li

              Hi Chin Chong,

              You have a mismatched folder name as “SLFriori”, while in B1SLLogic.xsjs it is “SLFiori.xsjs”.

              Please change it to “SLFriori.xsjs” in B1SLLogic.xsjs

              Kind Regards, yatsea

              (0) 
              1. Chin Chong

                Hi Yatsea,

                      Sorry for the foolish mistake. I corrected.

                1.    I had this error “HttpClient.request: request failed: SSL requested, but no trust store configured.

                2.   I then amended B1SL.xshttpdest, and set “useSSL = false”

                3.   I then tried to execute login.html again. I had the error, below. SBODEMOSG exist. The user is the standard “manager” and password standard “1234”

                     Please let me know if you are aware of this error, while I continue to diagnose.

                   Thanks for your time.

                   Chong Chin

                xsjsFolders_20180819f.png

                (0) 
                1. Yatsea Li

                  Hi Chin Chong,

                  Reasons:

                  1.Service Layer only support HTTPS connection.

                  2.No key store of Service Layer maintained in XSEngine, neither key store specified for httpdestination(B1SL.httpdest) used by B1SL.xsjs.


                  Solution:

                  1.Enable SSL in the B1SL.httpdest.

                  And the host name in B1SL.httpdest should be exactly the same as the cn(common name) of Service Layer’s certificate in next step.

                  2.Please follow the page 42~44 in the slide deck(B1_Fiori_Presentation)

                  1).Export the certificate of Service Layer to local.

                  2).Create a key store named “B1SL”(whatever you name it) by uploading the certificate of SL exported in last step.

                  3).In the HTTP destination details, please specify to use the key store above for the B1SL.httpdest in the Authorization tab.

                  You’ll need at lest the following roles to access the trust store and HTTP dest configuraiton in XS Admin tool. (https://<hana_server>:4300/sap/hana/xs/admin/)

                  TrustStoreAdministrator (Allow you to create and maintain a keystore)

                  HTTPDestAdministrator (Allow Full access to the details of HTTP destination configurations (display and edit))

                  Please refer to the follow online help for details.

                  SAP HANA XS Administration Roles – SAP HANA Administration Guide – SAP Library

                  Kind Regards, yatsea

                  (0) 
                    1. Chin Chong

                      Hi Yatsea,

                         Sorry for not coming back earlier on this as we were working on another assignment.

                         Please see your “Solution” paragraph 2 above.  Slide 32 (not 42 as above) states  Visit your Service Layer base URL. Then Export the Service Layer certificate to your local system

                         The Service Layer base URL has only 2 links a)  User Manual  b) API Reference.

                         Question: Where do I find the “Service Layer certificate”?

                         Thanks in advance.

                         Kind regards

                         Chong Chin

                      (0) 
                        1. Chin Chong

                          Hi Yatsea,

                              I ran the login.html. But I received the following SSL error. Are there some other settings that I should change? Thanks. The B1SL.xshttpdest is as follow

                          description = “B1 SL https connection”;

                          host = “XXXXXX”

                          authType = none;

                          useSSL = true;

                          timeout = 0;

                          sslHostCheck = false;

                          sslAuth = anonymous;

                          B1SL_SSL_Error1.png

                          (0) 
  4. Alessandro D'Amico

    Hi Mostafa,

    I’m very confused about te use of truster manager / certicates , regarding calls of B1 Service Layer.

     

    Step by step, my questions are:

     

    1. Is it really a mandatory thing? There’s not an option to do the same thing without ssl certificate? With postman I’m able to call Service layers without problem, why not with an xsjs and xshttpdest file?
    2. If this is really  mandatory, please is there a guide that explains step by step:
      • How to create a self signed certificate
      • How to import in trust manager
      • How to assign it to a xshttpdest

    EDIT: I see in xs admin tools the possibility to assign a trust store. I tried with saplogon an saml trusted stores but I’v got an error during save (“Extended HTTP Destination missing”)

    Please, is really frustrating find your own development team in a middle of a development with this kind of problems and without a precise and direct answer.

     

    Thank you in advance.

    (0) 

Leave a Reply