Skip to Content
Author's profile photo John Patterson

Nested Views in SAPUI5 MVC

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.



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.


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/


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.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Martin English
      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 🙂

      Author's profile photo John Patterson
      John Patterson
      Blog Post Author

      Cheers mate, was something to do on a long train commute

      Author's profile photo Tom Van Doorslaer
      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)

      Author's profile photo John Patterson
      John Patterson
      Blog Post Author

      Hi Tom,

      Thanks, I am glad it has helped. Please do blog.


      Author's profile photo Puran Khoeval
      Puran Khoeval

      Hi JSP,

      A very nice blog indeed!!

      Not sure why I am getting the following error:

      Uncaught Error: failed to load '' 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".



      Author's profile photo John Patterson
      John Patterson
      Blog 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"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.



      Author's profile photo Puran Khoeval
      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 "$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!



      Author's profile photo John Patterson
      John Patterson
      Blog Post Author

      Hi Puran

      Since that app was written sapui5 requires collection paths

      in "nested.controller.customers"


      change to


      and likewise in "nested.controller.products"



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

      [ oFilter ]);


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




      Author's profile photo Puran Khoeval
      Puran Khoeval

      Hi JSP,

      Following your instructions I was able to get it working!! Many thanks for your help,

      Best Regards,

      Puran Khoeval

      Author's profile photo Puran Khoeval
      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
      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.

      Author's profile photo Rahul Muraleedharan
      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 ""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 '' 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>
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <title>Nested Views Test</title>
      <script type="text/javascript"
      <script src="resources/sap-ui-core.js"
      <script src="app.js">

      <body class="sapUiBody">
          <div id="uiArea"></div>


      Rahul MB

      Author's profile photo Former Member
      Former Member

      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.



      Author's profile photo Jon-Paul Boyd
      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.

      Author's profile photo Former Member
      Former Member

      I think that code-exchange is no longer supported by SAP, therefore the links don't work:

      Author's profile photo Former Member
      Former Member

      🙂 nice stuff

      Author's profile photo Former Member
      Former Member

      Hi John,

      the source code link is expired. Can you post it again?

      Author's profile photo Sijin Chandran
      Sijin Chandran

      Can you please post this code again.
      Link seems to be expired.