Skip to Content

   As a leader in the adoption of the SAP Technology, SAP Global IT enables all internal Lines of Business with the newest versions of the SAP Suite. SAP Runs SAP is a reality – implement on production first at SAP and show that our business can take the benefit out of it – and share our experience with the entire SAP Community.

   SAP BusinessObjects Design Studio, in the area of Analytics, is a great example. Released to market in November 2012, we started building our first solutions early in 2012 and our expertise has been continuously growing along with the number of solutions we have delivered to our internal customers.

   This is this expertise that we aim to share via a series of blogs covering various topics of delivering solutions with this tool. In the recent past, we already published a first item with the “New trends in dashboarding”.

 

   In this specific blog, we want to introduce the tips and tricks we have found in our developments to customize tables, in the version 1.1 of SAP BusinessObjects Design Studio.

   Since this version, SAP BusinessObjects Design Studio offers the possibility to modify components and layouts with custom css code. This is a true innovation and a first step toward a fully customizable dashboard. In this post, we are going to focus on tables which is the primary request from our Financial Analysts.

Note : all tips presented in this blog are based on SAP BusinessObjects Design Studio version 1.1. They may not be valid with a version 1.0.

Customizing tables in SAP BusinessObjects Design Studio

   The default table style is set to cover the most generic needs – and generally end users ask for a layout reflecting the standard style in their organization.

  /wp-content/uploads/2013/07/table1_249264.png

Pre-requisite: adding a custom style sheet in Design Studio

   By default, the style of a dashboard is determined by the theme selected when it was created. Since the version 1.1, Design Studio now offers  the ability to overwrite these pre-built styles. Here are the steps to do this:

  • Create a new file (or open the one that has been used before)
  • Add the style properties to modify what you want to customize
  • Save this file with the .css extension
  • Select the root dashboard on the left pane and click on the browse button
  • Finally, upload your .css file on the platform and it will be applied on your dashboard

/wp-content/uploads/2013/07/prerequisites_249265.png

Modify the Header Font style

/wp-content/uploads/2013/07/classesoverview_249272.png

   

   In this example, we are going to set the font of all headers (highlighted in red above) in Calibri, Bold and Biggerand to center the text.

   1. You need to apply the properties to this class :

.sapzencrosstab-HeaderCellDefault {
      font-weight: bold;
      font-family: "Calibri";
      font-size: 15px;
      text-align: center;
}

   

   2. When you have written this into a .css file, you need to apply it on your dashboard by selecting it on the “custom css” property in SAP BusinessObjects Design Studio. The result should look like :

/wp-content/uploads/2013/07/table2_249322.png

   In the case you would like to put in Bold only the “Quarter” column for example, you just have to apply the properties to the sapzencrosstab-RowHeaderArea class.

Setting Colors

   To color the background of all the data cells, you need to add a background-color attribute on the sapzencrosstab-DataCellDefault. The common usage is to color odd rows in a color and even rows in another color.

   Data rows have a dedicated class: sapzencrosstab-DataCellAlternating.If you want to create a zebra-styled table, you need to fill the odd rows in a first color with sapzencrosstab-DataCellDefault, and then to add another color for even rows with sapzencrosstab-DataCellAlternating. You need to add the !important key word after the property to overwrite the current css.

.sapzencrosstab-DataCellAlternating {
      background-color: #CCFFCC !important;
}
.sapzencrosstab-DataCellDefault {
      background-color: #EAF2D3;
}

   The result looks like :

/wp-content/uploads/2013/07/table3_249332.png

   If you want to include the quarters in the zebra style, you just need to add them in the css classes.

.sapzencrosstab-DataCellAlternating, .sapzencrosstab-HeaderCellAlternating {
      background-color: #CCFFCC !important;
}
.sapzencrosstab-DataCellDefault, .sapzencrosstab-HeaderCellDefault {
      background-color: #EAF2D3;
}

   The result looks like :

/wp-content/uploads/2013/07/table4_249333.png

