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.