Semantic Colors in SAP Fiori Overview Page - Analytic Cards - How it really works!

[ckuczera]

In this Post I will describe the the possibility to use Semantic Colors in SAP Fiori Overview Page Analytical Cards in Detail. After taking some hours searching for SAP Documentation and SCN I have started to Debug the Analytical Cards and found a way to use the Colors.

In fact, the SAP documentation is not complete at this point, at least for UI5 version 1.71:

https://sapui5.hana.ondemand.com/1.71.41/#/topic/c7c5a828fe69411da7d63e2e63086b59

This has changed in newer version but I did not check the coding until now:

https://sapui5.hana.ondemand.com/#/topic/c7c5a828fe69411da7d63e2e63086b59

Let's start with a simple Donut Chat.

Semantic Colors in Donut Chart

The Donut Chart is using the property "bEnableStableColors" and the "colorPalette" in a slightly different way as other Chart Types, but the Solution for other Chart Types can also be adapted to the Donut Chart as well.

First of all you'll need to add the colorPalette as an Array having the following properties:

"card00": {

	"model": "default",

	"template": "sap.ovp.cards.charts.analytical",

	"settings": {

		"title": "{{card00_title}}",

		"subTitle": "{{card00_subTitle}}",

		"entitySet": "DV_BUFFERAGESTRUC",

		"kpiAnnotationPath": "com.sap.vocabularies.UI.v1.KPI#currentPeriod",

		"presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#currentPeriod",

		"navigation": "dataPointNav",

		"defaultSpan": {

			"rows": 12,

			"cols": 2

		},

		"bEnableStableColors": true,

		"colorPalette": [

			{

				"dimensionValue": "0",

				"color": "sapUiChartPaletteSemanticNeutral"

			},

			{

				"dimensionValue": "1",

				"color": "sapUiChartPaletteSemanticGood"

			},

			{

				"dimensionValue": "2",

				"color": "sapUiChartPaletteSemanticCritical"

			},

			{

				"dimensionValue": "3",

				"color": "sapUiChartPaletteSemanticBad"

			}

		]

	}

}

In my case the oData Service contains the following properties:

AVGAGE is marked as measure the rest is defined as dimensions.

VIS_COLORINDEX has a further text Link to VIS_COLORINDEX_TEXT using the sap:text annotation.

Alternatively, you can use the following annotation:

The Chart itself is configured as followed:

<Annotation Term="UI.Chart" Qualifier="currentPeriod">

	<Record Type="UI.ChartDefinitionType">

		<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Donut"/>

		<PropertyValue Property="MeasureAttributes">

			<Collection>

				<Record Type="UI.ChartMeasureAttributeType">

					<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>

					<PropertyValue Property="Measure" PropertyPath="AVGAGE"/>

				</Record>

			</Collection>

		</PropertyValue>

		<PropertyValue Property="DimensionAttributes">

			<Collection>

				<Record Type="UI.ChartDimensionAttributeType">

					<PropertyValue Property="Dimension" PropertyPath="VIS_COLORINDEX"/>

					<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Series"/>

				</Record>

			</Collection>

		</PropertyValue>

	</Record>

</Annotation>

The chart takes the dimension value of "VIS_COLORINDEX" and compares that with each array element property "dimensionValue" in the colorPalette, The text is read depending on the text annotation (in my case "VIS_COLORINDEX_TEXT").

The result is display in a semantic colored donut chart:

In the next step I tried to change the Chart type to something another Chart like "Column" and the Semantic Coloring was gone! To achieve Semantic Colors in other Chart Types, I had to debug a little bit deeper in the SAP UI5 Coding and finally found a solution as well.

Semantic Colours in other Chart Types

I found a second option in file VizAnnotationManager-dbg.js. This solution can be adapted to the following chart types:

• COLUMNSTACKED


• DONUT


• COLUMN


• VERTICALBULLET


• LINE


• COMBINATION


• BUBBLE

Further aspect: we are only allowed to use 2-4 Dimensions within the colorPalette. However SAP is checking that in the following code Snippet:

At least the parameter bEnableStableColors had to be removed or set to false! In other cases the color palette will not be used! In general I have the same oData constellation as described in the first example. Only difference is the changed bEnabledStableColors set to "false":

