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

[Former Member]

          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.

Indicating a Selection on the Crosstab – the Current Scenario

              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.

Using CSS as a workaround to show selections

            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.

.one .sapzencrosstab-RowHeaderArea tr:nth-child(1).sapzencrosstab-HeaderRow td:nth-child(2) 

{

 background-color: #7bc3ef !important; 

}

 . one .sapzencrosstab-DataArea tr:nth-child(1) td 

{ 

background-color: #7bc3ef !important; 

} 

5. Upload this style sheet to the SAP BusinessObjects BI Platform using the property “Custom CSS” of your application (for more about CSS: http://scn.sap.com/docs/DOC-42544 ).

To upload:

• Open the Properties of the Application.
• Navigate to the property Custom CSS in the area Display
• Use the button on the right hand side of the property to open the Upload dialog
• Navigate to the folder where you previously saved the CSS file and select the file
• Make sure you select the folder where you stored your SAP BusinessObjects Design Studio Application for the location of the CSS File.
• Click 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 herehttp://scn.sap.com/docs/DOC-44531 )

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

.sapzencrosstab-SelectColHeaderCell, .sapzencrosstab-SelectRowHeaderCell, 

.sapzencrosstab-SelectDataCell  

{

 background: #7bc3ef !important; 

} 

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:

What are the advantages of this CSS trick?

• This can be used even if the crosstab is already being customized with other CSS classes. However, this CSS code has to be merged into the CSS file that you are already using in the application.
• The selected row can be highlighted in any desired way, such as highlighting certain specific cells in a row, by simply assigning properties to the classes.
• This can employed to select any row of the crosstab by default.

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