Skip to Content
author's profile photo Former Member
Former Member

Best Practice for Feature rich SAPUI5 app with ux3 Shell like features and routing?

Hi Community,

Just wanted to know what are the best practices for building a feature rich SAPUI5 application. The basic requirement is to have a ux3 shell like structure and follow the best practices of having a component.js and router based navigation. The best practice guide on the following link primarily deals only with a Master-Detail simple application :

But if we want to have a complex application which starts with a logon screen and have fixed navigation links to different functionality - What is the best way to structure the application ?

Can someone please suggest?


Add a comment
10|10000 characters needed characters exceeded

Assigned Tags

Related questions

3 Answers

  • author's profile photo Former Member
    Former Member
    Posted on Aug 22, 2014 at 07:56 AM

    Hi Mayank,

    that is something whats clearly missing in the UI5 demo apps.

    It makes sense to use a component as the best practice guide proposes.

    This component will have your login view + some page where you jump to other features or small apps.

    These app could be components again. This is the point where it gets tricky with the routing, since UI5 does not support child/parent relations of Routers. So probably the parent route will pass the child component a base path and the child component will prefix its routes with that one.

    So the children don't have to know the parent and can be reuseable components.

    Hope that helps a bit.

    Best regards,


    Add a comment
    10|10000 characters needed characters exceeded

    • Former Member Former Member

      Hi Tobias,

      Is it possible for you to provide a small sample ? What I am confised with is with best practice example. In best practice example , there is this following piece of code :


      sap.ui.getCore().attachInit(function() {

      new sap.m.Shell({

      app: new sap.ui.core.ComponentContainer({

      height : "100%",

      name : "sap.ui.demo.tdg"





      So if i have to use ux3 shell , do i need to have the ux3 Shell instantiated here?? or some thing else has to be done? If ux3 shell has to be instantiated here , the how to do add different pages to this Shell?? and in Component.js how it has to be defined - What will be the root view in this case ??

      metadata : {

      name : "TDG Demo App",

      version : "1.0",

      includes : [],

      dependencies : {

      libs : ["sap.m", "sap.ui.layout"],

      components : []


      rootView : "sap.ui.demo.tdg.view.App", // What will be the root in this case?

      A small structure on to architect this wiould be helpful .



  • Posted on Aug 22, 2014 at 08:49 AM


    Good question! I think there are several options to build one big SAPUI5 application in a good structure.

    • One option could be all in one application and use create subdirectories in your project. So you'll have a good overview of all the views.
    • Another option could be to create one main SAPUI5 application with your logon and an overview page with your menu. For every application, you could create a new SAPUI5 application. And every menu item you could navigate to the url of the SAPUI5 application. SAPUI5 is client side and it will lose some of the benefits because not all the applications will be loaded first time. But if your application is really complex it could slow down and is this maybe not a bad option. Think this is also the way to add your own applications to Fiori.

    Kind regards,


    Add a comment
    10|10000 characters needed characters exceeded

  • author's profile photo Former Member
    Former Member
    Posted on Jul 07, 2016 at 10:45 PM

    I think there is not an official best practices document. But I made some tests and I'm using this architecture.

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.