Implementing Custom Header for SAP.UI.UNIFIED.SHELL

I’m writing this blog to showcase a scenario of adding a custom header to

sap.ui.unified.Shell control.

Unified Shell control does not straight away provide a Header Title property.Also the shell is divided into areas like the menu button towards the left, search bar in the Centre and User specific items at right hand side.

Generally we come across a scenario where we need to add a Title for the shell for example, Organisation Name (“SAP”) or Application Name (myTimeSheets) or so.

We can make use of Search area of the unified shell to display Title.

Here is the code snippet of the view.

<core:View xmlns:core=”sap.ui.core”

<u:Shell>

…..

<u:search textAlign=”Center”>

<Title text=”DASHBOARD” ></Title>

</u:search>

….

</u:Shell>

</core:View>

Happy coding…