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.

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

Modify the Header Font style

   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 :

   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 :

   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 :

Modify the borders

   According to Design Studio css styling, there are 3 types of borders: 
 
 

   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

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:

   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:

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