Formatting values as hours (HH:MM) in an OVP Card

[danielle_cm]

Hello,

I created an Overview Page with several Cards and I need some of them to show the value in the HH:MM time format (both in the axis label and in the tooltip).

I can do this using a Custom Card, inserting a custom formatter in the ChartFormatter (although this causes some side effects in the standard Cards).

However, I would like to know if it is possible to display like HH:MM in a standard Card itself, via annotations or some logic in extension controller.

This is my analytical Card:

This is how I'd like to display it:

My card annotations:

<Annotation Term="UI.Chart" Qualifier="ChartOvertimePayment">
                    <Record Type="UI.ChartDefinitionType">
                        <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Column"/>
                        <PropertyValue Property="Title" String=" "/>
                        <PropertyValue Property="Dimensions">
                            <Collection>
                                <PropertyPath>Timetype</PropertyPath>
                            </Collection>
                        </PropertyValue>
                        <PropertyValue Property="DimensionAttributes">
                            <Collection>
                                <Record Type="UI.ChartDimensionAttributeType">
                                    <PropertyValue Property="Dimension" PropertyPath="Description"/>
                                    <PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category"/>
                                </Record>
                            </Collection>
                        </PropertyValue>
                        <PropertyValue Property="Measures">
                            <Collection>
                                <PropertyPath>Description</PropertyPath>
                            </Collection>
                        </PropertyValue>
                        <PropertyValue Property="MeasureAttributes">
                            <Collection>
                                <Record Type="UI.ChartMeasureAttributeType">
                                    <PropertyValue Property="Measure" PropertyPath="Total"/>
                                    <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1"/>
                                    <PropertyValue Property="DataPoint" AnnotationPath="@UI.DataPoint#QualifierOvertimePaymentTotal"/>
                                </Record>
                            </Collection>
                        </PropertyValue>
                    </Record>
                </Annotation>
                <Annotation Term="UI.DataPoint" Qualifier="QualifierOvertimePaymentTotal">
                    <Record Type="UI.DataPointType">
                        <PropertyValue Property="Value" Path="Total" />
                        <PropertyValue Property="ValueFormat" >
                            <Record>
                                <PropertyValue Property="NumberOfFractionalDigits" Int="2" />
                             </Record >
                        </PropertyValue>
                    </Record>
                 </Annotation>
                 <Annotation Term="UI.DataPoint" Qualifier="QualifierOvertimePaymentKPI">
                    <Record Type="UI.DataPointType">
                        <PropertyValue Property="Value" Path="Total" />
                        <PropertyValue Property="Criticality" EnumMember="UI.CriticalityType/Critical" />
                        <PropertyValue Property="ValueFormat" >
                            <Record>
                                <PropertyValue Property="NumberOfFractionalDigits" Int="2" />
                             </Record >
                        </PropertyValue>
                    </Record>
                </Annotation>

My manifest.json:

"card04": {
        "template": "sap.ovp.cards.charts.analytical",
        "model": "mainModel",
        "settings": {
          "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#ChartOvertimePayment",
          "dataPointAnnotationPath": "com.sap.vocabularies.UI.v1.DataPoint#QualifierOvertimePaymentKPI",
          "entitySet": "OvertimePaymentSet",
          "title": "{{titOvertimePayment}}"
        }
      }