Skip to Content
Author's profile photo Vidhya V

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

 

 

Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo santhosh cs
      santhosh cs

      good one...

      Author's profile photo Koen Hesters
      Koen Hesters

      Hi,

      Couldn't you use the formatter functionality?

      Grtz

      Koen

       

      Author's profile photo Mustafa Bensan
      Mustafa Bensan

      Hi Koen,

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

      Regards,

      Mustafa.

      Author's profile photo Koen Hesters
      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

      Author's profile photo Donnie Burhan
      Donnie Burhan

      I'm on Design Studio 1.6 SP 4, and this is not working for me.

      I need to change the double quote to single quote for this to work.

      Author's profile photo Vidhya V
      Vidhya V
      Blog 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

      Author's profile photo ramesh dabbeta
      ramesh dabbeta

      Hi Vidhya,

       

      Is it same for dimension columns as well.

      To display only the ‘%’ symbols:

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

      content: ” %”;

      }

       

      Regards,

      Ramesh.

      Author's profile photo Vidhya V
      Vidhya V
      Blog Post Author

      No Only for measure columns..If you need you can try it out..

      Author's profile photo JOSE ROY
      JOSE ROY

      Thank you.This works for me...:)

      Author's profile photo Subbarao Bommineni
      Subbarao Bommineni

      Can we do it the same thing for the chart in lumira designer ?

      Author's profile photo Vidhya V
      Vidhya V
      Blog Post Author

      Yes you can try it out!!!

      Author's profile photo ramesh dabbeta
      ramesh dabbeta

      Hi Vidhya,

       

      Is it possible to hide particular column total result cell using css, Please see below for reference.

      Regards,

      Ramesh.

      Author's profile photo Vidhya V
      Vidhya V
      Blog Post Author

      Hi,

      Try this....

      #DT_CHART_DATA_rowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(column count id 10 or 11) > td, #DT_CHART_DATA_rowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(11) > td {

      visibility: hidden;

      }

      #DT_CHART_DATA_dataArea tr:nth-child(10) > td, #DT_CHART_DATA_dataArea tr:nth-child(11) > td {

      visibility: hidden;

      }

      Regards,

      Vidhya

      Author's profile photo ramesh dabbeta
      ramesh dabbeta

      Hi Vidya,

       

      Thanks its working for me.

       

      Regards,

      Ramesh.

      Author's profile photo Subbarao Bommineni
      Subbarao Bommineni

      Hi Vidya,  Thanks for your post.

      same way,

      How can you add the percentage(%) symbol for rows in a crosstab

      Author's profile photo leo 02
      leo 02

      Hi Vidya,

      When I tried to apply percentage(%) symbol code in my CSS, It is not reflecting in Crosstab in Lumira designer 2.0. can you please help is there any alternative solution or do we need to any settings.

       

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

      content: "%;

      }

      I followed the above steps.

       

       

       

      Thanks,

       

      Author's profile photo ramesh dabbeta
      ramesh dabbeta

      Hi,

       

      You can try this.

       

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

      content: '%';

      }

       

      Regards,

      Ramesh.