Navigation from Full-Screen View to Master-Detail View SAPUI5

1
votes

Dear Gurus,

As my title, I'm tryig to create an App which contains a Full-screen Menu page with some tiles, and when user presses on one, it navigate to another Master-Detail page. My problem is I can't show the detail page. My code works as below:

manifest.json:

    "routing": {
        "config": {
            "routerClass": "sap.m.routing.Router",
            "viewType": "XML",
            "viewPath": "WYTH.view",
            "controlId": "rootApp",
            "controlAggregation": "pages"
        },
        "routes": [{
            "pattern": "menu",
            "name": "menu",
            "view": "Menu",
            "targetControl": "rootApp",
            "targetAggregation": "pages"
        }, {
            "pattern": "zwm01",
            "name": "zwm01",
            "view": "ZWM01Root",
            "targetControl": "rootApp",
            "targetAggregation": "pages",
            "subroutes": [{
                "pattern": "zwm01/",
                "name": "zwm01master",
                "view": "ZWM01Master",
                "targetControl": "ZWM01",
                "targetAggregation": "masterPages",
                "subroutes": [{
                    "pattern": "zwm01/",
                    "name": "zwm01detail",
                    "view": "ZWM01Detail",
                    "targetControl": "ZWM01",
                    "targetAggregation": "detailPages"
                }]
            }]
        }]
    },

I managed to show the menu view with this. When I click on 1 tile, it fires the function below:

navZWM01: function() {
        this.getRouter().navTo("zwm01", false); 
    },

In result, it doesn't show the detailpage, but the masterpage enter image description here

Any suggestions?

Best regards

2
sapui5
Once you navigate to the master, you will have to perform a second navigation to the detail on some event. – Stephen S
yeah. I'm currently using that approach. On mobile view where 1 view is shown up at time, it isn't required to load both master and detail views. So I made an if at onAfterRendering listener to check whether the device is not a phone, it will perform a second navigation to the detail view as u mentioned. Thank you a lot sir. – T.NQ
@T.NQ: Did you figure it out what could be the mistake? If possible could you share the solution here which will be helpful to others. – Santhosh_Reddy
Sorry I gave up that approach. I use full-screen instead. So sorry there's nothing I can help. – T.NQ

2 Answers

4
votes

1) To launch full screen app i am using the routing as follows. Here Iam loading App Container wiith the help of rootView

routes : [
  {
    pattern : "",
    name : "_full1",
    targetAggregation: "pages",
    target : "monitorOperations"
   }
 ],

"targets": {
     "monitorOperations" : {
                "viewName": "Full1", 
                "viewLevel": 1, 
                "viewId": "_Full1Id", 
                "controlId": "idAppControl",
                "controlAggregation": "pages" 
       },
}

2) To Load master detail template iam using the routing as follows. Here iam loading the splitApp container with the help of rootView

routes : [
             { 
               "pattern": "", 
                "name": "master", 
                "target": ["detail", "master"] 
             }, 
             { 
               "pattern": "detail/{detailId}", 
                "name": "detail",
                "target": ["master", "detail"] 
            } 
           ],
"targets": { 
           "master": {
                        "viewName": "Master", 
                        "viewLevel": 1, 
                         "viewId": "master", 
                         "controlId": "idAppControl",
                        "controlAggregation": "masterPages" 
                       }, 
            "detail": {
                     "viewName": "Detail", 
                      "viewId": "detail",
                      "controlId": "idAppControl",
                      "controlAggregation": "detailPages", 
                      "viewLevel": 2 
                    }, 
          "notFound": {
                 "viewName": "NotFound", 
                  "viewId": "notFound", 
                  "viewLevel": 3 
            } 
        }

Combine both, in such a way that the full screen (app container) is loaded first, when user clicks on button or selects any Tile/Item in the full screen then load the second page (split container with master and detail)

routing: {
    config : {
            routerClass : MyRouter,
            viewType : "XML",
            viewPath : "org.edu.ui.views",
            targetAggregation : "detailPages",
            clearTarget : false
             },
         routes : [
                {
                    pattern : "",
                     name : "_full1",
                    arget   : "monitorOperations"
                },
                {
                    pattern : "manageOperations",
                    name : "_full2",
                    target  : ["SplitAppContainer","detail", "master"]
                },
                {  
                                "pattern": "detail/{product}",  
                                "name": "detail",
                                "target": ["master", "detail"]  
                         },
                {  
                                "pattern": "manageOperations1",  
                                "name": "master",  
                                "target": ["detail", "master"]  
                            }
                ],

    "targets": {
            "monitorOperations" : {
                    "viewName": "Full1",  
                                         "viewLevel": 1,  
                                         "viewId": "_Full1Id",  
                                         "controlId": "idAppControl",
                                         "controlAggregation": "pages" 
                    },
            "SplitAppContainer" : {
                    "viewId": "_Full2Id",  
                    "viewName": "Full2",  
                                        "viewLevel": 1,  
                                        "controlId": "idAppControl",
                                        "controlAggregation": "pages"
                    },
            "master": {
                    "parent" : "SplitAppContainer",
                                        "viewName": "Master1",  
                                        "viewLevel": 2,  
                                        "viewId": "master",  
                                        "controlId": "idSplitContainerControl",
                                        "controlAggregation": "masterPages"  
                                       },  
                    "detail": {
                                     "parent" : "SplitAppContainer",
                                     "viewName": "Detail",  
                                     "viewId": "detail",
                                     "controlId": "idSplitContainerControl",
                                     "controlAggregation": "detailPages", 
                                     "viewLevel": 3  
                                },  
                    "notFound": {
                                 "viewName": "NotFound",  
                                 "viewId": "notFound",  
                                 "viewLevel": 3  
                             } 
                      } 
      }

I used this in my implementation, Thanks to Saran Kumar, Hope this is helpful.

0
votes

Try to create two routes and tow targets, one for Master and one for Details. Each target is binded to a View, as defined in the viewName property of your targets. Set the target property of both routes to navigate to both targets.

"routes": [
    {
      "pattern": "",
      "name": "master",
      "target": ["object", "master"]
    },
    {
      "pattern": "Objects/{objectId}",
      "name": "object",
      "target": ["master", "object"]
    }
  ],
  "targets": {
    "master": {
      "viewName": "Master",
      "viewLevel": 1,
      "viewId": "master",
      "controlAggregation": "masterPages"
    },
    "object": {
      "viewName": "Detail",
      "viewId": "detail",
      "viewLevel": 2
    }

Then when you navigate from the tile click, both targets are matched. If you pass parameters to your details view, catch the "routeMatched" or the "patternMatched" events of the Router object and change the "detail" view context with bindElement()

This is very detailed in the demokit: Master-Detail Navigation