Crosstabs in SAP BusinessObjects Design Studio are one of the few components which can be used as a display component as well as a selector. When used as a selector, the user can interact with the crosstab to select one of the rows.
When used as a selector component, most often, users may want to have a single row on the crosstab already selected for them by default when the application opens up. While SAP BusinessObjects Design Studio offers users options to set and filter values by default on startup, there is actually a challenge to indicate that such a selection has already been made for them (on a crosstab component). This has been a common requirement by a lot of our clients. For the consumer of the dashboard it can be misleading to have such a default selection and not showing it to users. Now, while there is no option inside SAP BusinessObjects Design Studio to display this selection on a crosstab, it can be achieved through a workaround using CSS.
In the following steps I will show, how you can create a crosstab in SAP BusinessObjects Design Studio and configure the first row of the crosstab to be selected as part of the startup of the application.
1. Insert a crosstab into the application and set its layout properties. Rename the crosstab as required. I have named it as ‘CROSSTAB_1’.Set the top margin to the value 138, set the left margin to the value 300, set the bottom and the right margin to the value ‘auto’. Set the width and length to the values 500 and 400.
2. Set the property "Selection Enabled" to the value "True".
3. Assign a data source to the crosstab in the data binding property of the crosstab. For our example I am using a BEx query from SAP BW. This query brings the Order Amounts per Item Category across 3 years – 2007, 2008 and 2009 (You should be able to see this in the screenshot itself).
4. Save the following CSS script as a separate style sheet (create a notepad file and save it as css). If you are working on the Local Mode, you will have to save this file in the repository (where your application itself is saved). If you are working on the BusinessObjects Platform mode, you can save your application in any folder on your local system – we will access it in the next step to upload the application on the platform.
5. Upload this style sheet to the SAP BusinessObjects BI Platform using the property "Custom CSS" of your application (for more about CSS: ).
To upload:
The script above uses a base class and a sub-class. As you can see I created a CSS class ".one" which has a property background-color. ".one" is the base class. The subclasses used here,". sapzencrosstab-RowHeaderArea", ".sapzencrosstab-HeaderRow" and ".sapzencrosstab-DataArea" are the default classes provided by SAP BusinessObjects Design Studio. (The list of around 300 default CSS classes is explained here )
The CSS above will highlight the first row / second dimension column and the first measure row in blue #7bc3ef as mentioned in the code (.sapzencrosstab-RowHeaderArea tr:nth-child(1).sapzencrosstab-HeaderRow td:nth-child(2))
Note: When you select a row, only the cell before the measure / key figure in that row is highlighted.
To highlight the adjoining measure/key figure cell, modify the CSS classes .sapzencrosstab-SelectColHeaderCell, .sapzencrosstab-SelectRowHeaderCell and .sapzencrosstab-SelectDataCell as follows and save it in the same stylesheet (defaultselection.css):
Here, one rule (i.e. background property) is applied to multiple classes. These classes are connected by a comma separator.
6. Open the properties of the Crosstab. Navigate to the property CSS Class in the Display area.
7. Assign the value "one" to the CSS Class property.
8. Navigate to the On Select property in the Events area. Use the button to open the Script Editor.
9. Enter the following Script and click OK:
CROSSTAB_1.setCSSClass("");
This script will set the property "CSS Class" of the crosstab to the value null, each time a selection is being made in the crosstab.
10. Now run the application to view the output.
The application with crosstab default selection implemented would look like this:
Source:
Hi Haripriya,
Thanks for sharing this very useful technique. In my scenario I only have one dimension column as shown below:
Since you mention that the CSS "will highlight the first row / second dimension column", I adapted it as follows:
.one .sapzencrosstab-RowHeaderArea tr:nth-child(1).sapzencrosstab-HeaderRow td:nth-child(1)
{
background-color: #7bc3ef !important;
}
However, the first row is still not highlighted by default when the application starts up when running in local mode. Do you have any suggestions?
Thanks,
Mustafa.
Hi Mustafa,
This is a very valid and useful question. I applied the CSS to two scenarios:
1. Having a dimension column and a measure column
.one .sapzencrosstab-RowHeaderArea tr:nth-child(1).sapzencrosstab-HeaderRow td:nth-child(1){
background: #7bc3ef !important;
}
.one .sapzencrosstab-DataArea tr:nth-child(1) td {
background: #7bc3ef !important;
}
I saved the above CSS code as a custom stylesheet and entered the CSS class as 'one' to the crosstab.
As you can see in the image below, the first row is highlighted.
Screenshot taken during application startup in local mode:
2. Having only one dimension in the column (as in your case)
I applied the following CSS :
.one .sapzencrosstab-RowHeaderArea tr:nth-child(1).sapzencrosstab-HeaderRow td:nth-child(1){
background: #7bc3ef !important;
}
This is same as the code you had written. However, this seems to work for me.
I saved the above CSS code as a custom stylesheet and entered the CSS class as 'one' to the crosstab.
As you can see below, the first row is highlighted.
During Application startup in local mode:
Please try the code given above and let me know if this works for you
Thanks,
Haripriya
Hi Haripriya,
Thanks for the prompt and detailed response, from which I realised that I had forgotten to enter "one" as the crosstab CSS Class property. It is now working as desired
Regards,
Mustafa.
Hello Haripriya,
I'm trying to use your scripts and get the selected data using "getMembers" from the Crosstab elements (with instruction : var COLUMN = CROSSTAB_1.getSelectedMembers( "");).
This does not work at first until I select a row in the Crosstab myself, as if no row or cells are initially selected.
Can you please tell me if the row is actually selected in your scenario? And if the selected line data can be retrieved and used for other means?
Thanks for your help
André
Hi Andre,
