Setting different background for a theme on SAP Fiori Launchpad without customising a theme
In this blog, I want to share my recent experience in changing a form background to white for the sap_bluecrystal theme without customizing the theme.
Initially, when I got this requirement I don’t have any idea what to do with the requirement as I need to complete the requirement without creating a custom theme as I am a newbie to SAP FIORI.
Firstly I have gone through many of the Fiori/ SAP UI5 documents and got to know that Less parameters are used to apply our custom styles without customizing the theme. I have used the following piece of code and couldn’t achieve my requirement as I am using Less parameters, I was unable to clear the background for other themes.
html[data-sap-ui-theme = "sap_bluecrystal"]{
background-color = white;
}
html[data-sap-ui-theme = "sap_hcb"]{
background-color = black;
}
My second option is getting the current theme and applying the style class based on the theme. After doing lots of research, I found a piece of code to get current user and theme on Fiori launchpad.
var UserInfo = sap.ushell.Container.getService(“UserInfo”);
var User = UserInfo.getUser();
var Customtheme = User.getTheme();
With this, I am able to capture the current theme but the problem still exists as I am unable to capture the theme change. Later I found a theme-switch event sap.ui.getCore().attachThemeChanged that triggers when ever the theme is changed on the Fiori launchpad. I have used the following code with in the callback event to achieve my requirement:
sap.ui.getCore().attachThemeChanged(function() {
//To get the current theme selected by the user
var UserInfo = sap.ushell.Container.getService("UserInfo");
var User = UserInfo.getUser();
var Customtheme = User.getTheme();
// Applying custom css based on theme
if (Customtheme === "sap_bluecrystal") {
that.byId("grid").removeStyleClass("printAreaBox1");
that.byId("grid").addStyleClass("printAreaBox");
} else {
that.byId("grid").removeStyleClass("printAreaBox");
that.byId("grid").addStyleClass("printAreaBox1");
}
});
Hope it’s useful..!!
cheers 🙂
Where did you write this piece of Code??
Hi Azhar,
I wrote this code in pattern matched event as per my requirement.
Thank you,
Sri Divya.