Introduction
Life as a BusinessObjects consultant is sometimes not so easy these days. From a recent discussion with a customer about what Launchpad fits best: "Classic BI Launchpad looks oldfashioned", "Fiorified Launchpad looks nice but we don't like the unstructered presentation of the reports as tiles and we don't like the folder view as it is". Sigh, ask three people and you'll get 5 opinions.
There is already some documentation (Customizing the Fiorified BI Launch pad) and KBA (2642005 - How to customize the Fiorifed BI Launchpad, specifically how to replace the SAP logo?) about customizing this UI. And at least the Theme Designer helps get started.
The rest of the blog shows some ideas which made this certain customer quite happy. All customer specific content is replaced by generic names and the well-known Web Intelligence demo reports.
Recap: Default look
Changes
I don't call it solution. It might or might not help in your specific situation.
Structure for the tiles
So far I rarely used categories besides Mobile. But mostly considered as nice to have they provide a nice hierarchical structure for tiles. We rebuilt the folder structure as categories and also applied the security on this.
In CMC this looks like that:
Although this is not a real hierarchy it successfully pretends it. In Fiorified BI Launchpad:
Of course not every user is allowed to see everything. In CMC we set the Home View to category "Best Run Bikes":
The main reason for using category "Best Run Bikes" as root is the behaviour of "All categories":
It really displays all categories without the structure we created!
But please note the little nice trick: We put a space before " Best Run Bikes" to make it appear as first tile.
Additionally all users can be instructed: If you get lost somewhere in the navigation, just press F5 or click on refresh in the browser, and you are home again.
Logo and background color
As starting point you can use the Theme Designer (please see documentation mentioned above).
We renamed additionally the background image to prevent its use, so on my Linux BI 4.2 SP08 where BO is installed into /usr/sap/EBO the folder custom-css looks like that:
/usr/sap/EBO/sap_bobj/tomcat/webapps/BOE/WEB-INF/eclipse/plugins/webpath.FioriBI/web/com/sap/fioribi/css/custom-css> ll
-rw-r--r-- 1 bi4adm users 5283 12. Feb 15:45 background.pngx
-rw-r--r-- 1 bi4adm users 6050 3. Mär 13:47 Company_logo.png
-rw-r--r-- 1 bi4adm users 3350 3. Mär 13:47 Theme.cssEnabling the customization:
vi /usr/sap/EBO/sap_bobj/tomcat/webapps/BOE/WEB-INF/config/custom/FioriBI.properties
# Set theme.enable to "custom" for enabling theming for Fiori BILaunchpad
theme.enable=custom
Either redeploy or copy the folder custom-css to the Tomcat work directory /usr/sap/EBO/sap_bobj/tomcat/work/Catalina/localhost/BOE/eclipse/plugins/webpath.FioriBI/web/com/sap/fioribi/css
The Tomcat directory structure looks very similar for the webapps and work (its cache) paths so be carefully to where you put your files.
During development it's more easy to work directly with the cached files but please ensure to save them outside the work directory when finished. A redeploy or patch will overwrite your changes.
In doubt, stop Tomcat, clean the browser cache and start Tomcat again.
Now we see the company logo, and the background is light grey instead the default light blue.
When we check with F12 (Chrome developer tools) we can see the style and it's taken from Theme.css:
Font size and line wrap on Category tiles
As you may have noticed on the screen shots the default font size is larger, the text is not fully readable (it is cut and "..." appended) on the category tiles.
Via reverse engineering in Chrome we found the styles and changed them:
/* font size 16px to 12px, height 18px to 30px, padding-top 10px to 8px */
.BILP-TitleCategoryTile{
font-size: 12px;
color: #FFFFFF !important;
padding-top : 8px;
top: 6px;
position: relative;
text-transform: capitalize;
cursor: pointer;
height: 30px!important;
}
/* padding-top 15px to 11px */
.BILP-TypeCategoryTile{
font-size: 12px !important;
color: #FFFFFF !important;
padding-top: 11px !important;
padding-left:0px !important;
cursor: pointer;
}
/* white-space nowrap to normal, text-overflow ellipsis to unset */
.BILP-TabTitleTrunc{
width: 154px;
white-space: normal;
overflow: hidden;
text-overflow: unset;
As you can see the category tile displays the full text in multiple lines, and the number shows the direct children.
On the report tile level the font size is also adapted.
Document tile font size
Again we add some styles to our Theme.css:
/* font-size and max-height 1rem to .75rem , max-height and line-height 1.4 to 1.05 , max-height 2 to 3 Zeilen, added padding-top 5px */
.BILP-docTitle{
color: #333333;
font-weight: normal;
font-family: "72-Web",Arial,Helvetica,sans-serif;
font-size: .75rem;
display: block;
display: -webkit-box;
max-width: 100%;
max-height: calc(.75rem * 1.05 * 3);
margin: 0 auto;
line-height: 1.05;
/*-webkit-line-clamp: 2;*/
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 5px;
padding-top: 5px;
white-space: normal;
cursor: pointer;
word-wrap:break-word;
Hide Web Assistant
Another request to beautify the Fiori Launchpad was to hide the Web Assistant. Although there is a KBA (2731980 - Disable automatic Web Assistant activation on login for all users in Fiori BI Launchpad) describing how to do it we didn't manage to get this working.
So our new best friend Chrome developer tools helped and we added another style:
/* Hide Web Assistent */
button#helpBtn{
visibility: hidden;
}
Conclusion
Although it took a lot of research, try-and-error and must be repeated after every patch, at least the customer got what he wanted:
- Navigation by tiles in a hierarchical way via categories
- Long "folder" names are readable
- Company logo and "nice" background color
- Get rid of Web Assistant
At this phase of the project we skipped applying custom images for the different categories although this is possible as standard functionality:
Of course most of the changes are not supported and need to get revised after a patch or upgrade, but this blog might give you an idea what's possible if a customer is unhappy with Fiorified BI Launchpad.
- SAP Managed Tags:
3 Comments
