Search code examples
shellheadersapui5

Add unified shell header in master detail application (SAPUI5)

I want to add a unified shell header to my master detail app, but I don't know where I can write the code.

I want the header become like this picture:

enter image description here

How can I do that?

Solution

  • You can find an example of such a usage here on my GitHub. My code there has a little more than just a Master-Detail app, so I will try and sum it up here.

    Basically, if you have used the standard Master-Detail template, you have an App view which contains just a split app. This is the root control of you application (i.e. all the master and detail views are children of this control). You can simply surround with a unified shell component (as suggested in the comments).

    <mvc:View controllerName="something.App" xmlns:mvc="sap.ui.core.mvc" 
    xmlns="sap.m" xmlns:u="sap.ui.unified">
    <u:Shell>
        <SplitApp id="idAppControl"/> 
    </u:Shell>
</mvc:View>

    Keep in mind though that this only really makes sense if you plan to use the app as a standalone UI5 application. If you are registering it to the Fiori launchpad, then the shell is added automatically by the launchpad itself.

    If you want to be able to have the shell both when running the app standalone and when running it from the launchpad, you can move the shell instantiation inside the index.html of your app (basically wrapping the ComponentContainer instance with the unified shell).