工具页面中的侧面导航和主要内容显示-SAP UI5

Question

我正在尝试做类似SCP Cloud平台的事情。在驾驶舱中，我们将具有侧面导航，并根据我们单击的视图打开了URL，但仍保留了侧面导航。

我有一个带有侧面导航的工具页面，我正在尝试根据从导航列表中选择的项目来显示各种不同的视图。我想在主要区域中显示它，而不要导航到完全不同的页面，否则我将失去侧面导航。问题是-对于我打算显示的不同视图，我必须创建一个片段，然后将该片段包含在滚动容器中。我无法在主要内容中显示实际的MVC VIEW。另外，当我单击片段表中的一行（显示在主要内容区域中）时，如果必须进一步显示该行的详细信息，则会显示不同的片段。在这种情况下，浏览器“后退”按钮被禁用，因为最终我们位于同一页面中，但是我希望用户也能够访问浏览器。

mainView.xml

    <tnt:mainContents width="auto">
        <NavContainer id="pageContainer">
            <pages>
                <ScrollContainer id="directReps" horizontal="false" vertical="true" height="100%">
                    <core:Fragment fragmentName="...view.Fragments.DirectReporteesList" type="XML"/>
                </ScrollContainer>
                <ScrollContainer id="detail2" class="sapUiStdPage">
                    //Want to show a view here but does not work so had to duplicate into a fragment 
                     //and then include.
                 <core:Fragment fragmentName="...view.Fragments.UserDetails" type="XML"/>
                </ScrollContainer>
            </pages>
        </NavContainer>

假设我选择了一个显示scrollContainer id =“ directReps”的项目。这个片段DirectReporteesList有一个包含所有用户的表。单击任何行后，我要显示用户详细信息。我试图将UserDetail.view包含在scrollContainer的内容中，并想导航到它。但是下面不起作用。

mainView.controller.js

    userDetails: function(oEvent){
      //var oScrollContainer = this.getView().byId("detailsPage");
//       var oCurrentView = oScrollContainer.getContent();

//      var view = sap.ui.view({
//             type: sap.ui.core.mvc.ViewType.XML,
//             viewName: "...view.UserDetail"
//         });
//     oScrollContainer.addContent(view);
       this.byId("pageContainer").to(this.getView().createId("detail2"));
    // }

Answer 1

您是否看过UI5演示工具包中的演示应用Shop Administration Tool？它显示出类似的行为，并且可能使您处于正确的轨道。