Skip to Content

So following a very interesting podcast from Rui Nogueira with SAP’s Michael Falk and Tim Back on the HTML5-based UI Toolkit for SAP NetWeaver Gateway (aka “SAPUI5”) earlier this month, a beta version of  SAPUI5 was released to the world on SDN, specifically in the “Developer Center for UI Development Toolkit for HTML5” section. I downloaded it and unpacked the contents into a directory to have a look at the docu and guidelines, and have an initial poke around.

Wow, those folks have certainly put together some nice documentation already! Try it for yourself – once downloaded, open the demokit directory and you should be presented with a nice (SAPUI5-powered) overview, developer guide, controls and API reference:

The framework is based upon JQuery / UI and contains  a huge number of controls. It also supports data bindings, and one thing that had intrigued me from the podcast was that data bindings were possible to arbitrary JSON and XML … and OData resources.

“Gosh”, I hear you say, “that reminds me of something!” Of course, SAP NetWeaver Gateway’s REST-informed data-centric consumption model is based upon OData. So of course I immediately was curious to learn about SAPUI5 with an OData flavour. How could I try out one of the controls to surface information in OData resources exposed by NetWeaver Gateway?

What I ended up with is SAPUI5’s DataTable control filled with travel agency information from my copy of the trial NetWeaver Gateway system, via an OData service all ready to use. You can see what I mean in this short screencast.

Here’s what I did to get the pieces together. I’m assuming you’ve got the trial Gateway system installed and set up (you know, fully qualified hostname, ICM configured nicely, and so on), and that you’re semi-familiar with the SFLIGHT dataset.

Step 1. The OData Service

Check with transaction /iwfnd/reg_service, for the LOCAL system alias, that the service RMTSAMPLEFLIGHT is available, as shown here.

Check you can see the service document by clicking the Call Browser button (you may need to provide a user and password for HTTP basic authentication). You can also check the data by manually navigating to the TravelagencyCollection by following the relative href attribute of the app:collection element as shown here:

In other words, navigate from something like this:

http://gateway.server:port/sap/opu/sdata/IWFND/RMTSAMPLEFLIGHT/?$format=xml

to this:

http://gateway.server:port/sap/opu/sdata/IWFND/RMTSAMPLEFLIGHT/TravelagencyCollection?$format=xml

(The $format=xml is to force the service to return a less exotic Content-Type of application/xml rather than an Atom-flavoured one, so that the browser is more likely to render the data in human-readable form.)

Following this href should show you some actual travel agency data in the form of entries in an Atom feed (yes, “everything is a collection/feed!”):

Step 2. The SAPUI5 Framework

Make your SAPUi5 framework accessible. To avoid Same Origin Policy based issues in your browser, get your Gateway’s ICM to serve the files for you. Create a ‘sapui5’ directory in your Gateway’s filesystem:

/usr/sap/NPL/DVEBMGS42/sapui5/

unpack the SAPUI5 framework into here, and add an instance profile configuration parameter to tell the ICM to serve files from this location:

icm/HTTP/file_access_5 = PREFIX=/sapui5/, DOCROOT=$(DIR_INSTANCE)/sapui5/, BROWSEDIR=2

(here I have 5 previous file_access_xx parameters, hence the ‘5’ suffix in this example)

and when you restart the ICM it should start serving the framework to you:

Step 3. The HTML / Javascript Application Skeleton

Actually, calling it an application is far too grand. But you know what I mean. Now we have the SAPUI5 framework being served, and the OData service available, it’s time to put the two together.

Here’s the general skeleton of the application – we pull in SAPUI5, and have an element in the body where the control will be placed:

    
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>SAP OData in SAPUI5 Data Table Control</title>
    <!-- Load SAPUI5, select theme and control libraries -->
    <script id="sap-ui-bootstrap"
      type="text/javascript"
      src="http://gateway.server:port/sapui5/sapui5-static/resources/sap-ui-core.js"
      data-sap-ui-theme="sap_platinum"
      data-sap-ui-libs="sap.ui.commons,sap.ui.table">
    </script>

  <script>
    ...
  </script>

</head>
<body>
  <h1>SAP OData in SAPUI5 Data Table Control</h1>
  <div id="dataTable"></div>
