Static header in SAPUI5 application for navigation
Generally sapui5 application follow the singleton pattern where we have one controller and multiple fragments in xml view controlling the functionality. Supposedly if you are not using the singleton pattern and decide to code your application to have a static header that helps you navigate to the different objects. In this scenario we can have menu that contains orders, parts, reports modelled as objects and each entity has a separate controller. If you have to load a static header for the application you have to add the fragment in each view linked to each separate controller. Hence the header menu code will reside in the orders view, reports view and so on. You will be having multiple instances of the header object that could slow down your ui5 application. How to avoid this situation?
There is a small code change that you have to do in your manifest.json file where we define the routes.
- IN the routing configuration define the routes like this:
“menu”: {
“viewType”: “XML”,
“transition”: “show”,
“clearAggregation”: true,
“viewName”: “commons.SmartistMenu”,
“viewLevel”: 1,
“controlAggregation”: “pages”,
“controlId”: “head”
},
“orders”: {
“viewType”: “XML”,
“transition”: “slide”,
“clearAggregation”: true,
“viewName”: “orders.OrderManagement”,
“viewLevel”: 2,
“controlAggregation”: “pages”,
“controlId”: “app”
- Define the target like this:
“name”: “orders”,
“pattern”: “orders/{companyId}”,
“greedy”: false,
“target”: [
“menu”,
“orders”
]
},
So in this scenario the menu can be treated as an object (controller and a view associated to it)and called in the target of each controller. Hence a single instance of the menu will be available in your application.
Could you please provide us with some more context of your app or a working example?
Maybe the index.html?
Best regards
Hi Andreas,
The below screenshot is of the working application. Here the tabs of inventory, orders,reports, Manage and Overview are part of menu controller and on clicking each tab we load the second view/controller that acts as a child view. Hence we have a single instance of menu controller. If you are using multiple controllers and need to have such a header menu and do not want to leave the context of the main menu on clicking of the child controller then this is the best approach
Hi Prabuddha Raj,
I have similar requirement, but the second view content over writing the first view content maintained as target. I see only projectVariant" content not the "header" content.
manifest code below:
"routing":{
"config":{
"routerClass":"sap.m.routing.Router",
"viewType":"XML",
"viewPath":"com.app.demo.view",
"transition":"slide",
"controlId":"app.demo.home",
"controlAggregation":"pages",
"bypassed": {
"target": "defaultPage"
}
},
"routes":[
{
"pattern":"",
"name":"projectVariant",
"target":["header","projectVariant"]
},
{
"pattern":"availableBOMs",
"name":"availableBOMs",
"controlAggregation":"pages",
"target":"availableBOMs"
},
{
"pattern":"impactAnalysis",
"name":"impactAnalysis",
"target":"impactAnalysis"
}
],
"targets":{
"defaultPage": {
"viewName": "DefaultPage",
"transition": "show"
},
"header":{
"viewName":"header",
"viewLevel":1
},
"projectVariant":{
"viewName":"projectVariant",
"viewLevel":2
},
"availableBOMs":{
"viewName":"AvailableBOMs",
"viewLevel":3
},
"impactAnalysis":{
"viewName":"ImpactAnalysis",
"viewLevel":4
}
}
}
Hi Sai,
The way this works is the menu remains as the view level 1 and the other pages are all view level 2. so everytime the target pattern is matched by the router it takes the menu(1) and Inventory or orders or something(2) and routes to them as a single entity
Hi,
Are you creating multiple applications?
<App id = "head">
<Toolbar>...</Toolbar>
</ App> in the commons.SmartistMenu and
<App id = "app"> .. </ App> in the orders.OrderManagement? Or does it look different?
Some example would be very helpful.
HI Kandid,
everything is done here in a single app only. that is the fun of using routing. the work is done by routing as it loads two pages instead of one. hence we get one smartist menu controller always loaded with different pages like orders.
<mvc:View xmlns:mvc="sap.ui.core.mvc" controllerName="com.dummy.smartistcentral.controller.App" displayBlock="true" xmlns="sap.m"
class="smartist-app">
<App id="head" height="{sharedApp>/oGeneralSettings/menuHeight}" visible="{sharedApp>/oGeneralSettings/headerVisible}"/>
<App id="app"/>
</mvc:View>
the other way to do this is to use a menu fragment in each of your pages which we avoided here. Hope this helps