Change styling of crosstab row on click of a button

[Former Member]

Hi All,

Initial problem : I have a cross-tab with several rows and columns. Users want the ability to select a row and click a button after which the font of the entire selected row should change to a particular color(say red).

Related problem : They may choose to perform the same action at a later point in time but the previously selected row(s) must remain red after the consequent actions. I.e. if row 1 was selected first then it must turn red and remain red when say row 2 is selected.

To solve the "related problem", I guess i could provide a check box and ask users to select all the rows that they want and then click on the button. But i am really stuck with the "initial problem".

This is what i tried:

1. Assigning css class to crosstab using "setcss". But this applies to entire cross tab which is not what i want

2. Overwriting standard sap css classes. Again this affects all parts which are related to the css class and not the row selected by the user.

Links i visited :

http://scn.sap.com/community/businessobjects-design-studio/blog/2013/06/06/new-in-11-css-classes

http://scn.sap.com/docs/DOC-44531

http://scn.sap.com/community/businessobjects-design-studio/blog/2013/06/22/css-continued-learning-fr...

http://scn.sap.com/community/businessobjects-design-studio/blog/2013/07/21/design-studio

http://scn.sap.com/docs/DOC-42544

http://visualbi.com/blogs/design-studio/css-tips-tricks-default-selection-crosstab-sap-businessobjec...

Please assist. Thank you.

Regards,

Palaniappan Ramanathan

[MustafaBensan]

Hi Palaniappan,

Just as a follow-up, you may find the new blog post below helpful in determining how to apply CSS for formatting the selected row in a crosstab as desired:

CSS Tips & Tricks: Default Selection in a Crosstab in SAP BusinessObjects Design Studio

Regards,

Mustafa.

[Former Member]

Mustafa,

Thank you for the link. I did have a look at the some time back(the poster is a colleague of mine). The problem with this is that the styling of the selected row "does not stick" as in when i move to the next selected row the previous one goes back to normal state. Also it does not happen on click of a button though i think that this is a smaller problem which can be solved.

Regards,

Palaniappan Ramanathan

[MustafaBensan]

Hi Palaniappan,

While it may certainly be possible to change the font colour of an individual row in the crosstab via CSS, the issue is that in order to be able to do so, you need to identify the row index of the selected row.  The getSelectedMember() method of the crosstab returns the dimension member of the row that has been selected but not the index.  I don't think there's a straightforward way of determining the row index from a selected member either.

Perhaps if you could provide some more information about the business purpose of highlighting multiple selected rows with a different font colour and the subsequent actions that need to be taken based on these, we could then propose other solutions.

Regards,

Mustafa.

[TammyPowlas]

Mustafa - excellent suggestion; perhaps there other options like conditional formatting that might fit the use case.

[Former Member]

Hi Mustafa,

My DS crosstab looks like this. There will be rows below this structure. What i want is, for the entire selected row to change color when the user selects that row and hits a button.

Users feels that the change of color is any indication that they have viewed that row and taken action(clicking the button) if necessary. Alternative methods of visual confirmation are fine.

Regards,

Palaniappan Ramanathan

[MustafaBensan]

Hi Palaniappan,

Unfortunately, I don't think there's going to be a simple approach to implementing your requirement.  I thought about Tammy's suggestion of conditional formatting (assuming your data source is a BEx Query) but even if we pass back a variable to influence the exception colours there is no way to restrict this to a particular row.

In Design Studio 1.4, assuming the highlight colour of the selected row in a crosstab is controlled via CSS, you'd need to find out the applicable CSS class for the selected row state and update that to the required format.  However, you still have the issue of highlighting multiple selections.  I assume the data will be dynamic, so you can't simply place static checkboxes next to the rows of the crosstab.

If you wait for Design Studio 1.5, I believe the crosstab will support multiple row selection, in which case if you can determine if there is a CSS class associated only with selected rows, you could possibly achieve your desired result.

All of that being said though, I would like to further explore the real business need for this row highlighting.  When you say "Users feels that the change of color is any indication that they have viewed that row and taken action(clicking the button) if necessary", what type of action are we talking about here?  Is it an action that is going to be invoked from the Design Studio application?  What is the overall business purpose of the particular Design Studio application that contains the crosstab you are referring to?

Regards,

Mustafa.

[Former Member]

Mustafa,

Well the crosstab will contain a number of customers who are involved in some transaction with the organization. The users have knowledge of which customers to hold and which ones to release. Users will review the crosstab in a random way(i.e. not sequentially). So they could look at 50th row first then move to the 75th row and come backwards to the 25th row. They need a way to indicate that they have visited that row and taken an action on it.

Regards,

Palaniappan Ramanathan

[mike_howles4]

Perhaps they could print out this data in a report format using Webi and use a highlighter.

[mike_howles4]

More serious answer though...

Could you have a CheckBox Group and they could check mark each customer they have reviewed to achieve this task list-oriented activity?

The CheckBox Group could filter in (or out) the CrossTab results left to (or that have been) reviewed.

[Former Member]

Hi Michael,

I tried it and this approach seems to have some problems as well. While i can align the checkbox with the crosstab, the problem comes with the scrolling. While the crosstab scrolls the checkbox remains static.

[MustafaBensan]

Hi Palaniappan,

Building on Mike's filtering suggestion, I think an effective method of communicating "actioned" customers would be as follows:

1. Create a second crosstab (and associated data source) placed under the first crosstab;
2. When the user selects a customer from the first crosstab and clicks an "Actioned" button, add this customer to a filter string/array and then apply a filter to the data source of the second crosstab;
3. If possible, you could also filter out the actioned customers from the first crosstab for further clarity.

The above approach would avoid the checkbox alignment issue and also make it easier for the user to see which customers have been actioned.

Regards,

Mustafa.

[Former Member]

Mustafa,

Can you tell me how to achieve step 3 code wise?

[MustafaBensan]

Hi Palaniappan,

Assuming the customer dimension does not have an active hierarchy attached to it, you should be able to apply the DataSource.setFilterExt(dimension, value) method using an exclusion input string for the value as per the syntax below:

If that doesn't work you can pass the customers to be excluded back to a BEx variable for the data source assigned to the first crosstab.

Regards,

Mustafa.

[TammyPowlas]

Hi - have you tried going to F12 to see the CSS you need?  I did and then did this:

.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellDefault, .sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellDefault

{

white-space: normal;

word-wrap: break-word;

color:red;

}

.sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellTotal, .sapzencrosstab-DataArea .sapzencrosstab-DataCellTotal{

background-color: #F0AB00;

}

I get an orange total row and red in the headings; if the user does clicks another action the colors stay. 

But I am not sure how to use the setCSS method to fire the event from a button. 

[Former Member]

Tammy,

Thank you for your reply. I did try that but to no avail. The main problem with my requirement is that the font color change should happen after the button is clicked and should apply only to the selected row.

[TammyPowlas]

Could you try Bala's idea suggested in this thread?