Scorecard: Step by Step to Custom Color in Charts (pick visually one value)

[Karol-K]

When using Scorecard and the micro charts, there is sometimes a requirement to mark one row with special color to visualize the exception or some other property (attribute). In the blog Scorecard: Step by Step to Nice Visualization (Conditional Format) I have explained how to use the predefined values (good, bad and 10 others known from BW):

in order to mark the chart.

Sometimes you have your own color which you would like to use..

There are 2 options to achieve that.

Option 1.

When you scroll down, there is one "Custom" position - but when selected, nothing is happening. This is intended, as this position is prepared to allow custom definition which can be made in CSS. The use case is, you want to have one member always in some custom color.

First, go to the CSS and define the custom with following content:

.makeItPink .sapXTableBCItemValue.Custom,

.makeItPink .sapXTableBCForecastBarValue.Custom,

.makeItPink .sapXTableCmpChartItemValue.Custom,

.makeItPink .sapXTableCmpChartBarValue.Custom,

.makeItPink .sapXTableCmpTileItemValue.Custom,

.makeItPink .sapXTableCmpTileItemScale.Custom,

.makeItPink .sapXTableCmpTileBarValue.Custom,

.makeItPink .sapXTableCmcLbl.Custom,

.makeItPink .sapXTableUiCommonsJCValue.Custom,

.makeItPink .sapXTableMacLbl.Custom,

.makeItPink .sapXTableUiCommonsNCValue.Custom,

.makeItPink .sapXTableUiCommonsNCScale.Custom,

.makeItPink .sapXTableDmcDelta.Custom,

.makeItPink .sapXTableDTBItemValue.Custom,

.makeItPink .sapXTableMacTarget.Custom,

.makeItPink .sapXTableMacChart.Custom,

.makeItPink .XTableHBMCValSclCnt.Custom {

  color: pink;

}

.makeItPink .sapXTableBCBarValue.Custom,

.makeItPink .sapXTableDTBBarValue.Custom,

.makeItPink .sapXTableDTBBarValue.Custom,

.makeItPink .sapXTableBCBarValueMarker.Custom,

.makeItPink .sapXTableCmcBar.Custom,

.makeItPink .sapXTableDmcBarDeltaInt.Custom,

.makeItPink .sapXTableMacChart.Custom,

.makeItPink .sapXTableMacLine.Custom,

.makeItPink .sapXTableMacThreshold.Custom,

.makeItPink .sapXTableUiCommonsNCIndicator.Custom,

.makeItPink .sapXTableUiCommonsNT.Custom {

  background-color: pink;

}

.makeItPink .XTableHBMCSgmnt.Custom {

  fill: pink;

}

the code above is:

* definition all required classes to overwrite the Custom class in all charts.

* definition also "makeItPink" class which you can use in column definition (property "Cell CSS Class")

Then, go to the scorecard and add in this column the class "makeItPink", like here:

as this is defined in one column only, the custom color will be visible in one column, like here:

Alternative is to place the special class on scorecard level, in the general property "CSS Class"

Then all columns will apply the Custom color:

In this case, in column with column chart, only one row is pink as there is additional definition to make it happen:

(this is just to show the logic, of course such "condition" makes no sense - it is just selecting the pure number, you should use the conditional definitions from BW system or definitions created in Analysis Office)

In real live you can also use the "member" selection to select one member to custom color in big tables (like a table with 100 products) - you can mark one special product as you want.

Using the setCssClass method you can also change the definitions in the runtime (assigning different overwrite classes in scorecard)

Option 2.

If you need to have more custom colors, you can also overwrite the standard classes, those are:

ConditionBad1

ConditionBad2

ConditionBad3

ConditionGood1

ConditionGood2

ConditionGood3

ConditionCritical1

ConditionCritical2

ConditionCritical3

then, you can use the structure from above:

.makeItBlue .sapXTableBCItemValue.ConditionBad1,

.makeItBlue .sapXTableBCForecastBarValue.ConditionBad1,

.makeItBlue .sapXTableCmpChartItemValue.ConditionBad1,

.makeItBlue .sapXTableCmpChartBarValue.ConditionBad1,

.makeItBlue .sapXTableCmpTileItemValue.ConditionBad1,

.makeItBlue .sapXTableCmpTileItemScale.ConditionBad1,

.makeItBlue .sapXTableCmpTileBarValue.ConditionBad1,

.makeItBlue .sapXTableCmcLbl.ConditionBad1,

.makeItBlue .sapXTableUiCommonsJCValue.ConditionBad1,

.makeItBlue .sapXTableMacLbl.ConditionBad1,

.makeItBlue .sapXTableUiCommonsNCValue.ConditionBad1,

.makeItBlue .sapXTableUiCommonsNCScale.ConditionBad1,

.makeItBlue .sapXTableDmcDelta.ConditionBad1,

.makeItBlue .sapXTableDTBItemValue.ConditionBad1,

.makeItBlue .sapXTableMacTarget.ConditionBad1,

.makeItBlue .sapXTableMacChart.ConditionBad1,

.makeItBlue .XTableHBMCValSclCnt.ConditionBad1 {

  color: blue;

}

.makeItBlue .sapXTableBCBarValue.ConditionBad1,

.makeItBlue .sapXTableDTBBarValue.ConditionBad1,

.makeItBlue .sapXTableDTBBarValue.ConditionBad1,

.makeItBlue .sapXTableBCBarValueMarker.ConditionBad1,

.makeItBlue .sapXTableCmcBar.ConditionBad1,

.makeItBlue .sapXTableDmcBarDeltaInt.ConditionBad1,

.makeItBlue .sapXTableMacChart.ConditionBad1,

.makeItBlue .sapXTableMacLine.ConditionBad1,

.makeItBlue .sapXTableMacThreshold.ConditionBad1,

.makeItBlue .sapXTableUiCommonsNCIndicator.ConditionBad1,

.makeItBlue .sapXTableUiCommonsNT.ConditionBad1 {

  background-color: blue;

}

.makeItBlue .XTableHBMCSgmnt.ConditionBad1 {

  fill: blue;

}

Changes requried:

1. makeItPink to makeItBlue

2. .Custom to .ConditionBad1 (this one which you want to overwrite)

and the effect is:

(I have changed the Custom to Condition Bad 1 which is now overwritten)

Marking ONE value in column micro chart

Thanks to the finding of mdpetersenes, there is also an option to mark one value in the column chart.

How to make it?

1. you have to select a dimension which is IN the chart, it means a dimension which is NOT in row scope definition. In this example it is the DIST_CHANNEL dimension.

2. you can select the key of this dimension and define like this:

The "Member Presentation Part" is depending on your setting how you display members (key / text or text / key).

-> here the KEY 1 corresponds to Dist Channel "Fax", so you always will see FAX as pink.

The effect is:

You are restricted to 9 different members (as the conditional display is restricted to 9 values)

The example app can be downloaded in the repository.

Example

I have exported the data source to CSV and the example is available here.

applications/SCN_SCORECARD_CUSTOM-20160502175636.zip

I hope this explainations will help to understand the custom color