Skip to Content

Over the last couple of weeks various developers have contacted me asking me if i knew of a simple mobile SAPUI5 example which used both the ODataModel and the BlueCrystal theme. I have built one and thought i would share it with everyone.

The app uses the Northwind OData Service and showcases some of the sap.m and sap.me features like the sap.m.App, sap.m.Shell and sap.me.TabContainer, all up approximately 100 lines of code.

/wp-content/uploads/2013/07/bluecrystal1_245521.png/wp-content/uploads/2013/07/bluecrystal2_245522.png

You can find the source on github

https://github.com/jasper07/sapui5bin/blob/master/OData_BlueCrystal.html

UPDATE:

I have created a copy of the sample application that uses Declaritive HTML, similar amount of code, should be handy for those starting to develop with the HTML View, a couple of the expression took some trial and error

https://github.com/jasper07/sapui5bin/blob/master/OData_BlueCrystal_Declaritve.html

Also this morning the Northwind OData Service was down so I was working off the Mock Northwind OData Service provided in the SAPUI5 SDK.

Both versions have been updated to allow data to be read from the fake service.

This also means the application can be tested online without SOP issues

http://jsbin.com/udeqev/1/

http://jsbin.com/udeqev/1/edit code

To report this post you need to login first.

11 Comments

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

  1. DJ Adams

    Hey

    Loved this. A great, self-contained example of aggregation bindings, paths and context with OData. Here are the things that I liked in particular:

    – the path and formatter properties for the StandardTile’s number property and the use of the productCount to, well, count the products

    – the example of how (and where – in the binding) to include an OData parameter

    – the use of getContexts().length to count the (already fetched, via $expand) Products for the given Category

    One question – is there any reason you wrapped the App in a Shell before placing in the DOM?

    cheers

    dj

    (0) 
    1. John Patterson Post author

      dj

      Thanks a lot for the feedback. “self-contained” is a good description of what i was going for. The target audience for this application is developers who haven’t had the time to investigate SAPUI5 but are familiar jQuery and JQM, hopefully presenting this way gives them a familiar perspective.

      One of the things i like about SAPUI5 is the variety of ways you can solve the same problem. I went through many iterations of rendering the tiles from the model data, the example i ended up with uses a tile template with a binding aggregation, I think this way is very effective and probably the easiest to represent in a HTML View.

      The other thing i really like about SAPUI5 is method chaining, in the case of the Product Count the chaining may have over simplified what is going on.

      var aBindings = this.getModel().bindList(“Categories(n)/Products”);

      var aContexts = aBindings.getContexts();

      var productCount = aContexts.length;

      return productCount;

      or

      return this.getModel().bindList(sPath).getContexts().length;

      A really useful resource for understanding bindings is the ODataModel qUnit Test.

      https://sapui5.netweaver.ondemand.com/test-resources/sap/ui/core/qunit/ODataModel.qunit.html

      Why did i wrap the App in a sap.m.shell? I use a variety of widescreen monitors with different resolutions, by default the Shell restricts the rendering width of the application when run on a desktop to 1024px (I think) and therefore I get some consistency and you can predict what it will look like on other peoples desktops.

      Cheers

      jsp

      (0) 
      1. DJ Adams

        Thanks jsp

        That’s a good tip on the qunit for ODataModel. What the SAPUI5 team puts out as an SDK is pretty impressive – the runtime itself, plus the great docu, and the unit tests and demos/examples.

        cheers

        dj

        (0) 
  2. Arun Sambargi

    Hello John,

    I am able to view the output using the Fake service, as soon as i comment the two lines as mentioned in the code, i get no output.

    Error Details in Chrome Dev Tools

    Network tab


    1. Request URL:http://services.odata.org/Northwind/Northwind.svc/$metadata
    2. Request Method:OPTIONS
    3. Status Code:501 Not Implemented

    Console Tab

    1. OPTIONS http://services.odata.org/Northwind/Northwind.svc/$metadata 501 (Not Implemented) sapui5.netweaver.ondemand.com/resources/sap/ui/thirdparty/datajs.js:17

    XMLHttpRequest cannot load http://services.odata.org/Northwind/Northwind.svc/$metadata. Request header field x-csrf-token is not allowed by Access-Control-Allow-Headers.

    I am having same issue in all my SAP UI5 examples when trying to access the northwind odata services. Can you please let me know what am i missing.

    Code :

    http://jsbin.com/uborey/1/edit

    Thanks,

    Arun Sambargi

    (0) 
    1. John Patterson Post author

      Hi Arun

      I believe the Northwind OData services had some firewall issues which have now been resolved.

      I am able to run you code with no issues.

      hth

      JSP

      (0) 
  3. Deepak Malviya

    Hi John,

    Hope you are doing well.

    I went through this example of yours and i am also getting the same error as mentioned above by Arun.

    Even i am not getting this using those two lines for fake service.

    Can you please assist on this.

    Thanks,

    Deepak

    (0) 

Leave a Reply