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