[SAP] CDS Part 18 – Bar Chart & Donut Chart using CDS Views

Goal 1 – Create SAP Fiori Bar Chart using CDS and without any HTML/JS Coding.

There are 6 parts to be done.

1. Create CDS View
2. Expose CDS View as OData
3. Generate/Activate the OData Service
4. Apply the UI Annotations to the CDS View
5. Create the Fiori App in Web IDE
6. Add Cards in the Fiori App

Step 1 – Create CDS View and fetch data from the database table.

@AbapCatalog.sqlViewName: ‘ZTM_FNS_SQL’
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: ‘CDS View to for Fiori App’

// CDS View for List Report (Bar Chart).
define view ZTM_FNS
  as select from t001k
{
  key bukrs    as com_code,
  key count(*) as tot_plants
}
group by
  bukrs

Step 2 – Expose the CDS View as OData

@OData.publish: true

Step 3 – Activate the OData in SAP Backend using t-code /N/IWFND/MAINT_SERVICE

Hit Add Service

Give the System Alias, Technical Service Name and hit Get Services.

Once you have the service in the list below, shown by green arrow. Double click on it, choose the default DPC and MPC classes and activate and save it in a transport (or $tmp).
Once it is activated, the OData will be listed in the Service Catalog in t-code /N/IWFND/MAINT_SERVICE.

Your OData Service name will be the CDS name followed by _CDS.

Click on SAP Gateway Client and test the OData

Initial test status code is 200, which means it is good.
Let us test the Entity Set using URI –  /sap/opu/odata/sap/ZTM_FNS_CDS/ZTM_FNS

Add ?$format=json to show better output in JSON.

So, we can conclude, the OData works fine.
If you are not familiar with SAP OData Concepts, please take the Tutorial Series and Free Video Course on SAP OData Services.

Read – OData and SAP Netweaver Gateway Tutorial Series

Watch – Free Video Training on SAP OData Services

Step 4 – Apply the UI Annotations to the CDS View

@UI.lineItem is generously used.

@UI.lineItem: [{ position: 10, label: ‘Company Code ‘}]

Position is determined in the multiple of 10s. Example 10, 20, 30 etc, 10 being the first position.
If we use one CDS View to build 2 Cards (two different charts, ex bar chart and donut chart in the same page), then we need Qualifier. It helps the Fiori to identify the Cards. One for Bar Chart and another for Donut Chart. Qualifier helps the UI to differentiate the Cards.
The UI Annotation is enhanced with the Qualifier ‘Q1’. It can be any name. You can also name your Qualifier as ‘SAPYard’. 😊

@UI.lineItem: [{ position: 10, label: ‘Company Code’, qualifier: ‘Q1’}]

TOT_PLANTS in our CDS View is a measure. The measures (numbers) are indicated in UI.lineItem type #AS_DATAPOINT.
Now, let us enhance the UI annotation for TOT_PLANTS field.

