Skip to Content

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





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.

You must be Logged on to comment or reply to a post.
    • 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