How to highlight individual rows in crosstab based on BW Query with structure DS 1.6.2

[Former Member]

Is it possible to highlight (change background colour of) specific rows in a crosstab in DS 1.6. I've seen posts and am now able to change column heading colours and perform alternating row colours for the entire cross tab by using custom CSS, but there are specific rows in a static structure that I want to be able to highlight.

I've also had a look at the scorecard instead of the crosstab but can't see how to achieve the requirement there either.

I've also tried using analysis office as the source, and while conditional formatting comes through to DS, this does not achieve what we require either. The 'format cells' option in AO does not get brought through to DS.

In the mock up below, we have business units 1 to 12, sub totals 1 and 2 and a total 1. In reality the names of the business unit will not sort in BW in the way that we require, hence we have created a structure in the BW query that lists each BU in the order that we require, and we then sub total and total also as required using formulae (there are lot more BU and subtotals in reality, the report has 85 rows and 13 columns).

What we want to achieve is that we have the subtotals and totals highlighted in someway so that they are easily identifiable when reviewing the report. The option in Bex to set 'display', 'highlight' to 'Highlighted Display' just makes the values bold, this is not enough.

This is just mocked up in excel but we would like, via DS, to be able to highlight these sub totals and totals. The number of rows and positions of subtotals will not change as they are fixed based on the BW query.

Any help much appreciated, Lee.

[Former Member · Accepted solution]

Hi,

Here you go:

CSS:

 #CROSSTAB_1_rowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(1) > td,
 #CROSSTAB_1_rowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(4) > td {
     background-color:yellow !important;
 }




#CROSSTAB_1_dataArea tr:nth-child(1) > td,
#CROSSTAB_1_dataArea tr:nth-child(4) > td {
     background-color:yellow !important;
 }

You can also use the Highlighted property for the data cells like that, but accessing the rows by their number is fine.

 .sapzencrosstab-DataCellEmphasized {
     background-color:yellow !important;
 }

[Former Member · Accepted solution]

HI Franck,

Great as always

I would like to know the Code what you have written

#CROSSTAB_1_rowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(1) > td,

#CROSSTAB_1_rowHeaderArea tr.sapzencrosstab-HeaderRow:nth-child(4) > td {

     background-color:yellow !important;

}

#CROSSTAB_1_dataArea tr:nth-child(1) > td,

#CROSSTAB_1_dataArea tr:nth-child(4) > td {

     background-color:yellow !important;

Could you please brief me it would be helpful

Thanks,

Varun

[Former Member · Accepted solution]

Hi Franck

I Believe he asked to highlight data where ever subtotal and total is there. correct me if i am Wrong

Thanks,

varun

[Former Member · Accepted solution]

Hi Franck,

Brilliant! Thanks very much! That first set of CSS will work perfectly for the report when we display it on the very large screen we have. For others to note though, this code works on rows displayed on the screen. So if you have more than 1 page of results, when you page down, the same row numbers will again be highlighted on the following page.

The second CSS works great in this regard as it will only highlight the rows that are actually set to be highlighted in the Bex query so removing this issue. The only downside is that Bex only highlights the values, so there is no highlighting in DS of the row description.

Do you know a way to include this Franck?

Thanks very much,

Lee

[Former Member · Accepted solution]

Hi Varun,

I've put the above code into the custom CSS of my application. It highlights rows 1 and 4 on the page. It highlights the whole row by the use of the HeaderArea which highlights for me column 1 as this is the only characteristic I have in the report. The use of DataArea then highlights all the key figures, hence it appears that the whole row is highlighted.

Note in the picture below I have changed yellow to grey, and the alternating row style is enabled too. I've deliberately cut off the row descriptions but all 4 rows do have text in the first column.

[Former Member · Accepted solution]

Hey Lee,

I'll start with your second point: I highlighted the line and no, unfortunately, the header is not concerned with it, meaning we can't target it simply with css. The only way is to use nth-child and you'll have the issue you raised previously.

Now, on the paging issue: do you have a lot of data ? If not, I would advise to enable the Pixel-based scrolling. All the data will be rendered, the scrolling experience will be better and it may fix the issue.

But correct me if I'm wrong, it seems you have more than your structure on the line. Am I right ? Unfortunately, the paging in the cross tab is stand alone and I never find any way to know on which set of data you are.

Could you share with us a screenshot of your whole app ?

I guess you understood the css, but in case:

nth-child is a css selector enabling to target a markup by its relative position (CSS3 :nth-child() Selector), more are available on the W3C website.

If you have a look at the HTML using a code inspector (F12 in IE, right click Inspect on Chrome), you'll see how the cross tab is built in the page, and the different areas can be accessed using either the IDs (#) or its classes (.).

Combining those accessors and some selectors gives you a powerful tool to apply CSS style exactly where you want.

Since you said the structure don't change, It's a good way to use that.

[Former Member · Accepted solution]

Exactly

[Former Member · Accepted solution]

Hi Frank,

Ok thanks again for all the info.

No we don't have a lot of info and so I switched on the pixel based scrolling as you suggested and using the nth child solution now works as we desire on the small screen which is great!

The Bex query just has one characteristic in the structure (rows), and many key figures in the columns (also another structure but not the one I was referring to, sorry if this has confused the issue).

So on the big screen that doesn't have any scrolling, what it looked like without any highlighting (the screen is multiple small screens hence the squared affect on the picture):

Using the data cell emphasised CSS code provides this result:

And using the nth child solution produces this result:

Thanks for all your help,

Lee

[Former Member · Accepted solution]

Nice ! All the best going forward.

[Former Member]

HI Lee,

I Think you can create alerter .by writing Script. writing if condition if(bu=st1) then apply alert like that did you try?

thanks,

varun

[Former Member]

Hi Varun,

No I haven't tried your suggestion. I'm very new to Design Studio and CSS so learning as I go. Would this be a script as CSS like Franck provided, so script to add to the custom CSS file of the application, or something else?

Regards,

Lee