Skip to Content
Author's profile photo Former Member

Customize your Spreadsheet using CSS

Hi all,Here’s a short blog comprising the basic customizations that can be done to Spreadsheet Component using CSS.

Below is a spreadsheet with sample Data:

Screen Shot 2016-09-23 at 4.48.52 PM.png

Customize Row Dimension Header:

First Dimension:

Lets make the font color Dimension header Customer to Red.

CSS:

/*First Row Dimension Header – Customer ID*/

.custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr > td[dimId=’CSID’]{

color:red;

}

Screen Shot 2016-09-23 at 4.34.29 PM.png

Second Dimension:

Now let’s change the font of the second Dimension header “Calendar Year” to blue.

CSS:

/*Second Row Dimension Header – Calendar Year*/

.custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr > td[dimId=’0CALYEAR’]{

color:blue;

}

Screen Shot 2016-09-23 at 4.35.36 PM.png


Customize Column Dimension Header:

Now, making the column header name “Measures” to Green.

CSS:

/*First Column Dimension Header – Measures*/

.custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr > td[dimId=’CLA8AB2CKSXC5JQ4SGC09V11U’]{

color: green;

}

Screen Shot 2016-09-23 at 4.36.06 PM.png



Customize Row Dimension Members:

First Dimension:

Highlighting the members of Customers to cyan ,

CSS:

/*First Row Dimension Members – Customers*/

.custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr > td[x=’0′].rowDimMemberCell{

background: cyan;

}

Screen Shot 2016-09-23 at 4.36.25 PM.png

Second Dimension:

Highlighting the members of Calendar Year to grey ,

CSS:

/*Second Row Dimension Members – Years*/

.custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr > td[x=’1′].rowDimMemberCell{

background: grey;

}

Screen Shot 2016-09-23 at 4.36.41 PM.png


Customize Column Dimension Members:

Changing the font color of the measure members to darkblue,

/*First Column Dimension Members – Measure members*/

.custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr > td.colDimMemberCell{

background: lightgrey;

color:darkblue;

}

Screen Shot 2016-09-23 at 4.37.49 PM.png


Customize Data:

Now let’s move to data part. here’s how to change the color of the data to a color say brown,

.custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr > td.dataCell{

color: brown;

}

Screen Shot 2016-09-23 at 4.46.02 PM.png

Customize alternate rows:

For more readability , let’s differentiate the alternate rows.


/*Data – Here the style is done for alternative cells , you can change nth-child selector to odd or any specific row index*/

.custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr:nth-child(even) > td.dataCell{

background: #ffffc1;

}

Screen Shot 2016-09-23 at 4.38.56 PM.png

Highlight Only the Overall Result Rows:

CSS:

.custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr >td[title=’Overall Result’] {

background: #ffffc1;

}

.custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr >td[title=’Overall Result’] ~ td.dimMember,.sapEpmUiControlAnalyticgridGridTableInner > tbody > tr >td[title=’Overall Result’] ~ td.dataCell {

background: #ffffc1;

}

Screen Shot 2016-09-23 at 6.05.25 PM.png

Highlight Only the Result Rows and Overall Result Rows:

CSS:

.custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr >td[title=’Overall Result’] {

background: #ffffc1;

}

.custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr >td[title=’Overall Result’] ~ td.dimMember,.sapEpmUiControlAnalyticgridGridTableInner > tbody > tr >td[title=’Overall Result’] ~ td.dataCell {

background: #ffffc1!important;

}

.custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr >td[title=’Result’] {

background: #a5d1d1;

}

.custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr >td[title=’Result’] ~ td.dataCell {

background: #a5d1d1;

}

Screen Shot 2016-09-24 at 9.02.57 AM.png


Hope that helps 🙂 For more customization based on your requirement, post questions in this thread.

Regards

Dinesh

