Check how to add a chart in Object page of Fiori Elements List Report.
If you haven’t already then I would recommend you read my last blog CDS-Fiori Elements – Object Page Facets.
To start with, I already have Fiori Elements List Report app working based on below CDS Views. Again, if you like to know how I got to this point please my blog CDS-Fiori Elements – Object Page Facets.
Material Plant (ZI_MaterialPlantPK)
Consumption View (ZC_MaterialPK) with Annotation
Object page with header facet, identification facet, field group facets and line item reference facet is looking like below.
To append a facet with a chart, displaying Material stock at Plant and Storage location level we need following
- CDS View (ZI_MaterialStock) with Material stock by Plant and Storage Location. This CDS view also needs to have chart defined using annotation @UI.Chart with details like what kind of chart it will render, dimension field and measure field.
- One-to-many association defined in CDS ZC_MaterialPK to CDS view (ZI_MaterialStock).
- Object page Facet to host Chart.
1. CDS View – ZI_MaterialStock with @UI.Chart
CDS View ZI_MaterialStock provides Material stock by Plant and Storage Location. It also defines annotation to render this information in a column chart.
@AbapCatalog.sqlViewName: 'ZIMATSTK'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Material Stock'
@UI.chart: [{
title: 'Stock by Plant and St Location',
description: 'Stock by Plant' ,
chartType: #COLUMN,
dimensions: ['Plant', 'StorageLocation'],
measures: ['UnrestrictedStock']
}]
define view ZI_MaterialStock
as select from I_MaterialUnrestrictedUseStock
{
key Material,
@ObjectModel.text.element: ['PlantName']
key Plant,
@ObjectModel.text.element: ['StorageLocationName']
key StorageLocation,
@Semantics.unitOfMeasure: true
key MaterialBaseUnit,
@Semantics.quantity.unitOfMeasure: 'MaterialBaseUnit'
@DefaultAggregation: #SUM
MatlWrhsStkQtyInMatlBaseUnit as UnrestrictedStock,
@Semantics.text: true
_Plant.PlantName,
@Semantics.text: true
_StorageLocation.StorageLocationName
}
2. Association
Define association to ZI_MaterialStock in CDS View ZC_MaterialPK and expose this association.
define view ZC_MaterialPK
as select from ZI_MaterialPK
association [0..*] to ZI_MaterialStock as _MaterialStock
on $projection.Material = _MaterialStock.Material
{
..
..
_MaterialStock
}
3. Facet: #CHART_REFERENCE
Finally, we need to place a Facet in Object page of type #CHART_REFERENCE with targetElement property pointing to exposed association _MaterialStock.
{ id : 'idChart' ,
type: #CHART_REFERENCE ,
label : 'Chart',
targetElement: '_MaterialStock',
position: 30 }
Final Version of CDS View ZC_MaterialPK
@AbapCatalog.sqlViewName: 'ZCMATPK'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'Material Stock'
@VDM.viewType: #CONSUMPTION
@UI.headerInfo: { typeName: 'Material' ,
typeNamePlural: 'Materials' ,
title: { type: #STANDARD , value: 'Material'} ,
description: { type: #STANDARD, value: 'MaterialName' } }
@OData.publish: true
define view ZC_MaterialPK
as select from ZI_MaterialPK
association [0..*] to ZI_MaterialStock as _MaterialStock
on $projection.Material = _MaterialStock.Material
{
@UI.facet: [
{ id: 'idWeight' ,
purpose: #HEADER,
label: 'Weight' ,
type: #FIELDGROUP_REFERENCE,
targetQualifier: 'hdWeight'} ,
{ id:'idGeneralInformation' ,
type: #COLLECTION ,
label: 'General Information' ,
position: 10 } ,
{ type: #IDENTIFICATION_REFERENCE ,
label : 'General Information',
parentId: 'idGeneralInformation',
id: 'idIdentification' ,
position: 10 },
{ type: #FIELDGROUP_REFERENCE ,
label : 'Last Changed',
targetQualifier: 'fgLastChanged' ,
parentId: 'idGeneralInformation' ,
id : 'idGroupLastChanged' ,
position: 20 },
{ id: 'idLineItemMatPlant' ,
type : #LINEITEM_REFERENCE ,
label : 'Plant Data' ,
position: 20 ,
targetElement: '_MaterialPlant'} ,
{ id : 'idChart' ,
type: #CHART_REFERENCE ,
label : 'Chart',
targetElement: '_MaterialStock',
position: 30 }
]
@UI.selectionField: [{ position: 10 }]
@UI.lineItem: [{ position: 10 }]
@UI.identification: [{ position: 10 }]
@ObjectModel.text.element: ['MaterialName']
key Material,
@UI.selectionField: [{ position: 20 }]
@UI.lineItem: [{ position: 20 }]
@UI.identification: [{ position: 20 }]
@ObjectModel.text.element: ['MaterialTypeName']
MaterialType,
@UI.selectionField: [{ position: 30 }]
@UI.lineItem: [{ position: 30 }]
@UI.identification: [{ position: 30 }]
@ObjectModel.text.element: ['MaterialGroupName']
MaterialGroup,
@UI.fieldGroup: [{ qualifier: 'hdWeight' , position: 10 }]
@Semantics.quantity.unitOfMeasure: 'MaterialWeightUnit'
MaterialGrossWeight,
@UI.fieldGroup: [{ qualifier: 'hdWeight' , position: 20 }]
@Semantics.quantity.unitOfMeasure: 'MaterialWeightUnit'
MaterialNetWeight,
@Semantics.unitOfMeasure: true
MaterialWeightUnit,
@UI.fieldGroup: [{ qualifier: 'fgLastChanged' , position: 10 }]
LastChangedby,
@UI.fieldGroup: [{ qualifier: 'fgLastChanged' , position: 20 }]
LastChangedOn,
MaterialTypeName,
MaterialGroupName,
MaterialName,
_MaterialPlant,
_MaterialStock
}
You can see below in screenshot how this chart is rendered on Object page.
Hi Pawan – I am trying to display total seats per plane type ( field snumber in table SCARPLAN ) as a measure, but for some reason the measure is displayed in intervals of 0.2,04 …1. and there are no vertical bars. Can you pls advise what can be the issue?
Hi Pawan, If I try your code 1:1 the chart is not being displayed. I recieve following error :
ApplySupported is not added to the annotations – Error: ApplySupported is not added to the annotations
Error: ApplySupported is not added to the annotations
Can you help me?
Thanks