Skip to Content

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

To report this post you need to login first.

20 Comments

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

    1. Dinesh Lakshmanan 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

      (0) 
        1. Ketan Nagine

          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

          (0) 
          1. Dinesh Lakshmanan 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

            (0) 
              1. Ketan Nagine

                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

                (0) 
                1. Dinesh Lakshmanan 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

                  (0) 
  1. 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.

    (0) 
    1. Neil Hookins

      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

      (0) 
  2. 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

    (0) 

Leave a Reply