</body>
</html>

In the final step we’ll have a look at what goes in the “…” bit.

Step 4. Using the SAPUI5 Framework in the Application

So now it’s time to flex our Javascript fingers, stand on the shoulders of giants, and write a few lines of code to invoke the SAPUI5 power and glory.

What we need to do is:

  • create a DataTable control
  • add columns to it to represent the fields in the OData entries
  • create an OData data model
  • link the DataTable to this data model
  • bind the rows to the TravelagencyCollection
  • place the control on the page

Simples!

Creating the DataTable control goes like this (but you must remember to add the control library to the data-sap-ui-libs attribute when loading SAPUI5 – see Step 3):

var oTable = new sap.ui.table.DataTable();

Each column is added and described like this:

oTable.addColumn(new sap.ui.table.Column({
  label: new sap.ui.commons.Label({text: "Agency Name"}),
  template: new sap.ui.commons.TextView().bindProperty("text", "NAME"),
  sortProperty: "NAME"
}));

There are three different templates in use, for different fields – the basic TextView, the TextField and the Link.

The OData data model is created like this, where the URL parameter points to the service document:

var oModel = new sap.ui.model.odata.ODataModel("http://gateway.server:port/sap/opu/sdata/iwfnd/RMTSAMPLEFLIGHT");

It’s then linked to the control like this:

oTable.setModel(oModel);

The specific OData resource TravelagencyCollection is bound to the control’s rows like this:

oTable.bindRows("TravelagencyCollection");

And then the control is placed on the page like this:

oTable.placeAt("dataTable");

I’ve put the complete code in a Github Gist for you to have a look at.

Result

What you end up with is live data from your SAP Gateway system that is presented to you like this:

Share and enjoy!

To report this post you need to login first.

