从全屏视图导航到主从视图 SAPUI5 [英] Navigation from Full-Screen View to Master-Detail View SAPUI5

问题描述

作为我的标题，我尝试创建一个应用程序，其中包含一个带有一些图块的全屏菜单页面，当用户按下某个图块时，它会导航到另一个主从页面.我的问题是我无法显示详细信息页面.我的代码如下:

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"
                }]
            }]
        }]
    },

我设法用这个来显示菜单视图.当我点击 1 个磁贴时，它会触发以下功能:

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); 
    },

结果，它不显示detailpage，而是显示masterpage

In result, it doesn't show the detailpage, but the masterpage

有什么建议吗?

最好的问候

推荐答案

1) 要启动全屏应用程序，我使用如下路由.这里我在 rootView 的帮助下加载 App Container

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) 使用以下路由加载主详细信息模板 iam.这里我在 rootView 的帮助下加载 splitApp 容器

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

我在我的实现中使用了它，感谢 Saran Kumar，希望这会有所帮助.

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

这篇关于从全屏视图导航到主从视图 SAPUI5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！