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”.

Enable selection.jpg

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

assign data source.jpg

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.

upload CSS stylesheet.jpg

                    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.

assign CSS class.jpg

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.

over-ride CSS class.jpg

10. Now run the application to view the output.

The application with crosstab default selection implemented would look like this:

/wp-content/uploads/2015/05/default_selection_crosstab_704399.gif

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-businessobjects-design-studio/

To report this post you need to login first.

12 Comments

You must be Logged on to comment or reply to a post.

  1. Mustafa Bensan

    Hi Haripriya,

    Thanks for sharing this very useful technique.  In my scenario I only have one dimension column as shown below:

    CrossTab.png

    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.

    (0) 
    1. Haripriya Gopi Post author

      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.

      scn2.PNG

      Screenshot taken during application startup in local mode:

      scn3.PNG

      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.

      scn4.PNG

      During Application startup in local mode:

      scn5.PNG

      Please try the code given above and let me know if this works for you πŸ™‚

      Thanks,

      Haripriya

      (0) 
      1. Mustafa Bensan

        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.

        (0) 
  2. AndrΓ© PIRES

    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( “<DIMENSION>”);).

    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é

    (0) 
    1. Haripriya Gopi Post author

      Hi Andre,

      This solution is more of an ‘indication for a selection’, than a selection, i.e., we make it appear to be selected using CSS. If you want a particular row to be selected and get the selected data as required, please try using a setFilter() function for that particular row in your application start up.

      Thanks,

      Haripriya

      (0) 
  3. Tanush Dey

    Hi Haripriya,

    If i would have to select all the rows what changes in CSS would i have to write . I have a requirement of default selection of all the rows.

    Thanks,

    Tanush

    (0) 
    1. Bogdan Popescu

      Hello Tanush,

      Please have this code, where n replaces a specific number, meaning all rows in the data area will be selected πŸ˜‰

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

      {

      background-color: #7bc3ef !important;

      }

      Regards,

      Bogdan

      (0) 
        1. Bogdan Popescu

          Can you please explain why do you want them to be selected? What is the purpose of that? What do you aim to obtain? Maybe I can help you get your results in another way πŸ™‚

          Regards,

          Bogdan

          (0) 
        2. Haripriya Gopi Post author

          Hi Tanush,


          This solution only indicates a selection, i.e., we make it appear to be selected using CSS. If you want a particular row to be selected and get the selected data as required, please try using a setFilter() function for that particular row in your application start up.


          Thanks,

          Haripriya

          (0) 
          1. Bogdan Popescu

            Hi Haripriya,

            Setting the filter will just filter out results displayed in the Crosstab, but it will not do the “selection” as you would manually do. There is no way to replicate via script the manual selection. That’s why I am asking what is the aim of having them all selected.

            Regards,

            Bogdan

            (0) 
  4. Paresh Gohil

    Hi Haripriya,

    I dint understand the benefit of using the following code.

         .sapzencrosstab-SelectColHeaderCell, .sapzencrosstab-SelectRowHeaderCell,

         .sapzencrosstab-SelectDataCell

         {

          background: #7bc3ef !important;

         }

    I am able to see both the dimension and the measure highlighted when I select a different row. The problem is after the click when i move my mouse over the row is not highlighted any more.. Any pointers ?

    Initial Load.

    /wp-content/uploads/2016/06/1_981127.jpg

    When I click  document LG

    /wp-content/uploads/2016/06/2_981137.jpg

    When I move   my mouse away from  the selected row

    /wp-content/uploads/2016/06/3_981138.jpg

    (0) 

Leave a Reply