Month: May 2017

Custom Fonts in Design Studio

There are a lot of fonts which are supported by Design studio by default, but there are infinite varieties of fonts available in the internet and not all of them are supported by Design Studio directly. If you need to use one of the fonts in your design studio application, there is an easy way of doing so without having to install the font library on the end user’s computer. There are a lot of fonts which convert alphabets into images which can be used on the dashboards as images. Here is how to do so.

  1. Usually the default font types are supported on all browsers and don’t need any installations on the end user’s machines or any CSS scripting to add the font families. But for font types like “SAP-Icons” (this is a font type which converts unique texts to images you can use on the dashboards. Ex :
  2. There are a lot of websites where you can look up for fonts you need but most of them are not free. I found one website which offers font types for free for commercial use as well.

  3. Go into the website and download the .ttf file for required fonts. In the below example I am trying to add a new font called “Roman Caps”.

  4. To start adding a new font family to your design studio dashboard, you will need a .ttf file and .eot/.woff file as well.

    Note: .eot is a file type which is supported only in IE. If your target browser is anything other than IE, you might have to get the .woff file as well.

  5. Creating an .eot or .woff file can be done using a lot of websites for free available on google.
  6. Once you have the .eot and .ttf files ready, you have to upload these files to the repository folder and create a CSS file where you can import these 2 files.

  7. Now, to import the above 2 files into a CSS file and add the new font-family to your design studio dashboard put in the below code in your CSS file.

  8. With the above step, when you reference the .css file in your dashboard as custom CSS file, the new font face will be available for use in your dashboard.
  9. I used a text component to test if the new font type is working, and to do so, I created a CSS class in the .css file to use the new font family that I just imported.

  10. After I save the css file also and reference it in the dashboard and apply the CSS class to the text object here is the result I get.

  1. As a next step, I am exploring if I can use the same kind of CSS scripting to change the font types on charts and other components as well and I will update the post as soon as I find something.

Happy designing

Naveen Mamidi

Tek Analytics BI Practice


Custom Alert icons in Design studio

I would like to share an easy and effective solution that I tried a couple of days ago for one of my business requirements. The business users already had a lot of xcelsius dashboards in production that were built a few years ago and I was converting one of the dashboards to Design studio. One of the key feature that is not directly available in Design studio is to display alerts on the crosstab. Xcelsius had a variety of options to display these alerts and the users were very specific on having a particular kind of alerts shown up on the dashboard. So, this is what I did and I thought it would be helpful for some others as well.


  • Design studio crosstab has a property to display conditional formatting on the dashboard. There are a handful of options to enable the conditional formatting on Design Studio Crosstab. Some of the straight forward methods are
  1. Enabling Exceptions on BEx query level and having the same conditional formatting carried forward to Design Studio
  2. Using the data source (BEx query or HANA View) in AO and enabling conditional formatting using AO and getting a smart copy of the data set as a data set in to design studio
  3. Smart copy from Analysis office

However, all of these options have their own limitations in terms of visual alerts that can be displayed. For Ex: AO Conditional formatting offers only 3 different types of icons to be displayed.


This limitation can be overcome using CSS changes at the design Studio level to use any kind of status alert to be displayed on the crosstabs of the dashboard.


This is how it can be done:

  1. Create an Analysis Office report with the required data source

  1. Apply Conditional formatting on the column needed using the “Conditional Formatting” button on the top menu.

  1. After applying conditional formatting on required measure, the report will look like below screenshot. Right click on the report and click on option “Smart Copy”. This will copy the Data source along with the settings that are made like dimension and measure selection, any background filters applied in the AO report and Conditional formatting also. This Smart copy can be used as a data source in Design Studio. The AO report need not be saved anywhere in the repository.


  1. Once you “Smart Copy” the AO report, you will be able to see an option “Smart Paste” when you right click in the “Data Sources” section of Design Studio.

  2. Once you “Smart Paste” in design Studio, this will become a data source just like all other data sources that are directly added via BICS connections in Design Studio. You can perform all operations on this data source that are allowed by Design Studio on all other data sources.
  3. Once you add a crosstab in Design Studio and set the property of Conditional formatting as ‘true’ in the properties section of the crosstab, the conditional formatting that you set in AO will be visible in the design studio crosstab.

  1. Now, if you want to change the kind of visual alert that is being displayed on the crosstab, there is no direct option to do so in design studio client tool itself. But it can be changed using CSS scripting as below.
  2. Run the dashboard in a browser and hit F12 to open debugger mode. There is an option called “DOM Explorer” in the F12 console. You can tackle each and every minor CSS detail using the DOM Explorer by selecting the Mouse events button and clicking anywhere needed on the dashboard.


  1. There are few CSS Classes assigned by default, to all the conditional formatting that is enabled on the crosstab. All we have to do is fetch for the CSS class that is providing the images as alerts for crosstab and change the image to our desired image by using a new CSS file. To find out which css class is being used for the Green Traffic light icon, I just opened the F12 console and using the mouse events button, I clicked on the green traffic light icon.

  1. Once I click on the green icon, there is some information collected in the F12 console regarding the icon. (in the below screenshot sapzencrosstab-DataCellAlert3StatusSymbol is the CSS class assigned to all the green color traffic lights in the crosstab.) The right side pane shows more detail specifications of the CSS class like background, position, color and image used etc.


  1. Now to replace the existing image with a Green colored Tick mark ( business requirement in my case), I have to use the same CSS class in a new CSS File and copy the same CSS properties from the F12 console. In place of the default ‘background-image’ that is visible in the F12 console, I need to replace it with my desired image.
  2. To do so, we cannot directly post an image (.png or .jpg) file on the repository and reference it in the CSS file. We have to convert every image into base64 format (lot of sites available to convert .jpg/.png to base 64)

  1. Once you get the Base64 code for the image, you have to reference it in the CSS File as below


  1. Reference this CSS File as your Custom CSS file in the design studio dashboard and the alert icon will now be changed to a new icon


You can change the icons similarly for other alerts also using a different CSS class which can be found in the same F12 console.



Happy designing.

Naveen Mamidi

Tek Analytics BI Practice



Fiori look Web I Interface – BOBJ 4.2 SP4

With BI 4.2 SP4, the new Fiori look BI Launchpad is introduced. The new portal is addition and is not replacing the classic BI launchpad.

This Blog is intended to walk through the options available while viewing a Webi report in New BI Launchpad. Once the user Logs into New BI Launchpad, all the documents will be shows as tiles.

Comparison (Look) with Old BI Launchpad

Below are the quick options available in the new interface for the end user.

By default, the report opens in normal interface and user can switch to advanced interface by choice. Below Screenshot shows the quick options available.

By Switching to Advanced interface, all the interactive options will be active. Users can quickly Rank/sort the data in the report

Changing Prompt values

Unlike classic BI launchpad , there is no in-built design applet for new version. There is an option to “Open in designer” which will takes you to Old version through Opendoc link


Karthik Addula

Principle Architect

Fiorified BI Launchpad

Quick picks

Url to accesshttp://server:port/BOE/BILaunchpad

Security Changes – Yes, new right needs to be granted

Old Version – No confusions please, Classic BI launchpad still available and can be used for many advanced functions. In my opinion , new launchpad is strictly a consumer interface.

First Look

Changing preferences

Go to User profile > Click on settings

The setting are very similar to classic BI Launchpad.

    Users can set preferred Landing tab

    Pixels for web-based look

    Hide/show totals for Analysis OLAP

By default the landing page navigates to Home Tab (with Show all selected). Users can change the documents to view as below

Context Menu

Context menu of Tile/document can be launched by clicking the 3 dots at bottom on each tile, which lists all the properties of the document

Context menu is similar to right-click on report in classic BI. Below options available under the context menu

Working with Categories

Document tiles in new BI Launchpad can be grouped by categories.( Standard BOBJ categories). Security can be configured at CMC level. Documents can be tagged to categoris from context menu.

Once the document is assigned to a category . changing the landing page view to categories will display all categories .

Viewing standard BI folders

Once you login to BILaunchpad, select Folders Tab which displays all the folders for which the account has access to.


Bharat Sunkari

Managing Partner – Tek Analytics