Introducing Shell Navigation parameters

[former_member727608]

Introduction

In this blog post I’d like to introduce new theming parameters for the Shell Navigation.

Shell Navigation is the main and default navigation displayed on the SAP Fiori launchpad home page. It offers an easy access to multiple pages per space.

Shell navigation preview in UI Theme Designer

Whats new?

Since SAPUI5 version 1.90 it is possible to theme the Shell Navigation with UI Theme Designer to adjust it to your corporate brand design. Following Shell Navigation parameters are available in “Detailed“ theming section in the UI Theme Designer.

Background Color: The background color for the shell navigation area.
@sapShell_Navigation_Background

Text Color: The standard color of text in the shell.
@sapShell_Navigation_TextColor

Active Background Color: Active background color of the shell navigation area content.
@sapShell_Navigation_Active_Background

Active Text Color: Active text color of shell navigation area content.
@sapShell_Navigation_Active_TextColor

Hover Background Color: The hover background color for the shell navigation area.
@sapShell_Navigation_Hover_Background

Selected Color: The color of selected shell content.
@sapShell_Navigation_SelectedColor

Selected Text Color: The color of selected text in the shell.
@sapShell_Navigation_Selected_TextColor

Customized Shell navigation preview in UI Theme Designer

Conclusion

Using the new parameters, you have even more possibilities to adjust your UI to your corporate branding.

[StephanHeinberg]

Dear Eugen,

thank you for the information.

Could this be down ported to version 1.84? (S/4 HANA 2020)

For us this is not a new feature, but a bug fix or at least missing functionality.

Our customers complain about the ugly theme in the SAP UI, because theme designer does not adapt the shell header button colors:

Thanks,

Stephan

 

[former_member727608]

Dear Stephan,

I had a chat with the product owner of Fiori Launchpad and I was told that there will be no downport to version 1.84.

best regards

Eugen

[lkovacevic]

Hi rotheugen ,

I am having an issue with a particular shell header parameter, favorite icon (sapShell_Favicon). As I change it and the launchpad where I´m using this theme is not taking this ico.

Do you know if there is any requirement for this parameter? I´m setting an ico image of 48x48 as the one used in the standard theme is like that.

 

Thanks and regards!

Luis

[former_member727608]

Dear Luis,

sorry for the late reply!
I was able to reproduce the issue in FLP running in Chrome Browser.
I could see that "sapShell_Favicon" is rendered in the DOM but it is not displayed as favorite icon in the browsers tab. To me it seems, that the favicon added in a custom theme is not properly handled by the FLP.

Feel free to create a bug ticket for the FLP component CA-FLP-FE-UI.

kind regards
Eugen

[lkovacevic]

Thanks for replying!!!

 

Yes, already created the bug ticket and they told me it would be applied in next patch, thanks!!!