SAP HCP Portal header customization

[Former Member]

I am trying to customize the header of the Site that I have developed using SAP HCP, portal service.

I have a requirement to show a different background-color for the header on each page that I have in the site.

For Example:- the home page header looks as below:

But when the user clicks on any menu and navigates to another page, I would like to change the header background.

Any help is appreciated.

Thanks

Deepak

[gowrisankar_m2 · Accepted solution]

Hello,

Please check out below, hope this helps

you have to use the custom css lilke below to customise your shell header

.sapUshellShellHeader {

    background-color: #0000FF;

}

BR, Gowrisankar

[Former Member · Accepted solution]

Thanks Gowrisankar,

The links allows me to create a new theme to be used which I have already done. My issue is dynamically changing the shell header background on navigation.

When I create a Portal site from the HCP Admin Space, it gives me a fixed top site header same as in the Fiori Launchpad (image in the question). How can I modify that. I have seen some handle examples of sap.ushell.services providing APIs to create a shell plugin for adding items to the header but I can't get the shell DOM element to apply my custom css class.

I don't wish to change the sap global css class (sapUShellShellHeader) as it will impact all other sites in the same space.

Hope to hear back from you.

Thanks

Deepak

[Former Member · Accepted solution]

Hi Deepak,

Indeed the only official way to change the header color is by defining it in the theme. You can, however, hide the default shell header and create your own using this API:

JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ushell.renderers.fiori2.Re...

Regards,

Guy

[Former Member · Accepted solution]

Thanks Guy,

Your suggestion above helped me progress through. Thanks for that.

I tried the same. Using the expert view for changing the theme parameter, I could not find any theme param to change the color of shell Header. Finally I applied custom CSS to change the header.

I have some queries:

1) I add custom UI5 Applications into the HCP Portal using the menu options in site-admin screen.

I want those apps to be full screen in desktop/tablet but in case of desktop, they come up squashed. please see screenshot below:

In the above image, I want the app to take up the space on both sides. It is possible through a property in sap.m.Shell - "appWidthLimited" but I don't see any such options to do that while creating the site/editing the site settings.

Is there an official way to do that?

2) There is a requirement to customize some of the pre-defined buttons on the HCP Portal shell header such as changing the icon font for menu and user login. Can you point me to some example/documentation for customising the header?

Best Regards,

Deepak

[Former Member · Accepted solution]

Hi Deepak,

Applications have a max width of 1280px so they'll look the same in any screen size. You can override this by setting the following custom CSS in the theme:

.cpv2-page-1280 {

     max-width: 100%;

}

Regarding the header buttons - the shell renderer has a set of APIs: JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ushell.renderers.fiori2.Re.... You should use sap.ushell.Container.getRenderer("fiori2") to get the renderer control. There's no API to change the header elements styling, but again, you can always create a header of your own.

---

Guy Roth

SAP HANA Cloud Platform, Portal Service

If you find this answer useful or correct, please mark it accordingly for the benefit of other members.

[Former Member · Accepted solution]

Thanks a lot Guy,

will try these options out and update the post with any findings

Best Regards,

Deepak

[Former Member · Accepted solution]

Hi Guy,

I tried out the approach you mentioned. I can't find an API to add a custom header I created onto the portal site.

My requirement is to have a custom header and certain generic icons on the sub-header section of the portal. I could add items onto sub-header but I cannot add a custom header to the site.

How do I add my custom header to the site. I thought of retrieving the sap.ui.unified.Shell instance from the sap.ushell.Container.getRenderer("fiori2") and using setHeader() to add my custom header but I can't find the instance for the Shell.

You have helped me a great deal till now. Thanks for that

Hope to hear from you soon.

Best Regards,

Deepak

[Former Member · Accepted solution]

Hi Deepak,

The right way to add a custom header, is to hide the default header and add a sub-header in its place. So you got it right .

I strongly suggest not to use any non-official APIs, as they can change any time. The APIs in sap.ushell.Container.getRenderer("fiori2") should have all you need.

---

Guy Roth

SAP HANA Cloud Platform, Portal Service

If you find this answer useful or correct, please mark it accordingly for the benefit of other members.

[Former Member · Accepted solution]

Thanks Guy for all your help.

I will continue to use this approach and wait for a addCustomShellHeader functionality from SAP:)

Regards.

Deepak