Format your own symbol in the Crosstab using CSS – SAP Design Studio 1.6

With the release of SAP BusinessObjects Design Studio 1.6, there have been many new features and components. One feature that I found particularly interesting was the Crosstab. There are 5 measures columns. Four column should be display with prefix of ‘$'(Dollar) symbol and another one is ‘%'( Percentage) symbol.

However, when designing my dashboard, I found there is a challenge when placing the symbols using Universe connection. Because we know that using BEx connection, we can get those symbols from back end itself.

While there is no such option inside SAP BusinessObjects Design Studio using Unx Connection, I have found a way for it to be achieved through a workaround using CSS.

To do this, I have used the concept of n-th child, before and after CSS selector,

Using a workaround to display ‘$’ and ‘%’ symbols for measures columns:

In the following steps, I will show you how to display the symbols in prefix of measures columns in crosstab component in SAP BusinessObjects Design Studio 1.6.

1. Create a new application in SAP BusinessObjects Design Studio 1.6.
2. Drag and drop the Crosstab component from the component panel.
3. Add Datasource –> using Unx Connection
4. Assign Datasource to the Crosstab
5. Click on Edit Custom CSS icon, when is available at below screen shot,

To display only the ‘$’ symbols:

.myCrosstabindollar .sapzencrosstab-DataArea td:nth-child(n+1):nth-child(-n+4) div::before {

content: “$ “;

}

To display only the ‘%’ symbols:

.myCrosstabindollar .sapzencrosstab-DataArea td:nth-child(5).sapzencrosstab-DataCellDefault div::after {

content: ” %”;

}

To display Both symbols:

6. Apply the “myCrosstabindollar” class name in the Crosstab property.

Now, copy and paste the required CSS script in your stylesheet and see what it happens…Using this, we were able to formatting the Crosstab.

Thank You!!