Adding KPI field to a Fiori Elemetns card header

Fiori Elements is a very convenient tool to generate simple UIs without lots of effort. If the goal is a basic UI to display data this tool can generate it automatically based on so-called Annotations.

In many cases we need only simple functions, and you should implement them time-to time just for different data sets. This time can be saved with the tool. See further details about the technology here.

Fiori Elements offers a tool called Overview Page to create dashboards, overview about business processes. The Overview Page contains cards to display set of data. One type of card is Analytical card.

In the previous blog post you can see how can you create an analytical card.

Several card types can display a KPI data in the header. Configuration of this KPI data is well documented on Fiori Elements side, jut see this article.

The other side of the picture is the data, which should be displayed. The format of the data (which should be provided by the OData Services) is not clearly discussed.

The problem

The problem is that we don’t know how to select the data from the list which is sent by the OData Service.

Let’s see this CDS View, which provides data for the UI via OData Service:

define view Z_ATTRIBUTE_COUNT as select from attributes as attr 
{
  key datatype,
  count ( distinct attr ) as attr_count
}
group by datatype

(The example is real, just the names were changed)

This will provide a similar result:

What I want to display in the KPI field is the summarized data: 2494.

Solutions which has not worked

I’m adding this section here for those who are trying similar solutions and this way they might find my blog post and the solution.

1) Adding the data as extra row

It was easy to summarize this data on the CDS View Side, and add it to the lust with an “union” command. The problem was the following: This data also appeared on the analytical card as value, and the selection of this row was not possible.

2) Adding the data as an extra entity set.

The idea was to create a separate CDS view for the summarized value and merge it with the original CDS View on the OData Service level.

define view Z_ATTRIBUTE_COUNT_SUM as select from attributes as attr
 {
  key count (distinct attr) as attr_count
}

This solution has failed, because the data were presented in different Entity Sets. And the Cards can handle only one Entity Set, which is configured in the file manifest.json.

The trick

The trick is that the data should be sent attached to every record which is displayed in the card.

After modifying the original CDS View the value from the View Z_ATTRIBUTE_COUNT_SUM can be merged to every row.

define view Z_ATTRIBUTE_COUNT as select from attributes as attr 
left outer join Z_ATTRIBUTE_COUNT_SUM as total on attr.datatype = attr.datatype {
  key datatype,
  count ( distinct attr ) as attr_count,
  total.attr_count as total
}
group by datatype, attr_count

Please note the join condition, which is always true, so the value from he ‘total’ table will be always added to the records.

This change results the following data set:

Configoration on the Fiori Elements side

Let’s see what you can do on the Fiori Elements side to display the data.

The card definition in the manifest.json looks like this:

"card03": {
	"model": "Z_ATTRIBUTE_COUNT",
	"template": "sap.ovp.cards.charts.analytical",
	"settings": {
		"title": "{{card03_title}}",
		"entitySet": "Z_ATTRIBUTE_COUNT",
		"presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant#Simple",
		"chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart",
		"dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#total_count",
		"navigation": "dataPointNav"
	}
},

The key here is the property “dataPointAnnotationPath“. This will contain the name of the variable (total in our case), which will be set as KPI. Since this variable is the dame in every record, the order of the records is not significant.

I’ve used annotations on the project side, not in the CDS View in this case. The following section contains the annotations relevant for us:

<Annotation Term="UI.Chart">
	<Record Type="UI.ChartDefinitionType">
		<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Bar"/>
		<PropertyValue Property="Title" String="{@i18n&gt;ATTRIBUTES_4}"/>
		<PropertyValue Property="MeasureAttributes">
			<Collection>
				<Record Type="UI.ChartMeasureAttributeType">
					<PropertyValue Property="Measure" PropertyPath="attr_count"/>
					<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>
				</Record>
			</Collection>
		</PropertyValue>
		<PropertyValue Property="DimensionAttributes">
			<Collection>
				<Record Type="UI.ChartDimensionAttributeType">
					<PropertyValue Property="Dimension" PropertyPath="datatype"/>
					<PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Series"/>
				</Record>
			</Collection>
		</PropertyValue>
	</Record>
</Annotation>
<Annotation Term="UI.DataPoint" Qualifier="total_count">
	<Record>
		<PropertyValue Property="Value" Path="total"/>
		<PropertyValue Property="Title" String="Number of Object Types"/>
		<PropertyValue Property="MinimumValue" Decimal="0"/>
		<PropertyValue Property="MaximumValue" Decimal="4000"/>
		<PropertyValue Property="ValueFormat">
			<Record>
				<PropertyValue Property="NumberOfFractionalDigits" Int="2"/>
			</Record>
		</PropertyValue>
	</Record>
</Annotation>

The ChartDefinitionType defines the axis’ of the chart as we saw it in the previous blog post.

With the UI.DataPoint annotation, which was named as “total_count” we selected the “total” value of the record (which consist of datatype, attr_count and total as we saw before). Here is the place what we configured in the manifest.json with the property “dataPointAnnotationPath“.

Conclusion

If you open eh application you can see a similar card in the browser:

The document about the KPI field configuration contains much more possible data what you can display. Trends, target, deviation etc. You can provide he data required for those with the same methodology.