SAPUI5 - header, sidebar and navigation

Question

I am new to SAPUI5 and I have some problems with navigation, sidebar and header. I want to develop an application with a header and a sidebar. I use a “ToolPage” for this. Every page contains the toolpage and looks like this:

<mvc:View >
    <tnt:ToolPage id="toolPageId">
        <tnt:header>
            <core:Fragment ...> </core:Fragment>    
        </tnt:header>
        <tnt:sideContent id="SideContentId">
            <core:Fragment ...> </core:Fragment>
        </tnt:sideContent>
        <tnt:mainContents>
            <NavContainer id="pageContainerId" width="100%">
                <Page ...>
                    <content>
                         ...
                         ...
                    </content>
                </Page>
             </NavContainer>
        </tnt:mainContents>
    </tnt:ToolPage>
</mvc:View>

They all are similar to this, just have different code in the content tag.

With this I achieve the layout I want and I navigate with routes in the manifest.json. I have a controller for every page and navigate with:

onNavToBeTask: function(oEvent) {
        this.getRouter().navTo("pageTasklist");
}

I now have the problem that every time I navigate, the header and sidebar will be loaded again and the wrong fields in the sidebar will be highlighted.

I've found an example, but here is all the code in an .xml and a .js file included which would be very unclear https://sapui5.netweaver.ondemand.com/sdk/explored.html#/sample/sap.tnt.sample.ToolPage/code

My Questions are:

What is in general the best way to navigate with an sidebar and header?
Would it be better to have a "masterpage" with the header and sidebar and just add the content to the content tag?
Or should I just select the right field in the sidebar with an function which is called when I navigate to the page?

Edit:

Sample screenshot, what I would like to achieve

Musa Arda Musa Arda · Accepted Answer · 2017-09-29T06:46:28

As far as I understood from your post, you have a main view (master page) which holds the ToolPage and SideNavigation.

And you want to put your views inside the mainContents tag of the ToolPage. If this is the case: You shouldn't use the Router. Because with router, you will left your main view.

I list here what you should do:

Create your views as separate view files. (XML or JS) Let's say you create View1.
Create an event handler for button click (tap) of your menu items. This should forward to the main view's controller. (EventBus)
In the controller of your main view, create a function to instantiate View1. After instantiation add View1 to content of ScrollContainer (or NavContainer) of ToolPage.

Something like this:

onGoToProductTable: function(oEvent) {
var oScrollContainer = sap.ui.getCore().byId("idScrollContainer");
var oCurrentView = oScrollContainer.getContent();
if (!oCurrentView[0]) {
        var view = sap.ui.getCore().byId("ProductTable");
        if (view === undefined) {
            view = sap.ui.view({
                type: sap.ui.core.mvc.ViewType.JS,
                viewName: "xxx.yyy.view.ProductTable"
            });
        }
        oScrollContainer.addContent(view);
}},

SAPUI5 - header, sidebar and navigation

1 Answers