Skip to Content

In some recent discussions about CSS a very useful answer by Victor Gabriel Saiz Castillo. Got me intrigued. He was able to alter the layout properties of the components by looking up the css classes.

In this blog I followed his steps and was able to alter the inner layout of a crosstab.

At first I created a standard crosstab and rendered this on the BI Platform on Google Chrome.

StandardCrossTab.png


After I did that I used the key combination <CTRL><SHIFT><J>


You get a lot of code of what the site is doing., When you scroll upwards you get to the part where the CSS is loaded for the standard theme.

lookingupCSS.png


After double clicking on the CSS you see all the classes within sapzencrosstab.


/wp-content/uploads/2013/06/crosstabcss_235326.jpg

And now for the test. I’ve used these classes for my own custom css and applied it to my application

This is the code I added into the CSS. I looked up these classes in the CSS code above.

.sapzencrosstab-Crosstab {

  border-spacing: 0;

  font-family: Tahoma, Arial, Helvetica, sans-serif;

  font-size: 8px;

  border-collapse: separate;

  line-height: normal;

}

.sapzencrosstab-DataCellAlternating,

.sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellAlternating {

  background-color: #008B8B;

}

The font size of the numbers is decreased and the alternating color for the rows is changed and this is the result.

Let’s render this crosstab with these new CSS settings


/wp-content/uploads/2013/06/result_235327.jpg

Using this method you can alter every part of the layout of a crosstab. Follow the steps described to look up the part you want to change and add this into your custom CSS file. Changing the properties of that class will result in change in the datasource.

To report this post you need to login first.

11 Comments

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

  1. Anil S

    Very useful, I was looking for the list of classes which can be used to modify the CROSSTAB component appearance, Thanks for sharing.

    (0) 
  2. Marco Nielinger

    Hi Jeroen,

    thanks for the information.

    just one remark: It is a nice (and currently the only) way to change the standard components but one has to keep in mind, that by doing so you “overwrite” the standard css-classes for the current application (in which the custom css is used). E.g. those changes would be applied to every crosstab – no matter what you write into the “CSS Class” property of the crosstabs.

    Is there a way to overwrite the css-class independently from the standard css-class?

    (e.g. by “.sapzencrosstab-DataCellAlternating .myDataCellAlternating” and then use that in the CSS Class property of certain crosstabs)

    Any CSS pros?

    Best regards,

    Marco

    (0) 
    1. Victor Gabriel Saiz Castillo

      Hi Marco,

      you can use css classes for that. E.g. following code:

      .AlternateRowClass .sapzencrosstab-DataCellAlternating,
      .AlternateRowClass .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellAlternating {

        background-color: #008B8B;

      }

      Afterwards you can type in “AlternateRowClass” in the CSS Class box of one crosstab in Design Studio. This class will only apply to the components you choose to.

      Best regards,

      Victor

      (0) 
  3. Emanuel Pichelkastner

    Hello Victor,

    I was trying to individually assign to a specific crosstab in DS 1.2

    I entered in my CSS file :

    .AlternateRowClass .sapzencrosstab-DataCellAlternating, .AlternateRowClass .sapzencrosstab-RowHeaderArea .sapzencrosstab-HeaderCellAlternating { background-Color: #FF33CC; }

    In CSS Class box for this crosstab I entered .AlternateRowClass – but there was no effect.

    I double checked if the application is connected to the CSS file and it was.

    Other changes are working.

    When I tried to change .sapzencrosstab components without .AlternateRowClass it was working – but unfortunately for all crosstabs – which I don´t want.

    Do I oversee something ?

    Best regards

    Emanuel

    (0) 
    1. Victor Gabriel Saiz Castillo

      Hello Emanuel,

      I just did a copy and paste of your code and entered the class AlternateRowClass in the CSS Class entry of a crosstab, it works like a charm!

      Either it was a cache issue or you entered the name starting with the dot.

      Best regards,

      Victor

      (0) 
    2. mohd fahad

      Hi Emanuel,

      I’m pretty sure you would have found the fix, as this post is pretty old.

      Looks like you are missing “AlternateRowClass” in your code highlighted below.

      .AlternateRowClass .sapzencrosstab-DataCellAlternating, .AlternateRowClass .sapzencrosstab-RowHeaderArea, AlternateRowClass .sapzencrosstab-HeaderCellAlternating {

      background-Color: #FF33CC;

      }

      Regards,

      Fahad

      (0) 
  4. Arijit Das

    So this is how we are supposed to get the list of classes. How pity that SAP has not released any official documentation on the usable classes 🙁 . But it’s good to see some good hackers around 😛 .

    (0) 
    1. Jeroen van der A Post author

      Hi Varun,

      thank you for your kind words.

      You can make it dynamic using @media in the custom css. You define classes based on the outcome of the @media So classes can have different properties based on screen size, tilt etc.

      best regards,

      Jeroen

      (0) 

Leave a Reply