Navigation from Full-Screen View to Master-Detail

问题:

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

Any suggestions?

Best regards

回答1:

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.

回答2:

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