Customize your Spreadsheet using CSS

[former_member206841]

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:

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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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;

}

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

Regards

Dinesh