Skip to Content
Technical Articles
Author's profile photo Pawan Kesari

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.

Assigned Tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Simon Rotherham
      Simon Rotherham

      Nice blog Pawan

      Author's profile photo Nabheet Madan
      Nabheet Madan

      Thanks Pawan for the blog. Nice!

      Author's profile photo Michelle Crapo
      Michelle Crapo

      I like it.  Pictures and code examples – and yes I’ve bookmarked this one too.

      Author's profile photo Jocelyn Dart
      Jocelyn Dart

      Nice blog and very clearly explained. Thanks - I've added it to the Fiori elements wiki.

      Author's profile photo Timothy Muchena
      Timothy Muchena

      Great stuff...just wish i could locate ZI_MaterialPlantStock 🙂

      Author's profile photo Pawan Kesari
      Pawan Kesari
      Blog Post Author

      try this git url

      Author's profile photo Timothy Muchena
      Timothy Muchena

      Thank you

      Author's profile photo Aashwin Jain
      Aashwin Jain

      Great Blog Pawan.

      I just tried the same and got the micro chart (Bullet or Donut) chart in the List report line item. Thanks a lot for this.

       

      But there was an issue when I try to add more than one chart for two different columns, in UI I get an error for multiple element created with same ID. I have used qualifiers for both the charts, but I am not so sure how does this not work. Can you please help me out here.

      Author's profile photo Pawan Kesari
      Pawan Kesari
      Blog Post Author

      I think, you can have multiple charts defined in CDS/metadata extension with qualifiers

      @UI.chart: [{
      qualifier: 'ChartBullet' ,
      chartType: #BULLET ,
      measures: ['CurrentStock'],

      when you use it on field level for example in @UI.lineItem, then you specify which chart definition you are referring to using valueQualifier

      @UI.lineItem: [{ position: 40 , type: #AS_CHART , 
                       valueQualifier: 'ChartBullet' , 
                       label: 'Current Stock Level' }]
      @UI.dataPoint: { title: 'Unrestricted Stock' ,
                       targetValueElement: 'ReOrderPoint' ,
                       minimumValue: 0 ,
                       maximumValue: 2500 }
      CurrentStock;
      Author's profile photo Shrikant Kulkarni
      Shrikant Kulkarni

      Very well explained Pavan. The code snippets and visualization are very good. Thank you . Do you have any example for Stacked bar micro chart rendered in List report line item using CDS annotations ? This would be very helpful.

      Author's profile photo Pawan Kesari
      Pawan Kesari
      Blog Post Author

      check out this blog - Fiori Elements – Stacked Bar Micro Chart in List Report

      Author's profile photo Ayman Elgendy
      Ayman Elgendy

      nice blog pavan,

      I've a question. I did a bullet chart but data in chart is rounded. how I can stop this rounding ?

      for example, a value with 1050 is displayed as 1k

      Author's profile photo iMRO DEV TEAM
      iMRO DEV TEAM

      Hi Pawan Kesari  ,

      Very well explained ..

      We have a similar requirement of adding a radial micro chart in the list report .

      I have added the @UI.chart  and @UI.datapoint annotation in my CDS but still this isn't working for me. Although this requirement is we have achieved when annotation is done in UX

      PFB code snippet .

      UI.datapoint

       

      UI.datapoint

       

      UI.chart

      UI.chart

       

      Few questions :

      1. I am checking in application preview , should the chart be available in preview ?
      2. Do we explicitly have to do anything in UX for radial chart ?

      Thanks,

      Arushi