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.
- Create a new application in SAP BusinessObjects Design Studio 1.6.
- Drag and drop the Crosstab component from the component panel.
- Add Datasource –> using Unx Connection
- Assign Datasource to the Crosstab
- 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!!
good one...
Hi,
Couldn't you use the formatter functionality?
Grtz
Koen
Hi Koen,
Which “formatter functionality” are you referring to? Formatter Functions are not applicable to the Crosstab component.
Regards,
Mustafa.
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
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.
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
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.
No Only for measure columns..If you need you can try it out..
Thank you.This works for me...:)
Can we do it the same thing for the chart in lumira designer ?
Yes you can try it out!!!
Hi Vidhya,
Is it possible to hide particular column total result cell using css, Please see below for reference.
Regards,
Ramesh.
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
Hi Vidya,
Thanks its working for me.
Regards,
Ramesh.
Hi Vidya, Thanks for your post.
same way,
How can you add the percentage(%) symbol for rows in a crosstab
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,
Hi,
You can try this.
.myCrosstabindollar.sapzencrosstab-DataArea td:nth-child(12).sapzencrosstab-DataCellDefault div::after {
content: '%';
}
Regards,
Ramesh.