@UI.lineItem: [{ position: 20, label: ‘Total Plants in CC’, qualifier: ‘Q1’, type: #AS_DATAPOINT } ]

When you specify a field as DATAPOINT, you need to specify the UI.dataPoint Properties before the #AS_DATAPOINT type is mentioned.
      @UI.dataPoint:
{
      title: ‘Number of Plants in CC’,
      criticalityCalculation: {
             improvementDirection: #TARGET,
             toleranceRangeLowValue: 8,
             deviationRangeHighValue: 10
                               }
       }
The CriticalityCalculation helps in coloring the bar. With the above values, if the toleranceRangeLowValue is 8 to 10, then Green. If deviationRangeHighValue is 10 or more, it will be Red. If it is below 8, it will be Yellow.
The CDS should look like this now.

Note: When we write the UI Annotations in CDS Views, it generates the Annotation file behind the scene which will be used by Fiori App. The Annotation file has the suffix _VAN. (We will see its usage in the next part below)

If your CDS View name is ZMATMAS, then you OData Service will be ZMATMAS_CDS and you Annotation file will be ZMATMAS_CDS_VAN. Hope this is clear. 😊

Also Read – Step by Step SAPUI5 Tutorials

Step 5 – Create Fiori App in WebIDE

We will select the Category as SAP Fiori Element and template as Overview Page. Do see the preview of overview page on the right.

Give the Project Name, Namespace and Title.

Choose your SAP backend system and give userid and password.

Choose the OData we created in the above steps and hit Next.

Select the Annotation File,

Give Alias and other information and hit Finish.

New Project is created.

Let us test it. Yes, that’s it. Your Fiori App is ready. No coding needed. Told youuu.. 🙂

Give the backend userid and password. Check below, there is no output shown. Why?

Because, we have not added the Card yet. That is our last step.

Also Read – Step by Step ABAP on HANA Tutorials

Step 6 – Add Card in Fiori App

Right Click on Project -> New – Card

Since we want to show the Bar Chart, it is nothing but the List Card. So, Select the List card and proceed forward.

By default, the Qualifier ‘Q1’ should be there in the Annotation Path. If not, manually add it after #.

Very important step is to specify qualifier in the Annotation Path (LineItem) using #‘qualifierName’.
Selection Variant is for Selection Screen.
PresentationVariant is for initial default presentation.
DataPoint is for Measures (number). We will use these properties in next exercise.
In the Card Properties, we need to select Add OData Select. It will enable the OData URI options like $select, $top etc.
List Type = Extended or Condensed
List Flavor = Bar
Sort By = com_code
Sort Order = Ascending
Hit next.

Finish.

When we save it, the Card properties are added in the Manifest file. We could also directly add the code manually in the Manifest file for all the properties we selected in the above wizard steps. But, we believe in more automation and less coding. And for this tutorial, we pledge for zero coding in Fiori. 😊

Now test the app again. This time the Bar Chart is displayed successfully.

The above output shows Company Code in ascending order. If you want to sort by Total Plant counts in descending order then we can go to the Manifest file and change the sorting by tot_plants and in descending order.

Check the output now. It is displayed in descending order of the total plants count in the company code.

Why is 11 Red and 8 Green?
Because we defined the criticalityCalculation in our CDS View. Just check the code again. You can play around with the numbers and get your colors.

Congrats, you just create a Bar Chart App with no JS, HTML or CSS coding.

Also Read – Virtual Data Model – Embedded Analytics

Now, let us add a Donut Chart at the right on the same SAP Fiori App.

Goal 2 – Create SAP Fiori Donut Chart using CDS and without any HTML/JS Coding.

For this exercise also, we need to perform the same 6 steps.

1. Create CDS View
2. Expose CDS View as OData
3. Generate/Activate the OData Service
4. Apply the UI Annotations to the CDS View
5. Create the Fiori App in Web IDE
6. Add Cards in the Fiori App

Since we want to show the bar chart and donut chart on the same layout, therefore we will use the same CDS to achieve it.

Step 1 – Update the CDS View which was created above.

For Charts, the UI Annotation has to be at the Top level. We can have multiple charts in the same UI. They must be identified/differentiated using Qualifiers.

// Donut Chart Annotation
@UI.chart: [{
      qualifier: ‘Q2’,
      title: ‘Plant Count’,
      chartType: #DONUT,
      dimensions: [‘com_code’],
      measures: [‘tot_plants’],
      dimensionAttributes: [{ dimension: ‘com_code’, role: #CATEGORY }],
      measureAttributes: [{ measure: ‘tot_plants’, role: #AXIS_1, asDataPoint: true }]
      }]

We need to specify the chartType (barchart, waterfall, piechart, donut etc), dimensions, dimension attributes, measures and measure attributes.
For Dimension Attributes the role can be Category or Series.

For Measure Attributes, the role can be Axis 1, 2 or 3.

As mentioned in earlier exercise, measure (number) should be notified as DataPoint in UI.

measureAttributes: [{ measure: ‘tot_plants’, role: #AXIS_1, asDataPoint: true }]

Note: When we create bar charts, we need to specify X axis and Y axis. But when we create donut charts, we need to specify the dimensions and measures.
This is how the CDS will look now.

We do not need to perform steps 2 to 5. It is already there.
The only step left is to add the new Card to the Fiori App.

Watch – Free Video Course on New Syntax and Features in ABAP 7.4

6. Add New Card for Donut Chart in the Fiori App

We will do the same thing. Right Click -> New –> Card.

Since we want to show donut chart, choose the Analytic Card.

Give the OData name as datasource.

Ideally the Annotation Path should show in the drop down. But for our case it is not showing (not sure what the issue is – guessing the _VAN file needs to be reassigned as we added new annotations).

We saw in our earlier exercise that the wizard adds some lines in the manifest file. Since the Annotation path is not coming automatically, we will add the lines directly/manually to the manifest file.
Cancel the wizard and open the manifest file in code editor.

Add the below lines of code. Make sure to change your Qualifier, if it is different. For our example the second qualifier is Q2.

“card01”: {
“model”: “ZTM_FNS_CDS”,
“template”: “sap.ovp.cards.charts.analytical”,
“settings”: {
“title”: “{{card01_title}}”,
“subTitle”: “{{card01_subTitle}}”,
“entitySet”: “ZTM_FNS”,
“chartAnnotationPath”: “com.sap.vocabularies.UI.v1.Chart#Q2”,
“dataPointAnnotationPath”: “com.sap.vocabularies.UI.v1.DataPoint#Q2”,
“identificationAnnotationPath”: “com.sap.vocabularies.UI.v1.Identification#Q2”,
“navigation”: “dataPointNav”
}
}

Let us test it now.

Also Check – S/4HANA Technical Overview for Beginners

The card title and sub title descriptions are not correct. Reason being we did not add the values in i18n.

Go to i18n and add it.

Test again. This time it works perfectly.

We can add more Cards to the UI. The steps to add card is the same. If the wizard does not work, just add the new card details directly in the manifest file.