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):
Image may be NSFW.
Clik here to view.
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 "")
Then, go to the scorecard and add in this column the class "makeItPink", like here:
Image may be NSFW.
Clik here to view.
as this is defined in one column only, the custom color will be visible in one column, like here:
Image may be NSFW.
Clik here to view.
Alternative is to place the special class on scorecard level, in the general property "CSS Class"
Image may be NSFW.
Clik here to view.
Then all columns will apply the Custom color:
Image may be NSFW.
Clik here to view.
In this case, in column with column chart, only one row is pink as there is additional definition to make it happen:
Image may be NSFW.
Clik here to view.
(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:
Image may be NSFW.
Clik here to view.
(I have changed the Custom to Condition Bad 1 which is now overwritten)
Image may be NSFW.
Clik here to view.
Marking ONE value in column micro chart
Thanks to the finding of Maria Daniela Petersen Marichal, 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:
Image may be NSFW.
Clik here to view.
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:
Image may be NSFW.
Clik here to view.
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