Skip to Content

How to show status icons for BEx Exceptions in Design Studio

I started this journey here How to Find and Change the CSS Class – Design Studio

It is easier to do this using the conditional formatting from Analysis Office (seeChecking out Features from Analysis Office to Design Studio ) but maybe you want to read the exceptions from the BEx Query.

Some of this is described in the Design Studio Learning Hub material, but I struggled with it.  Finally I got it working today.

Step 1: Set up Exceptions in the BEx Query:


Step 2: In Design Studio, set up the custom.css for the Crosstab property as follows:


Code is also shown here for readability:


background-color:#FFFFFF !important;



background-color:#F9F9F9 !important;


.sapzencrosstab-DataCellAlert1Background, .sapzencrosstab-HeaderCellAlert1Background



background-image: url(‘/aad/resources/~1399838692937~/sap/zen/crosstab/themes/sap_platinum/img/exceptions/trend_asc_9.gif’) !important;

background-repeat:no-repeat !important;

background-position:center top !important;


.sapzencrosstab-DataCellAlert9Background, .sapzencrosstab-HeaderCellAlert9Background



background-image: url(‘/aad/resources/~1399838692937~/sap/zen/crosstab/themes/sap_platinum/img/exceptions/trend_asc_1.gif’) !important;

background-repeat:no-repeat !important;

background-position:center top !important;


Step 3: Place the custom.css in the Properties of the crosstab and set Conditional Formatting to true:


Step 4: At run time review the cross tab:


Step 5: Turn Exceptions off:


I need to change the color of the arrows but that is for another day.  I found the .GIF files by searching the DOM in IE11.

Here is a recording in action:


Design Studio 1.1 Full List of CSS classes (?)

HANA, BI, BW on HANA Hands-on Sessions with SAP Mentors at ASUG Annual Conference / SAPPHIRENOW

ASUG Annual Conference – Add Dashboarding/Design Studio to Your Agenda

Dashboarding/Design Studio Sessions at Conference

Find all the Design Studio-related sessions here for ASUG Annual Conference and below:

Session ID Title Date
1 Hands-on: SAP BusinessObjects BI 4.1, SAP BW and SAP BW on HANA – All in one day 6/2/2014
207 Latest News on SAP BusinessObjects Design Studio 6/4/2014
208 Influence SAP at the ASUG SAP BusinessObjects Design Studio Influence Council 6/4/2014
305 SAP BusinessObjects Analysis Roadmap to SAP BusinessObjects Analysis & Design Studio Roadmap 6/4/2014
1308 ASUG Influence Council: Business Intelligence with SAP BusinessObjects Mobile 6/4/2014
You must be Logged on to comment or reply to a post.
  • That is exactly what i was looking for. I was creating scorecards with separate text cells formatted by css, and wondering how it was possible for an entire crosstab like it was on tutorial. I was searching if i could set “If” conditions on a css file, but i was on a wrong path; crosstab cells are just defined by Alert1-9, separately. Anyway thank you for sharing this.



  • Hi,

    the solution is working perfectly (only with one exception),

    but it only supports the first exception of a query, more will be ignored (no pics, only data shown).

    Any information about this?

    Regards, André

    • Hi André,

      I am not sure if it’s the same problem but, i realized when i was working with exceptions that, you need to add a bex query as a data source after you make all exceptions at bex. I had two identical data source(same bex query);  one was supporting all of the exceptions but the other one was only showing the one i created before adding the ds. So if you make an exception after you already added your query as a data source to design studio, you need to delete/re-add the data source. Resetting initial view, reload,restart didn’t work for me.



  • Hi Tammy,

    How can we incorporate certain functionalities like:

    – Bold and Left Aligned some of the rows

    – Italic, not Bold and right aligned some of the rows

    What shall go in the CSS, as I’m a newbie in CSS and hence need your expert thoughts ?

    Thanks & regards,


  • HI Team,

    I used similar setting for conditional formatting. But the formatting gets applied to adjacent columns as well which are not based on exceptions in Bex. Please advise

  • Tammy

    If creating on the BI Platform, where do you store the CSS File? I have tried put the path or just eth css file name and it is ignored?

    If I put the code in the application CSS File it all works fine, just cant get it working per crosstab. I want to have different colours for different crosstabs.



    • Hi Alex – which version of the BI platform are you using?  I haven’t used this for a few years now, as SAP offers better features for this like the Scorecard

      • Hi Tammy

        1.6 SP4 I believe


        The scorecard is not good for what I want, I can get the exceptions to be a different colour but what I cant do is get it so two crosstabs use different colours.

        I have tried this

        .ct1.sapzencrosstab-DataCellAlert1Background, .ct1.sapzencrosstab-HeaderCellAlert1Background {
        background-color: #00A149 !important

        Then applied ct1 as the class for the crosstab but it just seems to be ignored?







        • OK, what about conditional formatting?  See the reply in this thread:

  • Hi Tammy

    I can certainly try out starting in Analysis Office and jumping to Design Studio but it does seem a little long winded! I can get the CSS working if its in the main CSS file for my application but I don’t want it to apply to all crosstabs! I’m also wary of how to the AO to DS is going to work, I have spent a lot of time on the application already so don’t want to have to start again, I’m assuming the AO to DS is going to generate some type of CSS or Code somewhere that would need to be copied into my current app.


    Update: Seems that isn’t going to work, the Conditional Format in AO is just creating an exceptions config in Bex Query, I want to change the colours of these exceptions

    • Hi Alex – this document is over 3+ years old and we’ve refreshed our boxes several times since then (I didn’t go to production with this, this was proof of concept).  I’ll try to research more for you.  Also Victor Saiz Castillo wrote a better document (in my opinion) than the above but it didn’t get migrated to the new site 🙁


  • I have found the solution!

    Spoke to a Colleage who does web development and deals with CSS, If you put “#CROSSTAB_1 ” It will only affect that crosstab

    Below is my code, Crosstab_! has my new colours below, Crosstab_2 contains the standard Bex Query colours
    #CROSSTAB_1 .sapzencrosstab-DataCellAlert1Background {
    background-color: #00A149 !important
    #CROSSTAB_1 .sapzencrosstab-DataCellAlert2Background {
    background-color: #92D050 !important
    #CROSSTAB_1 .sapzencrosstab-DataCellAlert4Background{
    background-color: #FFFF00 !important
    #CROSSTAB_1 .sapzencrosstab-DataCellAlert5Background {
    background-color: #FFC000 !important
    #CROSSTAB_1 .sapzencrosstab-DataCellAlert7Background {
    background-color: #FF0000 !important

  • Hello Tammy,

    thanks for that tutorial – well for me it´s not working till now.

    I definied the exceptions in the BEx Query like you did and it´s working fine when executing the query in bex analyzer. The background color of the result is green, yellow or red.

    I copied your css and created a new local text file custom.css. I inserted the whole coding and uploaded it to my bi server into the same folder as the design studio report. When I execute it the first result value has green background-color and that´s it. All other values are like before.

    Do you have any advices? Many thanks in advance!

    Cheers, Mario

    • Hi Mario – I am sorry to hear that; given that this blog is over 3 years old, would you please create this as a question at and share which version/SP of Design Studio you are using, along with the version of the BI Platform?