"card00": {

	"model": "default",

	"template": "sap.ovp.cards.charts.analytical",

	"settings": {

		"title": "{{card00_title}}",

		"subTitle": "{{card00_subTitle}}",

		"entitySet": "DV_BUFFERAGESTRUC",

		"kpiAnnotationPath": "com.sap.vocabularies.UI.v1.KPI#currentPeriod",

		"presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#currentPeriod",

		"navigation": "dataPointNav",

		"defaultSpan": {

			"rows": 12,

			"cols": 2

		},

		"bEnableStableColors": false,

		"colorPalette": [

			{

				"dimensionValue": "0",

				"color": "sapUiChartPaletteSemanticNeutral"

			},

			{

				"dimensionValue": "1",

				"color": "sapUiChartPaletteSemanticGood"

			},

			{

				"dimensionValue": "2",

				"color": "sapUiChartPaletteSemanticCritical"

			},

			{

				"dimensionValue": "3",

				"color": "sapUiChartPaletteSemanticBad"

			}

		]

	}

}

XML Configuration:

<Annotation Term="UI.Chart" Qualifier="currentPeriod">

	<Record Type="UI.ChartDefinitionType">

		<PropertyValue Property="ChartType" EnumMember="UI.ChartType/ColumnStacked"/>

		<PropertyValue Property="Measures">

			<Collection>

				<PropertyPath>AVGAGE</PropertyPath>

			</Collection>

		</PropertyValue>

		<PropertyValue Property="MeasureAttributes">

			<Collection>

				<Record Type="UI.ChartMeasureAttributeType">

					<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>

					<PropertyValue Property="Measure" PropertyPath="AVGAGE"/>

				</Record>

			</Collection>

		</PropertyValue>

		<PropertyValue Property="DimensionAttributes">

			<Collection>

				<Record Type="UI.ChartDimensionAttributeType">

					<PropertyValue Property="Dimension" PropertyPath="OBJID_SHORT"/>

					<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category"/>

				</Record>

				<Record Type="UI.ChartDimensionAttributeType">

					<PropertyValue Property="Dimension" PropertyPath="VIS_COLORINDEX"/>

					<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Series"/>

				</Record>

			</Collection>

		</PropertyValue>

		<PropertyValue Property="Dimensions">

			<Collection>

				<PropertyPath>OBJID_SHORT</PropertyPath>

				<PropertyPath>VIS_COLORINDEX</PropertyPath>

			</Collection>

		</PropertyValue>

	</Record>

</Annotation>

Finally, the result chart is displayed with colored columns:

As displayed in the example SAP is setting the Label information automatically when not adding further legend texts in the color palette section. This can be achived by adding following property:

{

	"dimensionValue": "0",

	"color": "sapUiChartPaletteSemanticNeutral",

	"legendText": "{{chart00.legend0}}"

}

The text is taken from the i18n file.

I hope this blog post was helpful and easy to follow. I look forward to receiving your comments  and feedback. If you feel you need more information on any of the topics covered here please also comment below.

[rohit_chaudhary1]

Hello Christoph,

Thanks a lot for sharing.
Regarding coloring in donut chart, it supports 2 types of coloring - Semantic and Stable.
For semantic coloring, the configuration you have used for columnStacked chart in the second example would work the same for donut chart as well. You will need to set bEnableStableColors to false or remove it from the card manifest settings.

For stable coloring, you can set bEnableStableColors flag true and define color palatte.
https://sapui5.hana.ondemand.com/1.71.41/#/topic/68e62adedfd44cd48cb6ebc418c8d95a

Regards,

Rohit

[szymon_glapiak]

Hi Christoph,

Great blog - it was really helpful for me.

Do You know why in the documentation is entered "

• 
  

  Enable stable coloring by setting the bEnableStableColoring property to true in card settings. "

  
  

For me working bEnableStableColors not bEnableStableColoring

I have also funny issue with colorPallete - it allowing me enter only 10 dimensionValue . If I entered more, system does not use my colors anymore for any value.

Regards

Szymon

[johannes_l]

Hi szymon.glapiak  ,

I'm trying to define colors for different dimensionValues but it does not work in the end.

As you described 10 dimensionValue works for you, so you are already one step further than me.

Can you please share your example ? I'm really interested in a working example for this problem.

Thank you.

Regards,

Johannes