on 08-22-2014 8:09 AM
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
I think there is not an official best practices document. But I made some tests and I'm using this architecture.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi,
Good question! I think there are several options to build one big SAPUI5 application in a good structure.
Kind regards,
Wouter
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
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
User | Count |
---|---|
90 | |
10 | |
10 | |
10 | |
7 | |
7 | |
6 | |
5 | |
4 | |
3 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.