Issues in Fiori 2.0 and Solutions

[akshaya_p]

Hi All,

Target Audience

SAPUI5/SAP Fiori Developers working with Fiori 2.0.

Introduction

In this blog we will see how to use custom stylesheet in an SAPUI5 application without affecting the launchpad theming. We will also see how to override the default compact styling in Fiori  2.0 Launchpad for Desktop version.

Say, I want the launchpad to remain in belize theme but my application alone to have a back background, I will use a custom stylesheet  for my app.

But in Fiori 2.0 ,SAPUI5 applications designed with  a custom styling may not work as expected when integrating with SAP Fiori launchpad.

In this example it will apply the styling to the entire launchpad and hence the background of the launchpad will turn black.

With the onset of Fiori 2.0,there are some changes that our apps have to undergo to adapt to changes in the launchpad.

Similarly,the content density for Desktop  version is defaulted to compact version in the launchpad and the provision to edit it remains disabled in launchpad settings as given in screenshot below



Issue-1 : Custom CSS- CSS of a particular app gets applied to the entire launchpad!

Say I have all CSS of my app put in an external stylesheet style.css.I integrate the app into Fiori Launchpad 2.0 and the CSS gets applied to the entire launchpad as well. This is because the app runs from the same shell instance of the launchpad and hence this CSS mess up.

Solution

To resolve this issue, we make sure CSS file is disabled when the app is closed and enabled when the app is opened.

Manifest.json

Give an id to your stylesheet in manifest.json file.

"resources": {



"css":



[{ "uri": "css/style.css", "id":"idStyleSheet" }]



},

 

Component.js

Access this file in Component.js to enable and disable it in init and destroy method respectively

In the destroy method of component.js, use jquery's 'prop' function and add the following code to disable the stylesheet

destroy : function () {



UIComponent.prototype.destroy.apply(this, arguments);



$('link[rel=stylesheet][id=idStyleSheet]').prop('disabled', true);



},

Similarly, in the init method , use jquery's 'prop' function to add the following code to enable the stylesheet

init: function() {



$('link[rel=stylesheet][id=idStyleSheet]').prop('disabled', false);



}

 

This will prevent custom CSS from getting applied to the entire launchpad.

Please find the Screenshots of the launchpad home(Belize theme) and my custom App( Custom CSS)

Launchpad Home



 

App with Custom CSS



 

Issue-2:Compact styling by default

Fiori 2.0 provides the feature to change content density from compact to cozy on mobile devices. however if you want a cozy style for desktop as well, this option is disabled in settings and it defaults to compact mode for desktop.

Solution

To have a cozy style for desktop we just need to set the style in component.js and apply it to all views in the app.

Component.js

getContentDensityClass: function() {



if (!this._sContentDensityClass) {



if (!sap.ui.Device.support.touch) {



this._sContentDensityClass = "sapUiSizeCozy"; } //cozy style for desktop



else {



this._sContentDensityClass = "sapUiSizeCozy"; } //Cozy style for mobile devices



}



return this._sContentDensityClass;



},

 

Controller

onInit: function()



{



this.getView().addStyleClass(this.getOwnerComponent().getContentDensityClass());



},

 

Write this line of code for all the views in the app and cozy density will be restored for desktop version as well.

Thanks sangeethathangamani  for your valuable inputs