Skip to Content

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!!

 

 

To report this post you need to login first.

6 Comments

You must be Logged on to comment or reply to a post.

    1. Mustafa Bensan

      Hi Koen,

      Which “formatter functionality” are you referring to?  Formatter Functions are not applicable to the Crosstab component.

      Regards,

      Mustafa.

      (2) 
      1. Koen Hesters

        So that’s the reason then, thanks Mustafa!  I used it somewhere for text component I think, the formatter function, I thought you could apply it everywhere

        (1) 
    1. Vidhya V Post author

      You can try it. More over that won’t be the issue. Please let me know your CSS code or any screenshot of your code to look further.

      Regards,

      Vidhya.C

      (0) 

Leave a Reply