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?