Skip to Content

I’m a sucker for any new technology. Even more so when it revolves around SAP. So lately, I’ve really been pampered with a bunch of new hot ‘n sexy stuff. I kinda stumbled into the NetWeaver Cloud technology (NEO) and while I was looking into that, Rui Nogueira ‘s blog also pointed me into SAPUI5’s direction.

2 brand spankin’ new technologies! I’m having a field trip here.

The first problem of course, is getting up to speed with both of these technologies. There are already some nice tutorials and blogs out there to get you started, but the finer tricks can only be figured out by getting your hands dirty.

First stop was CodeJam Huizen where the experts would be present, so I could get some inside info. After that, I was on my own.

Hobby project

Anytime you want to learn something new, you need a working project. Something you can get up and running pretty quickly, and extend later on to try out new stuff. I worked together with Tim Guest in the past to create a mobile SCN Reader concept, which we got working, but a lot of functionality was missing and we were blocked on the lack of an SCN API. Stil, the concept was nice, so I decided to redo it, but this time using all SAP technology.

I uploaded the package to my google drive for now. I’ll try to update it as I progress and discover more tips ‘n tricks.

Backend transformation

Consuming information from SCN can be done via RSS feeds. Jason Lax doesn’t know it, but he gave me a tremendous help by creating a document on all of SCN’s feeds. RSS data is a bit hard to consume in SAPUI5 (I’m pretty sure it’s possible), but I thought it would be way nicer to create a proxy on NEO which would convert the XML into JSON. It fits in a lot better with the “Mobile First” idea. So I created a Servlet which holds a generic proxy to read in feed data and transform it into JSON. This also solves the possible problems with cross site scripting. Modern browsers do not allow you to consume services from a different domain, than the one the page you are visiting belongs to.

In the doGet, we insert following code:

        //create URL   
        try {
                  String address = request.getParameter("address");
                        URL url = new URL(address);
            // Read all the text returned by the server
            BufferedReader in = new BufferedReader(new InputStreamReader(url.openStream()));
            StringBuilder fullResponse = new StringBuilder();
            String str;
            while ((str = in.readLine()) != null) {
                // str is one line of text; readLine() strips the newline character(s)
                        fullResponse.append(str);            
            }
            in.close();
            JSONObject jsonObj = org.json.XML.toJSONObject(fullResponse.toString());
            response.getWriter().println( jsonObj.toString() );
        }
        catch (MalformedURLException e) {
                  response.getWriter().println(e);
        }
        catch (JSONException e){
                  response.getWriter().println(e);        
        }
        catch (IOException e) {
                  response.getWriter().println(e);              
        }

All the JSON statements come from the library found on JSON.Org and are included with the import statement:

import org.json.*;

Once you deploy the servlet, you can fetch JSON feeds by simply calling the servlet with the feed url as parameter (escaped of course)

ex: http://server.domain/scnReader/FeedMe?address=http:%2F%2Fscn.sap.com%2Fblogs%2Ffeeds%2Fposts

SAPUI5 Layout

In order to create a basic front-end layout, I based myself on the introduction blog to SAP UI5 and NEO. Afterwards I decided to rework it following the MVC principle. So far, nothing new, except for the fact that I really had a lot of work just getting through these basic steps.

I created a simple shell, with one workitem (Blogs) (see shell.view.js and shell.controller.js), which contained a BlogList view (which was nothing more but a table). (see bloglist.view.js)

The fun started when I had to connect the front-end to the back-end and consume the info coming from the FeedMe servlet. So in the bloglist controller, I had to bind a JSON model to my table. (see bloglist.controller.js)

    onInit : function() {
              var sServiceUrl = "/scnReader/FeedMe?address=http:%2F%2Fscn.sap.com%2Fblogs%2Ffeeds%2Fposts";
              if(!this.getView().getModel()){
                        var oModel = new sap.ui.model.json.JSONModel(sServiceUrl);
                        this.getView().setModel(oModel);
                        sap.ui.getCore().byId("tblBlogs").bindRows("rss/channel/item");
                 }
    },

In the OnInit, we create a new JSON model, which gets its info from our FeedMe servlet. The model is then bound to our view. The rows of the table in our view, can then be bound to the items in the JSON feed. Sounds easy enough, but the real trick is the path to feed’s property. You have to use the forward slash as path separator. It’s only thanks to Matthias Steiner  that I figured this out.

If we would run this already, we would get a nice list of the last 15 blogs on SCN:

scnReader.blogs.jpg

* The strange characters are caused by some blogs written in Chinese or at least, a language with none ASCII characters.

