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.

15 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) 

Leave a Reply