Fiori Elements: OVP Donut’s card

In that post, I will exclusively discuss about how to show up a donut graph in a card. Because the Dunot graph is useful and interesting when we want to visualize important data, I wanted to explain to the community how to do it.

How to create a Dunot card?

Let’s start by explaining some terminology:

• Measure: this is the numerical data which is show as a pice of donut
• Dimension : is the legend or the description of the business data

For the dunot graph, we will have to use only one measure and one dimension.

Manifest.json

The minum settings to make the dunot graph working is the following :

"com.myCompany.sd.dt.summary_card01": {
        "model": "ZMY_MODEL",
        "template": "sap.ovp.cards.charts.analytical",
        "settings": {
            "title": "{{com.myCompany.sd.dt.summary_card01_title}}",
            "subTitle": "{{com.myCompany.sd.dt.summary_card01_subTitle}}",
            "entitySet": "MYEntitySet",
            "chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart#MyQualifierStat"
         }
}

Annotation.xml

I will not explain how to create an annotation file for Overview Page thus what we have to do is adding the UI.Chart annotation. You should position your annotation into the MYEntitySet :

<Annotations Target="ZMYModel.MYEntitySet">
    <Annotation Term="UI.Chart" Qualifier="MyQualifier">
        <Record Type="UI.ChartDefinitionType">
            <PropertyValue Property="ChartType" EnumMember="UI.ChartType/Donut" />
            <PropertyValue Property="MeasureAttributes">
                <Collection>
                    <Record Type="UI.ChartMeasureAttributeType">
                        <PropertyValue Property="Measure" PropertyPath="Measure" />
                        <PropertyValue Property="Role" EnumMember="UI.ChartMeasureRoleType/Axis1" />
                    </Record>
                </Collection>
            </PropertyValue>
            <PropertyValue Property="DimensionAttributes">
                <Collection>
                    <Record Type="UI.ChartDimensionAttributeType">
                        <PropertyValue Property="Dimension" PropertyPath="Dimension1" />
                        <PropertyValue Property="Role" EnumMember="UI.ChartDimensionRoleType/Category" />
                    </Record>
                </Collection>
            </PropertyValue>
            <PropertyValue Property="Measures">
                <Collection>
                    <PropertyPath />
                </Collection>
            </PropertyValue>
            <PropertyValue Property="Actions" />
            <PropertyValue Property="Title" String="My Donut Chart" />
            <PropertyValue Property="Dimensions">
                <Collection>
                    <PropertyPath />
                </Collection>
            </PropertyValue>
        </Record>
    </Annotation>
</Annotations>

The data

For this example here is the data I have generated :

{
  "d": {
    "results": [
      {
        "Vbeln": "1234",
        "Measure": "1E1",
        "Dimension1": "Demo 1",
        "Dimension2": "1E1"
      },
      {
        "Vbeln": "1235",
        "Measure": "2E1",
        "Dimension1": "Demo 2",
        "Dimension2": "2E1"
      },
      {
        "Vbeln": "1236",
        "Measure": "3E1",
        "Dimension1": "Demo 3",
        "Dimension2": "3E1"
      }
    ]
  }
}

The result

Enjoy