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):

ni1.PNG

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:

ni2.PNG

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

ni3.PNG

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

ni4.PNG

Then all columns will apply the Custom color:

ni5.PNG

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

ni7.PNG

(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:

ni8.PNG

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

ni9.PNG

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:

bi10.PNG

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:

bi12.PNG

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

To report this post you need to login first.

5 Comments

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

    1. Karol Kalisz Post author

      Hi Maria,

      great!

      how you actually achieved that every bar is different color – as far I know the color is the same for all bars in a chart (unless you CSS with n-th() function.

      Karol

      (0) 
      1. Maria Daniela Petersen Marichal

        I create a conditional rule for each bar using the members of the dimension.

        In our case we know that we will have always 4 members for this dimension, so we can do something like this, for dynamic list of values or more than 9 i don’t think this will be useful

        Capture2.JPG

        Hope it helps to clarify 🙂

        (0) 

Leave a Reply