Fiori Elements Chart with data label

[jaroslav_hrbacek]

Hi experts,

I have a CDS View with UI annotations. It should display a bar chart in a object page. It works fine:

Here is my CDS:

@AbapCatalog.viewEnhancementCategory: [#NONE]
@AccessControl.authorizationCheck: #NOT_REQUIRED


@EndUserText.label: 'Order operations values in line'
@ObjectModel.usageType:{
    serviceQuality: #X,
    sizeCategory: #S,
    dataClass: #MIXED
}


@UI.chart: [
  {
    title: 'Test Chart',
    chartType: #BAR_STACKED,

    dimensions: [
      'OrderInternalID'
    ],
    measures: [
      'Operation1', 'Operation2', 'Operation3', 'Operation4', 'Operation5', 'Operation6', 'Operation7', 'Operation8', 'Operation9', 'Operation10'
    ],
    measureAttributes: [{
      measure: 'Operation1',
      asDataPoint: true
     },
     {
      measure: 'Operation2',
      asDataPoint: true
     },
     {
      measure: 'Operation3',
      asDataPoint: true
     }
     ]
  }
]



define view entity ZI_OrderOperationsLine
  as select from ZI_OrderOperationsValues
{
      @EndUserText.label: 'OrderInternalID'
      @UI.lineItem: [{importance: #HIGH }]
      @UI.selectionField: [{element: 'OrderInternalID' }]
  key OrderInternalID,
      WorkQtyUnit,
      @Semantics.quantity.unitOfMeasure: 'WorkQtyUnit'
      @DefaultAggregation: #SUM
      @EndUserText.label: 'Jednicka'
      sum(Operation1)      as Operation1,
      max(OperationText1)  as OperationText1,
      @Semantics.quantity.unitOfMeasure: 'WorkQtyUnit'
      @DefaultAggregation: #SUM
      @EndUserText.label: 'Dvojka'
      sum(Operation2)      as Operation2,
      max(OperationText2)  as OperationText2,

      @Semantics.quantity.unitOfMeasure: 'WorkQtyUnit'
      @EndUserText.label: 'Trojka'
      @DefaultAggregation: #SUM
      @UI.lineItem: [{importance: #HIGH }]
      @UI.selectionField: [{element: 'Operation3' }]

      sum(Operation3)      as Operation3,
      max(OperationText3)  as OperationText3,
      @Semantics.quantity.unitOfMeasure: 'WorkQtyUnit'
      @DefaultAggregation: #SUM
      @EndUserText.quickInfo: 'ctyrka'
      sum(Operation4)      as Operation4,
      max(OperationText4)  as OperationText4,

The problem is there should by a label with description and value.

Something like this:

here is the data structure:

Can I achieve it with CDS annotations or is it impossible. If so is there a way with "free style" and vizFrame?

Thank you very much.

Jarda

[jaroslav_hrbacek · Accepted solution]

Hi,

I did. Just anyone need it, here is how to:

use page extention-> fragment-> vizFrame->plotArea->dataLabel-> render function.

Regards

Jarda

[jaroslav_hrbacek]

Hi Fares,

there is a lot of resources on how tro make a page extension wiht a fragment on the internet.

In the fragment I placed the frame with the chart.

The magic is done in the controller:

here is my controller extension for the label:

sap.ui.define(['sap/ui/core/mvc/ControllerExtension'], function (ControllerExtension) {
    'use strict';

    return ControllerExtension.extend('dashboardFE.dashboardfe.ext.controller.CurrentConfOPExt', {
        // this section allows to extend lifecycle hooks or hooks provided by Fiori elements
        override: {
            /**
             * Called when a controller is instantiated and its View controls (if available) are already created.
             * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
             * @memberOf dashboardFE.dashboardfe.ext.controller.CurrentConfOPExt
             */
            onInit: function () {
                // you can access the Fiori elements extensionAPI via this.base.getExtensionAPI
                const oVizFrame = this.getView().byId("dashboardFE.dashboardfe::CurrentConfirmationObjectPage--fe::CustomSubSection::RoutingsChart--idVizFrame");
                //https://sapui5.hana.ondemand.com/sdk/#/api/sap.viz.ui5.controls.common.feeds.FeedItem/methods/getUid
                
                oVizFrame.setVizProperties({
                    plotArea: {
                        dataLabel: {                            
                            visible: true,
                            renderer: function (oEvent) {

                                if (oEvent.info.value > 1 ){
                                    const context = oVizFrame.getBindingContext();
                                    let objectData = context.getObject();
                                    let sPath = context.getPath(); 
    
                                    let operationNr = oEvent.info.key.charAt(oEvent.info.key.length -1);
                                    let key = 'OperationText'+ operationNr;
                                    let text = objectData._OrderOperationRemianingLine[0][key];
                                    oEvent.text = `${text}: ${oEvent.info.value}Min`;
                                } else {
                                    oEvent.text = '';
                                }
                            }
                        }
                    },
                    legend: {visible: false},

                    valueAxis: { label:{visible: false}}
                    }
                );


            },

Regards

Jarda

[faresletaief]

thank you for your response, i used an approximative logique and it's worked

[faresletaief]

Hello Jaroslav,

Could you please provide detailled steps how did you acheive this please ?