Skip to Content

Last month Steffen Schwark wrote a good blog on Structuring an SAPUI5 application with MVC, his blog inspired me to port a SAPUI5 application I had been working on to use MVC. I thought I would share the code here on SCN in the hope that others will do likewise and share their experiences.

The code for the application is available on Code Exchange or here as a zip. Follow the simple installation instructions below, when you run it should look something like the pics below.

/wp-content/uploads/2012/06/nested1__113348.png

/wp-content/uploads/2012/06/nested2__113349.png

Application Structure

The application has three main views

  • a customers view with master details and a google map, this view has 3 nested views, one of each type (xml, js and json)
  • a products view with master details filtered by categories
  • a shell view which houses the customers and products views

Each of the main views has its own controller, the customers and products views present data from OData Models.

/wp-content/uploads/2012/06/app_struct_113268.png

Installing The Application

I developed the application locally using the IIS (Internet Information Services/Server) web server on my laptop. IIS is very easy to use

GOTO Control Panel\All Control Panel Items\Administrative Tools\Internet Information Service (IIS) Manager

Right click the PC -> Start, you have a webserver running locally

Follow Getting Started with SAPUI5 Installing the SAPUI5 SDK on Visual Studio 2010, the steps are very similar for IIS

Unpack or deploy the source to a folder name ‘nested’ and add as a website like step above

You should now be able to access the application using http://localhost/nested/

Conclusion

My original application had grown into a big ball of mud, all the javascript code was in a single file and it had become very hard to manage. By separating the concerns of my application into small pieces and following the MVC paradigm, the code is now a lot more flexible, easier to test, reuse and build upon.

I am very interested in hearing from others, please download and run the code and get back to me with any comments and suggestions. One thing I would like to hear from those more learned is in how best to implement MV* with SAPUI5, whether it is better to follow MVC, MVP or MVVM.

* The images included in the application were sourced using the Creative Commons search engines.

To report this post you need to login first.

17 Comments

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

  1. Martin English

    nice stuff, JP..

    I’ve been meaning to look at UI5 “sometime real soon now”      ®, and hopefully this will inspire me to get off my backside and actually do it 🙂

    (0) 
  2. Tom Van Doorslaer

    Your example app has already helped me tremendously in updating my own hobby app to use MVC.

    Still some work to be done though, but I’m almost there…

    Thanks for the valuable information!

    (and I really have to pour my learnings in a blog as well)

    (0) 
  3. Puran Khoeval

    Hi JSP,

    A very nice blog indeed!!

    Not sure why I am getting the following error:

    Uncaught Error: failed to load ‘nested.views.shell.view’ from http://localhost/nested/views/shell.view.js: 0 – Error: NETWORK_ERR: XMLHttpRequest Exception 101

    Can you please guide me what could be the root cause?

    I have replicated your code. Initially I was getting an error “app.js” not found so had to change the folder structure. Currently my app.js and index.html  files lies under the folder “WebContent”.

    Thanks,

    Puran.

    (0) 
    1. John Patterson Post author

      Hi Puran

      “Currently my app.js and index.html  files lies under the folder “WebContent”.”

      That code was written before the eclipse plugin was released. I will try and walk you through what else you need to do.


      In apps.js comment out the following line

      jQuery.sap.registerModulePath(“nested”, “http://localhost/nested“);

      then create the expected module path by

      – creating a folder called ‘nested’ under the WebContent folder

      – copy the controller, views and Images folders into the ‘nested’ folder

      The app should work now.

      ps. i believe there are a few inconsistencies with the recent versions of googlemaps and sapui5, but am i told these are easy to fix.

      Cheers

      JSP

      (0) 
      1. Puran Khoeval

        HI JSP,

        Thanks a lot for your reply!!

        After following your instructions app has started working but the data is not loaded in any of the table.

        I was assuming the service url is not returning any result but when I launched the url “http://services.odata.org/Northwind/Northwind.svc/Customers/?$format=json“. I was able to see the customer IDs. I have disabled the web security as well in the chrome and I am not getting any authorization error for cross domain.

        Can you please guide me on this. Thanks!

        Regards,

        Puran.

        (0) 
        1. John Patterson Post author

          Hi Puran

          Since that app was written sapui5 requires collection paths

          in “nested.controller.customers”

          sap.ui.getCore().byId(“tblCustomers”).bindRows(“Customers”);

          change to

          sap.ui.getCore().byId(“tblCustomers”).bindRows(“/Customers”);

          and likewise in “nested.controller.products”

          oModel._loadData(“/Suppliers”);

          ..

          sap.ui.getCore().byId(“tblProducts”).bindRows(“/Products”, null,

          [ oFilter ]);

          .

          sap.ui.getCore().byId(“cbCategories”).bindItems(“/Categories”, oLITemp,

          null).setValue(“Beverages”);

          Cheers

          JSP

          (0) 
            1. Puran Khoeval

              Hi JSP,

              I had followed your post on the mobile odata demo and had few
              problems in data binding.

              Have actually posted my queries in the post http://scn.sap.com/thread/3285037
              where you have replied, not sure if you are still following that post so
              thought of putting it here.

              Applogies for putting this post here which is not relavat to
              this blog. Many Thanks!!

              Best Regards,

              Puran Khoeval.

              (0) 
      2. Rahul Muraleedharan

        Hi John,

        I am using the SAP UI5 plugin for eclipse to do the developments. I have followed all the steps mentioned above, but the application is not working. I have created a new folder ‘nested’ and put the three folders (controllers, views and images) under the folder and also commented out the statement “jQuery.sap.registerModulePath(“nested”, “http://localhost/nested“);” in app.js. But still it is not working.

        I am getting the following errors

        Failed to load resouce: http://localhost:51760/nested/resources/nested/views/shell.view.js

        Uncaught error: failed to load ‘nested.views.shell.view’ from resources/nested/views/shell.view.js: 404 – Resource could not be found!

        The conent of my INDEX.HTML file is as below:

        <!DOCTYPE html>
        <html>
        <head>
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
        <title>Nested Views Test</title>
        <script type=”text/javascript”
                src=”https://maps.googleapis.com/maps/api/js?sensor=false“></script>
        <script src=”resources/sap-ui-core.js”
           type=”text/javascript”
           id=”sap-ui-bootstrap”
           data-sap-ui-libs=’sap.ui.commons,sap.ui.ux3,sap.ui.table’
           data-sap-ui-theme=”sap_goldreflection”>
        </script>
        <script src=”app.js”>
        </script>

        </head>
        <body class=”sapUiBody”>
            <div id=”uiArea”></div>
        </body>
        </html>

        Regards,

        Rahul MB

        (0) 
  4. Alexey Cherepnev

    Hi JSP,

    great job! It seems that this post is exactly what I need. Unfortunately, I cannot get the code for this application neither from Code Exchange nor as a zip file.

    Best,

    Alexey

    (0) 
  5. Jon-Paul Boyd

    Hi John,

    Very interesting article as I’m trying very hard to adhere to MVC principles in my developments.

    Would love to take a closer look at your work but unable to access either from the code exchange or with the zip, grateful if you can check.

    Many thanks.

    (0) 

Leave a Reply