Assigned Tags

      21 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Dinesh,

      Can yon tell me how we can Highlight the Overall result row by any color ?

      Thanks in Advance!!

      overall.PNG

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Ketan,

      Design your css with the above snippets based on requirement and configure the css file at application properties.

      Then,set class of the Spreadsheet to custom.

      On the Result rows highlighting, will update the snippet soon.

      Regards

      Dinesh

      Author's profile photo Former Member
      Former Member

      I am able to highlight overall result but I need to highlight whole row with dynamic code.

      Please help me.

      Untitled.png

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hi Ketan,

      Updated the blog content with this Result Row Highlighting.

      Regards

      Dinesh

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Ketan,

      FYI - Have updated the content with css to  highlight only the datacells ignoring the blank cells.

      Regards

      Dinesh

      Author's profile photo Former Member
      Former Member

      Hello Dinesh,

      Thanks a lot.

      I have one more question like Can we change the content of spreadsheet using : before { content : "example"} ?

      Here i need to hide or overwrite content of "Result" block which is after Overall Result.

      I tried below code for it but its looks something wrong.

      .custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr >td[title='Overall Result'] ~ td.dimMember :BEFORE {

        content: "Ketan";

        background: red;

      }

      Untitled.png

      Can you help me to hide text "result" or overwrite it ??

      Thanks in advance.

      Regards,

      Ketan

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Ketan,

      You and your likes are welcome.

      No Direct way.

      Try this trick - make the font color of the Overall result same as that of background.

      .custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr >td[title='Overall Result'] {

      background: #ffffc1;

      color:#ffffc1;

      }

      Now append your text before as below in black color,

      .custom .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr >td[title='Overall Result']:before {

      content:"Ketan";

      color:black;

      }

      Regards

      Dinesh

      Author's profile photo Former Member
      Former Member

      Great!!!

      that trick works 🙂

      Thanks a lot Dinesh & Very Helpful Blog.

      Regards,

      Ketan

      Author's profile photo Former Member
      Former Member

      Hi Dinesh,

      If we have requirement like we need to hide content of 2 data cells of same column.how we can achieve this ?

      Here we have NOT_EXIST data in row 3 & row 5 for overall result.

      I have written following code to hide NOT_EXIST at data cell but due to different background, i can only hide one of them.

      .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr >td[title='NOT_EXIST']{

      color: red;

      }


      Untitled.png

      Is there any way, where we can co-relate to each data cell separately & write code for each data cell.

      Regards,

      Ketan

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Ketan,

      Agreed!- So let's change our approach, for hiding text hereafter , set the font size to 0px instead of our previous approach to match the background color. Here's the css.

      .sapEpmUiControlAnalyticgridGridTableInner > tbody > tr >td[title='NOT_EXIST']{

      color: red;/*not necessary for current approach*/

      font-size: 0px;

      }

      Regards

      Dinesh

      Author's profile photo Gopinath Kolli
      Gopinath Kolli

      Good blog Dinesh.

      very clear explanation step by step.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Many Thanks Gopinath 🙂

      Author's profile photo Sunny Johnson
      Sunny Johnson

      Thanks Dinesh for the detail explanation.

      Can this can be applied the same to Crosstab component ?

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Hello Sunny,

      The above CSS customization are written for Spreadsheet component only. If you need to customize crosstab in the same way, here is a good one - List of CSS for SAP Design studio

      Regards

      Dinesh

      Author's profile photo Sunny Johnson
      Sunny Johnson

      Thanks Dinesh for the quick reply and i will try to apply the same for crosstab. Helpful reply !

      Author's profile photo José Antonio Miras Ferrando
      José Antonio Miras Ferrando

      In my case with Design Studio 1.6 SP1 Patch 1 for "Highlight Only the Overall Result Rows" I use this setences

      /*** for Total labels ***/
      td.dimMember,.sapEpmUiControlAnalyticgridGridTableInner > tbody > tr >td[title="Resultado total"]{
      font-weight: bold;
      }

      /*** for Total values ***/
      .custom .sapEpmUiControlAnalyticgridGrid > tbody > tr >td[title="Resultado total"] ~ td.dimMember,.sapEpmUiControlAnalyticgridGridTableInner > tbody > tr >td[title="Resultado total"] ~ td.dataCell {
      font-weight: bold;
      }

      To improve I like bold the total last column by I don't fount the way.

      Thanks and regards.

      Author's profile photo Veeraraghavan Vijayarajan
      Veeraraghavan Vijayarajan

      Is it possible to have conditional formatting like based on certain values : can we add image ?

      Author's profile photo Miles Stevenson
      Miles Stevenson

      Is there a way to set all the columns to autofit the text?

      Author's profile photo Former Member
      Former Member

      Hi Miles

      Did you work this out?  We have a similar requirement.  Column widths default to standard width, and do not take account of the content.

      Thanks

      Neil

      Author's profile photo Sai Konka
      Sai Konka

      Hi Dinesh,

      Is there a way to change the column size in speadsheet with CSS, I've tried below through CSS but not working. Can you please advise if I am doing wrong here?

      .mysh. sapEpmUiControlAnalyticgridGridTableInner > tbody > tr > td.colIndexCell

      {

      width: 100px;

      min-height: 16px;

      }

      Appreciate your help.

       

      Thanks

      SAI

      Author's profile photo Former Member
      Former Member

      Hi Dinesh,

       

      I need to customize the spreadsheet to meet the business requirement.

      1: Need to change column name like column is Today_Balance  to Today Sales

      2: Need to change the sequence of the column,in design studio shows first dimensions then measures, I need to mix both in a particular sequence like "Branch No", "Branch Name" , "Today Sale", "Target Sale" , "Manager Name" , "Contact No".

      Request for the support.

       

      Regards