SAP FIORI Launchpad Customization : Custom Logo and Background image

In this tutorial we will learn how to customize FIORI Launchpad login page. We can add custom and user defined background image and logo through custom ABAP class. 

In order to upload the custom image to SAP system and replace the default logon page SAP image follow the below mentioned steps. 

• Go to transaction SE80.
• Click on MIME repository.
• Navigate to image using path - Sap > public > bc > ui2 > logon > image. 
• Right click on Image folder and click on “Import MIME objects”
• Import the image that you want to put as logo in the Launchpad login page.

Imported images will be added to the images node. 

Once images are uploaded create a custom class "ZCL_SRA_LOGIN" which is copy of standard class /UI2/CL_SRA_LOGIN. 

Inside method INIT_DEFAULT_PROPERTIES make changes in the code and below mentioned properties "img_background", "img_background_mobile" and "img_background_mobile_land" so that it points to images we have uploaded in the mime repository. 

set_property( iv_name = 'img_background' iv_value = '/sap/public/bc/ui2/logon/img/custom_login.jpg').

set_property( iv_name = 'img_background_mobile' iv_value = '/sap/public/bc/ui2/logon/img/custom_login_mobile.jpg').

set_property( iv_name = 'img_background_mobile_land' iv_value = '/sap/public/bc/ui2/logon/img/custom_logo.jpg').

• Now go to SICF transaction and navigate to default_host > sap > bc > ui5_ui5 > ui2 > ushell
• Under Error Pages tab click on Configuration Button at the bottom of the screen and change the ABAP class to ZCL_SRA_LOGIN and maintain the client as well. After making the changes, close the pop up by clicking on the tick icon and save the changes by clicking on save button.

Similarly Go to SICF transaction. Follow the path as mentioned below: 

default_host > sap > bc > flp. 

• Under Error Pages tab choose the System logon radio button instead of the default Explicit Response Time Radio button. 
• Click on configuration button and make the following changes in the pop up. Maintain the Z class name "ZCL_SRA_LOGIN" here as well.

We can see the custom logo at the bottom coming through custom class.

Folder Structure SAP UI5 application

Folder structure for SAP UI5 application should contain index.html, manifest.json and Component.js file in the root folder.

Cannot Load Metadata for Service /sap/opu/odata/sap/service_name

While working with SAP UI5 and FIORI applications, we generally encounter error "Service failed. Contact your system administrator" or "Cannot call service with URL /sap/opu/odata/sap/service_name". These types of errors generally occurs when the authorization object is missing for the user in the backend server.

To resolve these issues, log on to the backend server and assign the S_RFCACL missing authorization object for the end user.

Clear Cache : FIORI APPS

While implementing SAP UI5/FIORI applications, we should always clear the cache before testing the changes i the browser. There is persistence layer in the FIORI and UI5 applications that uses the caching mechanism.

We have transaction codes to clear the cache on frontend and as well as backend servers. Also we can run the reports to synchronization chip cache on frontend.

Transaction codes to clear the Metadata cache

• /IWFND/CACHE_CLEANUP - Transaction code to clear cache on frontend server.
• /IWBEP/CACHE_CLEANUP - Transaction code to clear cache on backend server.

Reports to Synchronize Chip Cache

• /UI2/CHIP_SYNCHRONIZE_CACHE
• /UI2/DELETE_CACHE_AFTER_IMP
• /UI2/DELETE_CACHE

SAP UI5 CSS Best Practices

 

CSS
1.	Rule Specificity	Organize the stylesheet in top down structure as per the rule specificity.
2.	Structure	Structure CSS in the selectors right to left. Browser while resolving CSS selectors, parses it from right to left.
3.	Compressed CSS	Always try to keep CSS as compact and precise as possible, we can also use compressed CSS file.   Avoid using multiple properties which can be replaced by single property.
4.	CSS Classes	If multiple elements share same properties always try to combine them by using classes.
5.	CSS Comments	Always use comments as much as you can in CSS file for complex applications.
6.	Efficiency	-        ID's are the most efficient, Universal are the least.   -        The descendant selector is the most expensive selector in CSS. It is dreadfully expensive — especially if the selector is in the Tag or Universal Category.
7.	Selector	-        Keep the selector short. Most of the time extra item in the selector will mess up the code.   -        Avoid using universal selectors.
8.	Stylesheet Size	Always keep the size of stylesheet as less as possible, it will help browser during the style resolution step. Remove unwanted selectors, avoid duplicate css and use tools like uncss to make sure stylesheet contain css that is being used in the page.
9.	CSS Expressions	Avoid CSS Expressions since they are deprecated started with IE version 8.

Integration of Google Analytics with SAP UI5 custom application

Google Analytics is tool for tracking site usage which gives deep dive analysis of user statistics and other important information on application usage. With google analytics we can determine where the visitors are coming from, which links on your site are getting the most hits and how long the visitors spend on various pages of your site. In addition to providing critical marketing data, it also tracks browser features so that you can make informed design decisions.

 Integration of Google Analytics with custom SAPUI5 application will provide a view into how the users are using the system, as well as key demographic information on the users.

Depending on results, we can make changes in application. It will also help us reduce the number of clicks by moving the frequently accessed information on the landing page.

There are other methods as well to get user statistics on the application by tracking the ODATA services but I find google analytics more effective as it gives detailed analysis on application usage. We can execute report “/IWFND/R_METERING_VIEW” to get the analysis. We have standard job “SAP_IWFND_METERING_DEL” that works behind report “/IWFND/R_METERING_VIEW”.

This job is also scheduled daily, it cleans up aggregation data older than 2.5 years back, and cleans up the data from /IWFND/L_MET_DAT on monthly level

Steps to integrate Google Analytics with SAP UI5

1. Go to http://www.google.com/analytics
2. Enter your Google account email and password and click Sign In
3. Click on the Admin tab at the top header area of the site.
4. In the ‘Account’ section, choose to ‘Create a new Account’.
5. On the next page, you will be asked ‘what would you like to track. Choose ‘Website’.

6.     Create new project add URL of application and get Tracking ID of URL

7.     Get JavaScript code from Google Analytics and add it into index.html page of Fiori application.

Note - It can take up to 24 hours for a new Google analytics account to start tracking data also SAP do not provide any support on google analytics integration if there are any issues with tracking code or integration we need to work with google support team.

Live Screenshots of application for user statistics

How do you acquire users?

How are your active users trending over time?

How well do you retain users?

When do your users visit?

Google Analytics will also help in determining which links on your site are getting the most hits and how long the visitors spend on various pages of your site.

 

Where are your users?

With google analytics we can determine where the visitors are coming from and from which country they are logging in.

What are your top devices?

What pages do your users visit?