Skip to Content

SAPUI5 : Master Page and Dynamic XML View Loading

Dec 09, 2017 at 06:19 AM


avatar image

Hi everyone!

I have question regarding a design approach on my application. We are going to have a master page which will make overall application have the same menu bar on the left and on the top. Middle area will be dynamic based on selected menu from the left. Attachment shows how it should look like.

Area in red will be dynamic based on the selection from the left menu.Yellow areas will always be fixed. One of the alternates i am thinking, i will have a main.view.xml which will contain the left panel and top bar and leave the middle area blank with an empty scroll bar container. Based on the menu selection, system will load the respective XML view dynamically to the scrollbar control. Here i have a very important point that, my URL should be dynamic. I mean, users can send this URL to another user and once they open, they should see exactly same output. I was planning to use ROUTING with different URL's but pointing to the master page which is MAIN.VIEW.XML; Below is a sample routing structure;

<code>  routes:
      {"pattern": "MasterData/material/{ID}",
        "name": "MasterData",
        "target": "MasterData"
      {"pattern": "Report/Cost/{REPID}",
        "name": "CostReport",
        "target": "CostReport"
      {"pattern": "UserPanel",
        "name": "UserPanel",
        "target": "UserPanel"

      "targets": {
        "MasterData": {
          "viewName": "APP/MAIN",
          "viewLevel": 1
        "CostReport": {
          "viewName": "APP/MAIN",
          "viewLevel": 2
        "UserPanel": {
          "viewName": "APP/MAIN",
          "viewLevel": 3

In this case, based on my routing pattern i will load the respective XML View dynamically in an scrollbar container. So main.view will be my master page which is having main menu bar and top bar. XML views will be loaded dynamically based on URL. Is this a good approach ?

Second option is; Yellow highlighted areas will be fragments and i will include in all the XML views to have the same output in all the pages. In this case, there will be a small copy paste operation in all the XML views. Since they are fragments, once i change the fragment all the pages will also get the change. Here advantage is, routing will target to each XML view not to the main.view.xml
Let me know your comments.

page.png (130.2 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Jun Wu Dec 09, 2017 at 01:27 PM

option 1 looks good.

10 |10000 characters needed characters left characters exceeded