20 Comments

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

  1. Krishnakumar Ramamoorthy
    DJ
    Great blog, thanks for taking time to publish this. Agree, the documentation is awesome and I like the effort that has been put into UI5. There will be a lot of transaction on this in the coming few months..
    KK
    (0) 
  2. Oliver Lackner
    Thanks for the effort putting this nice example together !

    I got so curious and downloaded ‘HTML5Beta_complete.zip’ myself, but it looks like there is stuff missing.
    e.g. sapui5.war\resources contains only ‘sap-ui5.js’, but no ‘sap-ui-core.js’ as even the index.html is refering to.

    Did you have a different UI5 download ?

    Cheers
    Oliver

    (0) 
    1. DJ Adams Post author
      Thanks Oliver

      I grabbed the download from the SDN mini-site, that’s the only link available anyway, I think.

      I’ve not actually needed to dive into the .war file at all, the resources are in the sapui5-static directory, and the docu’s in the demokit directory.

      Good luck!
      dj

      (0) 
      1. Sandip Agarwalla

        Hi DJ, thanks for this great blog..

        quick question – can I host the SAPUI5 folder on the SAP Java server as well. I see you hosted it on the Gateway ABAP stack, how to host it on the Java server?

        Thanks

        Sandip

        (0) 
        1. DJ Adams Post author

          Hi Sandip

          I’m no expert on the SAP Java server (I try to stay away from ‘the dark side’ 😉 but certainly you can host it there, there is nothing special in requirements. More or less any HTTP server will do. I think I’ve even used Mongoose before now.

          Cheers

          dj

          (0) 
  3. Sivakumar M

    Hi Adams,

                 Thanks for this blog. Could you please explain me a bit more about resolving same origin policy? I am new to SAP UI5 development. Right now I am developing an application which will consume a gateway service from SAP internal system. I am stuck with this same origin policy issue. Desperately need a help…

    (0) 
    1. Uday Vir Singh

      Hi shivakumar

      The same origin security policy is a security measure enforced by modern browsers and it prevents scripts to access resources across different sites.

      For development purposes you can disable it on ur browser.

      if you are using chrome . simply start chrome with with a command line parameter

      “–disable-web-security”

      ( you can also create another desktop shorcut with this parameter to save time)

      please not : use this for development purposes only .  deployment grade systems either put all their resources together (on same domain) , or use a custom header (CORS) to enable cross domain access.

      (0) 
  4. Samar Satpalkar

    DJ,

    Nice blog for freshers like me in this domain. I am getting a strange output saying “No data”. I have disabled all the web security settings on Chrome. Set the context parameters as well. I am trying both in house as well as SAP System still no luck, can you please point out how I could debug with what’s going wrong on this one. Any help will be appreciated.

    Using 1.8.4 SAPUI5 download, JRE 1.7.0, Eclipse Indigo and Tomcat 7.0. Any pointers will be appreciated.

    (0) 
    1. DJ Adams Post author

      Hi Samar

      Thanks.

      Debugging – first thing would be to have a look at what’s in the Network and Console sections of your Chrome developer tools.

      Also, does the code look like what’s in the Gist (https://gist.github.com/qmacro/1820544) – I updated it for 1.8.4, there were a few minor changes required.

      cheers

      dj     

      (0) 
  5. Samar Satpalkar

    Hi DJ,

    Yes I see that it is pointing to Access control allow origin Policy.

    Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin.

    Also I used the updated code but now have to find out a way of getting rid of this error after which all my UI5 Apps will start to work. Between I am working on some UI5 Starter Application Project using SAP Gateway services. Any pointers to resolve the Access-Control-Allow-Origin error will be helpful.

    Thanks for your pin point solutions. Glad to be connected to a mentor like you.

    (0) 
    1. DJ Adams Post author

      Hi Samar

      Can you possibly share your code? Would be useful to see and perhaps spot the issue. Where are you serving your UI5 libs from?

      dj    

      (0) 
        1. DJ Adams Post author

          HI Abbasi

          There isn’t a single solution, it depends on the detail of the error. What error exactly are you getting, and what does your code look like?

          cheers

          dj    

          (0) 
          1. Abbasi Sadikot

            Hi DJ,

            Thanks for your prompt response. I don’t see your mail id, so i am posting my code here. This code is working in Snippix like a charm. But shows ‘No Data’ while trying in Eclipse. I am using SAPUI5 1.9.2 and Tomcat 6.

            Controller looks like this:

            onInit: function() {

                       var sServiceUrl = “proxy/http/ldciehi.wdf.sap.corp:44336/sap/opu/odata/sap/ZABB_T5VA5_SRV”;

             

                      var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true, “USER”, “PWD”);

               this.getView().setModel(oModel);

               },

            View.js looks like this:

            sap.ui.jsview(“absence_mapping.AbasenceDetails”, {

                  getControllerName : function() {

                     return “absence_mapping.AbasenceDetails”;

                  },

                  createContent : function(oController) {

                       

                          jQuery.sap.require(“sap.ui.table.Table”);

               

                          // create table control with properties

                          var oTable = new sap.ui.table.Table({

                          width : “100%”,

                          rowHeight : 50,

                          title : “T5VA5 Table”,

                          selectionMode : sap.ui.table.SelectionMode.None

                          });

               

                          // define the columns, which should be displayed

               

                          oTable.addColumn(new sap.ui.table.Column({

                                    label : new sap.ui.commons.Label({

                                    text : “MOABW Grouping”

                                    }),

               

                                    template : new sap.ui.commons.TextView({

                                    //text : “{ProductID}”

                                    text : “{Moabw}”

                                    }),    

                                    sortProperty : “Moabw”

                                    }

                          ));

               

                          oTable.addColumn(new sap.ui.table.Column({

                                    label : new sap.ui.commons.Label({

                                    text : “Absence Type”

                                    }),

                                    template : new sap.ui.commons.TextView({

                                              text : “{AbsType}”

                                    }),

                                    sortProperty : “AbsType”

                                    }

                          ));

                          oTable.addColumn(new sap.ui.table.Column({

                                    label : new sap.ui.commons.Label({

                                    text : “End Date”,

                                    textAlign : sap.ui.core.TextAlign.End

                                    }),

                                    template : new sap.ui.commons.TextView({

                                    text : “{End}”,

                                    textAlign : sap.ui.core.TextAlign.End

                                    }),

                                    sortProperty : “End”

                                    }));

                          oTable.addColumn(new sap.ui.table.Column({

                                    label : new sap.ui.commons.Label({

                                    text : “Begin Date”

                                    }),

                                    template : new sap.ui.commons.TextView({

                                    text : “{Begin}”

                                    }),

                                    sortProperty : “Begin”

                                    }));

                          oTable.addColumn(new sap.ui.table.Column({

                                    label : new sap.ui.commons.Label({

                                    text : “Absence Grouping”

                                    }),

                                    template : new sap.ui.commons.TextView({

                                    text : “{AbsGroup}”

                                    }),

                                    sortProperty : “AbsGroup”

                                    }));

                          oTable.bindRows(“/Absences”);

                                    return oTable;

                  

                  }

            });

            HTML like this:

            <html>

                   <head>

                          <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

                                               <script

                                                                     src=”resources/sap-ui-core.js”                                                        

                                  id=”sap-ui-bootstrap”

                                  data-sap-ui-libs=”sap.ui.commons”

                                  data-sap-ui-theme=”sap_goldreflection”

                                  data-sap-ui-libs=”sap.ui.commons,sap.ui.table” >

                                               </script>

                          <!– add sap.ui.table,sap.ui.ux3 and/or other libraries to ‘data-sap-ui-libs’ if required –>

                                               <script>

                                 sap.ui.localResources(“absence_mapping”);

                                 var view = sap.ui.view({id:”idAbasenceDetails1″, viewName:”absence_mapping.AbasenceDetails”, type:sap.ui.core.mvc.ViewType.JS});

                                                      view.placeAt(“content”);

                                               </script>

                   </head>

                   <body class=”sapUiBody” role=”application”>

                          <div id=”content”></div>

                   </body>

            </html>

            Thanks,

            Abbasi

            (0) 
            1. DJ Adams Post author

              Snippix – that’s the SAP-internal site, right?

              Can you also give us any errors you’re getting – you need to look in the console (e.g. in Chrome – developer tools).

              Would be worth checking that the proxy service in Eclipse is working properly, too.

              dj

              (0) 
  6. Debdutt Mondal

    Hi DJ!

    A great blog, i faced some problem in chrome though with the code, the table looked very weird. Got solved by adding <!DOCTYPE html> at the top of the html file.

    Any plans for adding the put post part as well ? 🙂 would love to have some simple code to do that.

    Thanks,

    Debu

    (0) 
  7. Rajesh Andavar

    Hi DJ,

    Thanks a lot for your wonderful blog, but still we need some guidance to place SAPui5 JS framework in server path. Actually we downloaded HTML5Evaluation_complete_1.12.1 and we uploded the content from “\resources” folder to the server path and made available via server url like the below,

    http://yyyyyyy:xx/sapui5/sapui5-static/resources/sap-ui-core.js

    and we implemented the script in our index.html like this

    <script id=”sap-ui-bootstrap”

                        type=”text/javascript”

                        src=”http://yyyyyyy:xx/sapui5/sapui5-static/resources/sap-ui-core.js

                        data-sap-ui-theme=”sap_platinum”

                        data-sap-ui-libs=”sap.ui.commons,sap.ui.table”>

                     </script>

    Index.html is in our local machine, we are trying to build a client application alone, meaning it wont be deployed in any server. Simply we are trying to build a static pages with odata service calls. Is it really feasible, and also I put the error message we got

    Error: failed to load ‘sap.ui.core.library’ from http://yyyyyy:xx/sapui5/sapui5-static/resources/sap/ui/core/library.js: 0 – [Exception… “Failure”  nsresult: “0x80004005 (NS_ERROR_FAILURE)” location: “JS frame :: http://yyyyyyy:xx/sapui5/sapui5-static/resources/sap-ui-core.js :: .send :: line 25″  data: no]

    So please suggest me the way to implement or point out the mistakes we did here. Thank you very much for your time.

    (0) 
  8. Christian Weiß

    Hi DJ,

    thanks a lot for this helpful blog. I tired the source code from Github link and received an empty table. After changing the data binding to:

         oTable.bindRows(“/TravelagencyCollection”);

    the sample works fine. I hope this comment will help beginners (like me) if they are facing the same problem.


    Thanks,

      Christian

    (0) 

Leave a Reply