Obviously, the titles alone are not enough, so we want to be able to click through to the contents. In order to do so, we need a simple contents view that holds an HTML area and a back button. The back button requires a binding to an event handler so we can navigate back to the blog list later on. (See blogcontent.view.js and blogcontent.controller.js)

Navigation

If we want to be able to navigate from the list to the contents, then we need an event handler on “RowClick” which will determine for which blog, we want to show the contents, and transfer us to the next view. Coming from the WebDynpro world, I’m used to defining my navigation in a declarative way. Just binding outbound plugs to inbound plugs, and then firing the right plug when you want to navigate. In SAPUI5, I couldn’t find any navigation API yet, so I decided to mimic the WebDynpro approach instead.

I created a navigation function, which takes in the target view, target plug, the view name (ID which you want it to be known by), the event parameters and maybe the model information. (if you want to pass that)

function navigate(viewName, targetView, targetPlug, oEvent, oModel){
          var oShell = sap.ui.getCore().byId("scnReaderShell");
          var oView = sap.ui.getCore().byId(viewName);
          var oCtrl = null;
//        instantiate the content view if it doesn't exist yet
          if (!oView) {
              oView = sap.ui.view({
                              type : sap.ui.core.mvc.ViewType.JS,
                              id : viewName,
                              viewName : targetView
              });
              if(oModel){
//                      bind it to the same model
                        oView.setModel(oModel );              
              }
          }
          if(oView != null){
                    oCtrl = oView.getController();
          }
          if(oCtrl != null){
//                  Navigate to the content view
                    oCtrl[targetPlug](oEvent);
          }
 //       show the view
          oShell.setContent(oView,true);
          return oCtrl;
}

We bind the onRowSelect event of our bloglist table to an event handler in our bloglist controller, and fire our navigation to the contents. Notice how we pass the model information from our list to the contents view, because we need of course the information available in our feed.

    onRowSelect : function(oEvent) {
//            navigate to the contents of the blog, pass model along
              navigate("vwBlogcontent", "scnReader.view.blogcontent", "inBound", oEvent, this.oParent.getModel());
    },

In the contents controller, we then just have to retrieve the reference to the blog we wanted to read, and bind it’s feed description to our HTML area

    inBound: function(oEvent ){
                    var oContext = oEvent.getParameter("rowContext");
                    var bindpath = oContext + "/description";
                    this.setContent(bindpath);
    },
    setContent: function(bindpath){
                    var id = "htmlBlog";
                    var model = this.oView.getModel();
                    var core = sap.ui.getCore();
                    if (core) var elem = core.byId(id);
                    if (elem){
                              elem.setContent( model.getProperty(bindpath) );
                    }    
    },

We also bind our back button to an event handler which will navigate to the list again.

    back: function(oEvent ){
//           Navigate back to the list, Don't change the model    
              navigate("vwBlogList", "scnReader.view.bloglist", "inBound", oEvent, null);
    }

The result will show us our blogcontents in a nice SAPUI5 formatting.

scnReader.content.jpg

Up to now it’s still pretty basic, and you still can’t like nor rate blogs. I don’t even know if this will ever be possible. The SCN team is pondering about exposing REST services for this end, so maybe that will come. Until that time, I’ll just continue to expand my little learning project with comments, discussions etc…

The main things that I wanted to share here are:

  • JSON model binding
  • Navigation in SAPUI5
  • Feed transformation in NEO
To report this post you need to login first.

4 Comments

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

  1. Tom Van Doorslaer Post author

    One more side note:

    I’m not the only one who decided to create an SCN reader in SAPUI5.

    It seems to be a very popular hobby project to learn the ins and outs on NEO and SAPUI5.

    Maybe we should toss our brains together. 🙂

    (0) 
    1. Tim Guest

      A very interesting post Tom. I will get my pal DJ Adams to look at this as maybe collectively we could add some value.

      (0) 
    2. Matthias Steiner

      Nice blog post Tom!

      Just so that you know, I’m in the midst of reviving our demo app we showcased last year at TechEd, where we opted for the same scenario, yet it also came with a jQuery UI for mobile as well. If things go well it should be up soon.

      One last remark… if you could tag your post with “sapnwcloud” it would be picked up on the SAP NetWeaver Cloud Dev Center blog roll as well.

      Looking forward to seeing more posts from you 😉

      (0) 
  2. Fahad Ajaib

    Hi guys,

    I have a question. How can I pass a single value from SAPUI5 Mobile APP Page1 to Page2 and then how to access this value on Page2. Please guide me in this regard.

    Thanks and best regards.

    Fahad

    (0) 

Leave a Reply