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:
.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:
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:
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 |
Where do I upload my own images to use as arrows and what would the path be? Local mode and Netweaver. Thanks a lot.
Hello Toralf -
For local, I think you would use your local repository.
I am not using NetWeaver, so I am not sure. Take a look at Unable to load image in desktop app when connected to SAP NetWeaver
Tammy
Hi Tammy, any hints where to upload to BI Platform?
when I upload my arrow to the folder where my application is saved, it wont work. also with opendoc reference in the css:
background-image: url('http://xyz:8080/BOE/OpenDocument/opendoc/openDocument.jsp?sIDType=CUID&iDocID=AU9ftkavd49DhMnizkxU0Zs') which points to my arrow.jpg (which I have uploaded by DesignStudio).
thx ryan
Hi Ryan - I haven't tried loading it to the BI Platform; could you take a look at the answer in this thread to see if it helps?
How to add Custom CSS file?
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
I think the answer is in reply to Exception Icons not displayed in BI Launch Pad
for the small icons, I would reccomend to make them base64 in the css directly.
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
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é
I am not sure I follow your comment? Would you please elaborate?
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
Hi Onur,
exactly, I have the same problem and your solution works, thanks.
Regards,
André
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
Jomy - I am new to CSS as well. I recommend exploring the DOM, looking at it, and also check out the content from David Gyuraz here David Gyurasz
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
Please create this as a discussion at answers.sap.com so the community can help you
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
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?
Thanks
Alex
OK, what about conditional formatting? See the reply in this thread: https://answers.sap.com/questions/151947/sap-design-studio-conditional-formatting-crosstabs.html
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 🙁
Thanks Tammy
Was a bit annoying with the site move as lots of content is lost now 🙁
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 answers.sap.com and share which version/SP of Design Studio you are using, along with the version of the BI Platform?
Mario, You need to assign any CSS to the Custom CSS Property for the Application not the CSS Class for the Crosstable.