Modify the borders

   According to Design Studio css styling, there are 3 types of borders: 
 
  /wp-content/uploads/2013/07/table5_249334.png

   1. The borders of Data cells

   2. The borders of Header cells

   For these two first points, you need to add a border: attribute in the dedicated .sapzencrosstab-DataCellDefault and .sapzencrosstab-HeaderCellDefault

 

   3. The external borders of the tab

 

   In this case you need to modify the .sapzencrosstab-TableDiv class.

.

.sapzencrosstab-DataCellDefault, .sapzencrosstab-HeaderCellDefault {
 background-color: #EAF2D3;
 border: 1px dotted #98bf21;
}
.sapzencrosstab-HeaderCellDefault {
 font-weight: bold;
 font-family: "Calibri";
 font-size: 15px;
 text-align: center;
 border: 1px solid #98bf21;
}
.sapzencrosstab-TableDiv {
 border: 1px solid #98bf21;
}

   Here is the final result

/wp-content/uploads/2013/07/table6_249335.png

Additional Tips & Tricks

    To modify the color of the whole “header” part, you need to modify a lot of classes. Here is what the css code must look like:

.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellDefault,
.sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellAlternating,
.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellAlternating,
.sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellDefault{
      color: white;
      background-image: none !important;
      background-color: #A7C942 !important;
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A7C942', endColorstr='#A7C942') !important; /* For IE users */
}

   And the result you get:

/wp-content/uploads/2013/07/table7_249336.png

   To modify the height of a cell, you need to overwrite the .sapzencrosstab-DataCellContentDiv class. For example:

.sapzencrosstab-DataCellContentDiv {
      height: 60px;
}


     will give this result:

/wp-content/uploads/2013/07/table8_249337.png


To conclude

   You can of course modify each individual part or component by digging into the source code of the tab. In chrome of Firefox, use the inspector and look which classes are being used. Sometimes, you need to add  !important at the end of your property so it will overwrite the current property. Now it is your turn to customize your tables!

Useful link

About SAP BusinessObjects Design Studio : click here

To report this post you need to login first.

