Skip to Content
Author's profile photo Prabuddha Raj

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.

Assigned Tags

      6 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Andreas Mayer
      Andreas Mayer

      Could you please provide us with some more context of your app or a working example?

      Maybe the index.html?

       

      Best regards

      Author's profile photo Prabuddha Raj
      Prabuddha Raj
      Blog Post Author

      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

      Author's profile photo Sai Battula
      Sai Battula

      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
      }

      }
      }

      Author's profile photo Prabuddha Raj
      Prabuddha Raj
      Blog Post Author

      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

      Author's profile photo Kandid Sidorov
      Kandid Sidorov

      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.

      Author's profile photo Prabuddha Raj
      Prabuddha Raj
      Blog Post Author

      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