Search code examples
xmlroutessapui5master-pages

UI5 : Master Page and Dynamic XML View Loading

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. Below is how it will look like; enter image description here

Area in red will be dynamic based on the selection from the left.Yellow areas will be fixed always. 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;

  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. 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

Solution

  • By Route-Config, the property "target" is an array. That means you can pass multiple targets e.g. always the target "MasterData".

    I mean, users can send this URL to another user and once they open, they should see exactly same output.

    so this will work for your request.

    .

    Another way would be to use a "rest as string parameter" in your pattern

    rest as string parameters: "pattern" : ":all*:" - this pattern will define an optional variable that will pass the whole hash as string to the routing events. It may be used to define a catchall route, e. g. the following hashes would match: foo, product/5/3, product/5/detail/3/foo. You can also combine it with the other variables but make sure a variable with a * is the last one

    Route API Constructor

    But if you want that multiple routes match to the same pattern your route need the parameter

    greedy : true

    I hope this helps you