Fiori Elements – Bullet Micro Chart in List Report

Introduction

In this blog, I’ll explain Micro Bullet chart’s feature and how to use it in List Report using CDS annotations. I have added screen shot from annotation modeler and respective xml code in case you are using one of these approach.

The bullet chart features a single, primary measure. It compares that measure to one or more other measures to enrich its meaning (for example, compared to a target), and displays it in the context of qualitative ranges of performance, such as poor, satisfactory, and good.

Bullet chart is placed horizontally, like a progress bar, and this fits the bill to put is in the list report. Unlike progress bar which tracks current values with respect to fixed maximum, bullet chart tracks current value with a small number of other values.

As with other micro charts, bullet micro chart is fully responsive.

Use Case

In this example, Unrestricted stock for Materials in Plant is tracked against a predefined value called Reorder Point. Reorder point in SAP (without getting into picture-perfect definition) is stock below which Material needs to be replenished. To visually highlight where attention is required semantic colours are used.

With the use of bullet chart Unrestricted Stock is not only tracked against Reorder Point but also relative to the Threshold value which is 1.5 times Reorder point. This threshold value defined is used to highlight that stock is near Reorder point and also allow us to change semantic colour to yellow. In this particular use case, green means stock is more than this threshold value.

Adding Micro Bullet Chart

In CDS view ZI_MaterialReOrder, we have three fields ReOrderPoint, UnresforDisplay and WarningThresHold which we will use.

define view ZI_MaterialReOrder
  as select from marc
...
  association [0..1] to ZI_MaterialPlantStock      as _MaterialPlantStock  
            on  $projection.Material = _MaterialPlantStock.Material and 
                $projection.Plant    = _MaterialPlantStock.Plant
{
key marc.werks                           as Plant,
key marc.matnr                           as Material,
…
marc.minbe                               as ReOrderPoint,
MaterialPlantStock.UnrestricedStock      as UnresforDisplay,
cast( marc.minbe as abap.fltp) * 1.5     as WarningThresHold,
…
}

Define bullet chart using @UI.chart annotation on the entity, followed by @UI.datapoint annotation at field level of the entity. Also note that in @UI.lineitem field is defined as type #AS_CHART.

@UI.chart: [{ 
              chartType:         #BULLET ,
              measures:          ['UnresforDisplay'],
              measureAttributes: [{ 
                    measure:     'UnresforDisplay' , 
                    role:        #AXIS_1 , 
                    asDataPoint: true 
                    }]
              }]
annotate view ZI_MaterialReOrder with
{
…
@UI:{ lineItem: [{ position: 100 , 
                   type: #AS_CHART, 
                   label: 'Stock Level'   }]  
    }
@UI.dataPoint: { title: 'Unrestricted Stock' ,
                   targetValueElement: 'ReOrderPoint' ,
                   minimumValue: 0 ,
                   maximumValue: 2500 
                 }
  UnresforDisplay;
}

With above annotations, you would get the bullet chart in the list, but without semantic colours.

Semantic Colour

Here you have two options:

Option 1: Using @UI.dataPoint.criticality

Define a field (lets call it CriticalValue ) with critically value 0,1,2 and 3 based on Unrestricted Stock with respect to Reorder Point and ThresHold and then use this fields as

 @UI.dataPoint: { title: 'Unrestricted Stock' ,
                   targetValueElement: 'ReOrderPoint' ,
                   minimumValue: 0 ,
                   maximumValue: 2500 ,
                   criticality: ‘CriticalValue’
                 }
UnresforDisplay;​

More on this is covered in blog Fiori elements – Status Icons and Semantic Colors

Option 2: Using Trend-Criticality Calculation

@UI.dataPoint.criticalityCalculation annotation is used to define rules for criticality. This calculation is based on three different scenarios defined by annotation @UI.dataPoint.criticalityCalculation.improvementDirection. (More on this topic in blog Create KPIs with data points and criticality calculation in a SAP Fiori Overview Page ). In this use case, #MAXIMIZE scenario is applicable and relevant values are described in below picture.

with this option @UI.dataPoint annotation will look like

  @UI.dataPoint: { title: 'Unrestricted Stock' ,
                   targetValueElement: 'ReOrderPoint' ,
                   minimumValue: 0 ,
                   maximumValue: 2500 ,
                   criticalityCalculation: { 
                        improvementDirection:  #MAXIMIZE ,
                        deviationRangeLowValueElement: 'ReOrderPoint' ,
                        toleranceRangeLowValueElement: 'WarningThresHold'
                      }
                  }
  UnresforDisplay;

This should provide you with semantic colours in bullet chart and an indicator showing ThresHold level.

Below is annotation from modeler and its XML code

Annotation Modeler

XML

<Annotations Target="ZMATREORDER_SRV_01.ZI_MaterialReOrderType">
	<Annotation Term="UI.LineItem">
		<Collection>
                        ...
			<Record Type="UI.DataFieldForAnnotation">
				<PropertyValue Property="Label" String="Stock Level"/>
				<PropertyValue Property="Target" AnnotationPath="@UI.Chart"/>
			</Record>
		</Collection>
	</Annotation>
	<Annotation Term="UI.DataPoint" Qualifier="UnresforDisplay">
		<Record Type="UI.DataPointType">
			<PropertyValue Property="Value" Path="UnresforDisplay"/>
			<PropertyValue Property="Title" String="Unrestricted Stock"/>
			<PropertyValue Property="TargetValue" Path="ReOrderPoint"/>
			<PropertyValue Property="MinimumValue" Decimal="0"/>
			<PropertyValue Property="MaximumValue" Decimal="2500"/>
			<PropertyValue Property="CriticalityCalculation">
				<Record Type="UI.CriticalityCalculationType">
					<PropertyValue Property="ImprovementDirection" EnumMember="UI.ImprovementDirectionType/Maximize"/>
					<PropertyValue Property="DeviationRangeLowValue" Path="ReOrderPoint"/>
					<PropertyValue Property="ToleranceRangeLowValue" Path="WarningThresHold"/>
				</Record>
			</PropertyValue>
		</Record>
	</Annotation>
	<Annotation Term="UI.Chart">
		<Record Type="UI.ChartDefinitionType">
			<PropertyValue Property="Title" String="Bullet title"/>
			<PropertyValue Property="Description" String="Description"/>
			<PropertyValue Property="ChartType" EnumMember="UI.ChartType/Bullet"/>
			<PropertyValue Property="Measures">
				<Collection>
					<PropertyPath>UnresforDisplay</PropertyPath>
				</Collection>
			</PropertyValue>
			<PropertyValue Property="MeasureAttributes">
				<Collection>
					<Record Type="UI.ChartMeasureAttributeType">
						<PropertyValue Property="Measure" PropertyPath="UnresforDisplay"/>
						<PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>
						<PropertyValue Property="DataPoint" AnnotationPath="@UI.DataPoint#UnresforDisplay"/>
					</Record>
				</Collection>
			</PropertyValue>
		</Record>
	</Annotation>
</Annotations>

Conclusion

Micro Bullet Chart is very information rich visualisation. You will have to use annotations @UI.lineitems, @UI.datapoint and @UI.chart to display Micro Bullet chart in the list report.