Skip to Content

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:

/wp-content/uploads/2014/05/1bexquery_450370.gif

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

/wp-content/uploads/2014/05/2css_450371.gif

Code is also shown here for readability:

.sapzencrosstab-DataCellDefault.sapzencrosstab-DataCellAlternating{

background-color:#FFFFFF !important;

}

.sapzencrosstab-DataCellDefault{

background-color:#F9F9F9 !important;

}

.sapzencrosstab-DataCellAlert1Background, .sapzencrosstab-HeaderCellAlert1Background

{

color:rgba(0,0,0,0.0);

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

{

color:rgba(0,0,0,0.0);

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:

/wp-content/uploads/2014/05/3cssproperties_450372.gif

Step 4: At run time review the cross tab:

/wp-content/uploads/2014/05/4runtime_450373.gif

Step 5: Turn Exceptions off:

/wp-content/uploads/2014/05/5exceptionsoff_450374.gif

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:

Related:

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
To report this post you need to login first.

26 Comments

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

        1. Hans Segers

          Hi Ryan,

          Did you get it working ? I have the same issue : the trend icons are well displayed when executing locally, but not when I execute in BI Launch Pad.

          Where do you have to put the .gif on the BI Platform ?

          Do you have to change something in the css to make it working in BI Launch Pad ?

          Thanks

          Hans

          (0) 
  1. Onur Göktaş

    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.

    Regards,

    Onur

    (0) 
  2. André Berghaus

    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é

    (0) 
    1. Onur Göktaş

      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.

      Regards,

      Onur

      (0) 
  3. Jomy Joy

    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,

    Jomy

    (0) 
  4. Alex Cruickshank

    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.

    Thanks

    Alex

    (0) 
    1. Tammy Powlas Post author

      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

      (0) 
      1. Alex Cruickshank

        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?

         

        Thanks

        Alex

         

         

         

        (0) 
        1. Tammy Powlas Post author

          OK, what about conditional formatting?  See the reply in this thread: https://answers.sap.com/questions/151947/sap-design-studio-conditional-formatting-crosstabs.html

          (0) 
  5. Alex Cruickshank

    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

    (0) 
    1. Tammy Powlas Post author

      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 🙁

       

      (0) 
  6. Alex Cruickshank

    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
    }

    (0) 
  7. Mario Panzenboeck

    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

    (0) 
    1. Tammy Powlas Post author

      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 answers.sap.com and share which version/SP of Design Studio you are using, along with the version of the BI Platform?

      (0) 

Leave a Reply