38 Comments

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

  1. Manali Patel

    Hello David,

    Thank yo. This is very helpful blog.

    But I wonder how can I fix width of columns in crosstab.

    I tried

    1. .sapzencrosstab-DataCellContentDiv { 
    2.       width: 100px

    but its not working.

    Can you suggest me for the same.

    (0) 
    1. Dirk Mayrock

      Hi Manali,

      as far as I know in DS 1.1 this is not supportet. I heared that something like that will come in 1.2. Maybe a collegue from development / productmanagement can confirm.

      Dirk

      (0) 
    2. Israel Hernandez

      Manali, it’s possible from the tool I’m using the 1.2 version and when you select the crosstab, there is an option that says ‘Column Widths’ on the Display Area, you can edit from there as you desire. it works.

      (0) 
  2. Anil Kumar

    David,

    This is very helpful. Is it possible to have different color themes for two different crosstab in the same applicaiton by this approach? I guess not, as once you override a specific style class in your custom css, it will be applicable for all the component which is using that style class and in this approach, we don’t have an option of associating it to a component using the CSS class property.

    (1) 
    1. Pierre COMBE

      Hi Anil,

      Yes, you can have one CSS class by tables, and so several tables with different themes.

      In the CSS file, you have to do this:

      .myTable1 .sapzencrosstab-DataArea { xxx, … }

      .myTable1 .sapzen… {font:red; …}

      .myTable2 .sapzencrosstab-DataArea { xxx, … }

      .myTable2 .sapzen… {font:green;…}

      Finally, in DS, click on the table, on the entry “CSS class”, enter myTable1 for a table and in the properties of the second one, enter myTable2. Your tables will have different colors.

      Thank you,

      Regards, Pierre

      (1) 
  3. Jay Harter

    Thanks David.

    Is there a way to remove the currency symbol from the data table? I can find the code where the currency symbol is added – but it seems to be in each cell. Code & pic shown below:

    <div id=”__cell24_contentDiv” class=”sapzencrosstab-DataCellContentDiv” style=”width: 44px;”>$ 23,678</div>

    Note: above $ is “$nbsp” – but the nbsp turned into a non-breaking space…

    curSym.jpg

    (0) 
      1. Jay Harter

        Thanks Pierre.

        Yes. I’m using a BW query, but the results of the query (within the edit initial view) are without a currency symbol. I believe the currency symbol is there because of the theme I chose (Platinum) within Design Studio. I don’t want to remove the theme as all of the other settings are preferable. But, I do want to remove the currency symbol.

        (0) 
        1. Lohith Hattera

          Hi Jay,

          If you are still looking for an answer, here it is…You can use one of the 3 options available under Display properties. The available options are “Display Both in Header”, “Display units in Data cells” and “Do not display”. Last one should be the option to fulfill your requirement.

          Hope this helps.

          Thank you.

          (0) 
      1. Anshul Bhatt

        Hi Pierre,

        Thanks for reply.


        I got answer of my question.

        Here is that css code to change the selected row color.




        .sapzencrosstab-HoverRowHeaderCell.sapzencrosstab-HeaderCellDefault { 

          background: red !important

        .sapzencrosstab-RowHeaderArea .sapzencrosstab-HoverRowHeaderCell.sapzencrosstab-HeaderCellAlternating { 

          background: red !important

        .sapzencrosstab-HoverDataCell { 

          background: red !important

        .sapzencrosstab-SelectRowHeaderCell.sapzencrosstab-HeaderCellDefault { 

          background: orange !important

        .sapzencrosstab-RowHeaderArea .sapzencrosstab-SelectRowHeaderCell.sapzencrosstab-HeaderCellAlternating { 

          background: orange !important

        .sapzencrosstab-SelectDataCell { 

          background: orange !important

        .sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HoverColHeaderCell { 

          background: red

        .sapzencrosstab-ColumnHeaderArea .sapzencrosstab-SelectColHeaderCellOrig { 

          background: orange; 

        .sapzencrosstab-ColumnHeaderArea .sapzencrosstab-SelectColHeaderCell { 

          background: orange; 



        Regard,

        Anshul

        (0) 
  4. Saranya S

    Hi David,

    Thank you for sharing this useful information.

    I tried your code in design studio 1.3. I applied sapzencrosstab-HeaderCellDefault class to my crosstabs. But there is no difference in the visualization and the code is not working. Could you please help to make it work?

    (0) 
      1. Saranya S

        Hi Pierre,

        Thanks for your reply. already defined CSS is working fine in DS 1.3 also. I just restarted the design studio tool after adding new code in CSS file, to see the visualization changes. So whenever I m doing some changes in CSS file for crosstab or filterpanel(like changing the background color or font color), I have to restart my tool to see the changes and this process is time consuming.

        Is there any other way or option to see the visualization changes(for crosstab or filterpanel) without restarting the design studio tool after some code change in CSS file?

        Thanks in advance.

        Regards,

        Saranya S

        (0) 
        1. Pierre COMBE

          Hi Saranya,

          To avoid to restart Design Studio:

          – Run your dashboard locally (by clicking on the green arrow)

          – then a browser will open

          – change your CSS codelines

          – clean your cache browser

          – refresh the browser by clicking on F5, it should be fine.

          The dashboard is not updated if you don’t clean your browser cache.

          Best Regards, Pierre

          (0) 
          1. Saranya S

            Hi Pierre,

            Thanks for your reply. Eventhough I cleared my browser cache and refreshed the browser. I was unable to see the CSS changes in the application. When I restart the design studio tool, I can see the CSS changes in the application.

            Regards,

            Saranya S

            (0) 
          2. André van der Heijden

            What I do is I use the browser’s developer tools (debugger) by pressing F12. You can edit the custom.css in real-time and see changes in realtime while debugging. When I am done applying the necessary changes I copy-paste the css-code to my custom.css file and save it.

            (0) 
  5. Marcin Borowik

    Hello,

    I am wondering if it is possible to make the crosstab transparent.

    I would like to leave only the data without frames etc and behind it it will be background image.

    Something similar like this chart below.

    /wp-content/uploads/2015/04/zzzzzzzzzzzzz_694989.jpg

    Thanks,

    Marcin

    (0) 
    1. Pierre COMBE

      Hello Marcin,

      I think yes it’s possible.

      On one of these properties (sapzencrosstab-Crosstab, sapzencrosstab-DataArea, sapzencrosstab-TableDivBackground), please apply this property:

      background: transparent;

      Thank you,

      Regards, Pierre

      (0) 
  6. Artur Rodriguez

    Hi! Good article. Does anyone know if is it possible to get a different format for subtotals?

    Also changing the format of cells with conditional formatting

    Thakns!ª!!!

    (0) 
    1. Roland Offereins

      Hi Artur,

      Regarding the conditional formatting, I have come across the same issue. I have HANA as a data source.

      You have to do the following:

      Connect the view in Analysis for Office (Excel) (really!). Create your view and apply conditional formatting there.

      Use smart copy form A4O

      Go to DS. Right click on the Datasources folder and select’Smart Copy’. The view will be pasted.

      You have to set the Conditional formatting property of your Crosstab to true.

      Afterwards you can change the colors in your css. I did not like the way the colors looked in the DS application. I used colors 3, 4 and 9 from A4O to create a Red/Amber/Green background color.

      This is how I changed my css afterwards

      .sapzencrosstab-DataCellAlert9Background {

      color: rgb(255,255,255);

      background-color: rgb(255,24,0)!important;

      font-weight: bold;

      }

      .sapzencrosstab-DataCellAlert4Background {

      color: rgb(0,0,0);

      background-color: rgb(255,217,0)!important;

      font-weight: bold;

      }

      .sapzencrosstab-DataCellAlert3Background {

      color: rgb(255,255,255);

      background-color: rgb(0,193,42)!important;

      font-weight: bold;

      }

      In my case, this only worked with a local connection to HANA; not with a BI platform connection. I had to export my DS application from the platform, switch to local mode, import the DS app. Then connect in A4O to local HANA connection, create view with conditional formatting, smart copy/paste, export DS app, switch to BI platform mode, import the DS app, and map the connection to the right HANA connection in BI platform.

      This is all quite cumbersome, but for Crosstabs there is no alternative.

      If you are connecting to BW, I’m told this needs to be done in a similar way. You have to create the conditional formatting in the query.

      Good luck!

      (0) 
  7. chandrasekhar koduri

    Thank you so much david very helpful,

    Any one can do Bold only column names use the following CSS code,

    .sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellDefault,  .sapzencrosstab-ColumnHeaderArea .sapzencrosstab-HeaderCellAlternating,  .sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellAlternating,  .sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellDefault { font-weight: bold;  font-family: “Calibri”;  font-size: 15px;  text-align: center;  }

    (0) 
  8. Markus Hagedorn

    Hello!

    How can i change the following symbols/functions (sorting, plus & minus (hierarchy) -> red frame in screenshots) to CSS (color: white)?

    DS_crosstab1.png)

         DS_crosstab2.png

    I look forward to solution.

    (0) 
  9. naveen raju

    Similar to different classes .sapzencrosstab, do grid layout has any classes to customise the sizes of the cells in it.. anyone who are familiar with working with css on grid layout pls share your knowledge or opinion on my doubt 

    (0) 
  10. Chinmay Swami

    Hi,

    Is there a way to add some Text in the area in black in the picture below

    I added this code but it didnt work:-

    .sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellDefault.sapzencrosstab-HeaderCellFirstInRow.sapzencrosstab-HeaderCellFirstInCol {
        content: "Touchpoint" !important;
    }

    Regards,

    Chinmay

    (0) 
    1. Chinmay Swami

      Found the solution on w3schools

      .sapzencrosstab-DimensionHeaderArea .sapzencrosstab-HeaderCellDefault.sapzencrosstab-HeaderCellFirstInRow.sapzencrosstab-HeaderCellFirstInCol :BEFORE{
      content: “Touchpoint” !important;
      }

      The content property is used with the :before and :after pseudo-elements, to insert generated content.

      If not specified it will not work.

      (0) 
  11. pandula venkateswarlureddy

    Hi friends,

     

    I am facing one issue in design studio crosstab report.I am getting data from sql server some of the values are in data base showing ZEROS but in cross tab report showing BLANK. How to replace Blank space with ZERO.

    (0) 

Leave a Reply