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

[Former Member]

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 : https://sapui5.hana.ondemand.com/sdk/#docs/guide/5ca68e6e62e6464a8103297fbc19cd9c.html

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?

Regards

[Former Member]

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

http://plnkr.co/x3QWfFZMBMU1VtW0vJch

[WouterLemaire]

Hi,

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,

Wouter

[former_member193051]

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,

Tobias

[Former Member]

Hi Tobias,

Thanks for your quick reply . But what one more point i wanted to address was the use of ux3 shell in the application. As per my understanding the shell provide it's own navigation capabilities . So how does that interplay with routing mechanism .

For example if I use ux3.shell to struct the application , how will the routing work ?  Or should I use application header instead to have the common navigation links? If using Application Header is the case then how do i make it common across all pages ?? - is it by adding the header to the content div directly or is there any other practice to follow ?

Regards

Mayank Jain

[former_member193051]

Hi,

a ux3 shell has a worksetItems aggregation. There you can put in your navigation items.

On the press of an item you can invoke the navTo function of the router.

You also have to make sure that you select the currect item in the shell.

one route could look like this

{

				pattern: "",
				name: "index",
				view: "myView",
				viewType: sap.ui.core.mvc.ViewType.XML,
				targetControl: "shell",
				targetAggregation: "content",
				clearTarget: true,

}

so you would add a view to the content aggregation of the shell.

clear target makes sure that other content in the aggegation gets deleted.

Hope that helps.

Best Regards,

Tobias

[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 :

<script>

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

  new sap.m.Shell({

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

  height : "100%",

  name : "sap.ui.demo.tdg"

  })

  }).placeAt("content");

  });

  </script>

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 .

Regards

Mayank