SAP Fiori Elements Overview Page – Multiple cards based on multiple CDS views

Hello All,

The purpose of this blog is to develop a single overview page based on multiple CDS view. At the end of this blog, we will be able to develop a Overview page with cards based on multiple CDS views.

There are 5 steps to be done :

1. Create CDS Views
2. Expose CDS View as OData
3. Activate the OData Service
4. Create App in WebIDE
5. Add cards to the Fiori App

1. Create CDS View : In this step, we are creating 2 CDS views :

a. ZSOCOUNT – CDS for displaying sales orders based on Sales order Type

@AbapCatalog.sqlViewName: 'ZCOUNT_SO'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Sales orders by type'
define view ZCOUNTSO as select from vbak as Hdr
inner join vbap as Item on Hdr.vbeln = Item.vbeln {
     @UI.lineItem: [{ position: 10, label: 'Sales order Type', qualifier: 'Q3' }]
    key Hdr.auart as soType,
     @UI.lineItem: [{ position: 20, label: 'Sales order count', qualifier: 'Q3', type: #AS_DATAPOINT }]
    key count(*) as soCount
}
group by Hdr.auart

b. ZMATERIAL – CDS for displaying Materials based on PLANT

@AbapCatalog.sqlViewName: 'ZMATERIALS_PLANT'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'CDS for materials by plant'
define view ZMATERIALS as select from mara as A
    inner join   marc as C on A.matnr = C.matnr
{

//  key A.matnr  as Material,
    @UI.lineItem: [{ position: 10, label: 'Plant', qualifier: 'MARA' }]
  key C.werks  as Plant,
   @UI.lineItem: [{ position: 20, label: 'Materials created', qualifier: 'MARA', type: #AS_DATAPOINT }]
  key count(*) as MaterialsCreated
  
}

group by
  C.werks

2.Expose CDS View as OData 

Add the annotation to both the CDS views :

@OData.publish: true

3.Activate the OData Service

Activate the oData in Backend using Tcode:  /N/IWFND/MAINT_SERVICE

Activate OData service

Similarly Activate the OData for second CDS ZMATERIALS.

4. Create App in WebIDE

Select Overview Page

Provide Project Name, Namespace, Title and Description

In the next step – Data Connection, connect your backend server and provide login credentials

Select the OData service we created in previous steps

Select the Annotation File

Select Alias and click on Finish

New Project is created. You can test the app by running Webapp -> test -> testOVP.html.

5. Add Cards to Fiori App

Right click on Project -> New –> Card

We will show the data in the form of a Bar chart, so we will select LIST:

You can choose based on your requirement.

Choose existing datasource

In template customisation, provide Entity set, Title, subtitle and card properties as you wish to display and click Finish :

Now in order to test the app, do these changes in the manifest.json file in the App :

	"sap.ovp": {
		"globalFilterModel": "ZCOUNTSO_CDS",
		"globalFilterEntityType": "ZCOUNTSOType",
		"containerLayout": "resizable",
		"enableLiveFilter": true,
		"considerAnalyticalParameters": false,
		"cards": {
			"card00": {
				"model": "ZCOUNTSO_CDS",
				"template": "sap.ovp.cards.list",
				"settings": {
					"title": "{{card00_title}}",
					"subTitle": "{{card00_subTitle}}",
					"entitySet": "ZCOUNTSO",
					"listType": "extended",
					"listFlavor": "bar",
					"sortBy": "soCount",
					"sortOrder": "descending",
					"addODataSelect": false,
					"annotationPath": "com.sap.vocabularies.UI.v1.LineItem#Q1"
				}
			}
		}
	}

Do not forget to add the UI annotations in the CDS. Final CDS code should be like this:

@AbapCatalog.sqlViewName: 'ZCOUNT_SO'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Sales orders by type'
@OData.publish: true
define view ZCOUNTSO as select from vbak as Hdr
inner join vbap as Item on Hdr.vbeln = Item.vbeln {
     @UI.lineItem: [{ position: 10, label: 'Sales order Type', qualifier: 'Q1' }]
    key Hdr.auart as soType,
    @UI.dataPoint:
      {
      title: 'Number of failed idocs',
      criticalityCalculation: {
      improvementDirection: #TARGET,
      toleranceRangeLowValue: 5,
      toleranceRangeHighValue: 500,
      deviationRangeHighValue: 4000
      }
      }
     @UI.lineItem: [{ position: 20, label: 'Sales order count', qualifier: 'Q1', type: #AS_DATAPOINT }]
    key count(*) as soCount
}
group by Hdr.auart

Lets test the App now !

Voila! The App is developed as expected. Now let us proceed to the main part of our blog i.e., we need to add another CDS to the overview page. The steps to be followed are :

1. Add datasource of new CDS to manifest.json

"ZMATERIALS_CDS": {
				"uri": "/sap/opu/odata/sap/ZMATERIALS_CDS/",
				"type": "OData",
				"settings": {
					"annotations": [
						"ZMATERIALS_CDS_VAN"
					],
					"localUri": "localService/ZMATERIALS_CDS/metadata.xml"
				}
			},
			"ZMATERIALS_CDS_VAN": {
				"uri": "/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName='ZMATERIALS_CDS_VAN',Version='0001')/$value/",
				"type": "ODataAnnotation",
				"settings": {
					"localUri": "localService/ZMATERIALS_CDS/ZMATERIALS_CDS_VAN.xml"
				}
			}

2.  Add model to manifest.json

	"ZMATERIALS_CDS": {
				"dataSource": "ZMATERIALS_CDS",
				"settings": {
					"defaultCountMode": "Inline"
				}
			}

3. Add new card and link the CDS entity set

"card01": {
				"model": "ZMATERIALS_CDS",
				"template": "sap.ovp.cards.list",
				"settings": {
					"title": "{{card01_title}}",
					"subTitle": "{{card01_subTitle}}",
					"entitySet": "ZMATERIALS",
					"listType": "extended",
					"listFlavor": "bar",
					"sortBy": "MaterialsCreated",
					"sortOrder": "descending",
					"addODataSelect": true
				}
			}

Finally the manifest.json file should have the following code:

{
	"_version": "1.7.0",
	"start_url": "start.html",
	"sap.app": {
		"id": "ZOVP.ZCDSOVP",
		"type": "application",
		"i18n": "i18n/i18n.properties",
		"applicationVersion": {
			"version": "1.0.0"
		},
		"title": "{{app_title}}",
		"description": "{{app_description}}",
		"dataSources": {
			"ZCOUNTSO_CDS": {
				"uri": "/sap/opu/odata/sap/ZCOUNTSO_CDS/",
				"type": "OData",
				"settings": {
					"annotations": [
						"ZCOUNTSO_CDS_VAN"
					],
					"localUri": "localService/ZCOUNTSO_CDS/metadata.xml"
				}
			},
			"ZCOUNTSO_CDS_VAN": {
				"uri": "/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName='ZCOUNTSO_CDS_VAN',Version='0001')/$value/",
				"type": "ODataAnnotation",
				"settings": {
					"localUri": "localService/ZCOUNTSO_CDS/ZCOUNTSO_CDS_VAN.xml"
				}
			},
			"ZMATERIALS_CDS": {
				"uri": "/sap/opu/odata/sap/ZMATERIALS_CDS/",
				"type": "OData",
				"settings": {
					"annotations": [
						"ZMATERIALS_CDS_VAN"
					],
					"localUri": "localService/ZMATERIALS_CDS/metadata.xml"
				}
			},
			"ZMATERIALS_CDS_VAN": {
				"uri": "/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName='ZMATERIALS_CDS_VAN',Version='0001')/$value/",
				"type": "ODataAnnotation",
				"settings": {
					"localUri": "localService/ZMATERIALS_CDS/ZMATERIALS_CDS_VAN.xml"
				}
			}
		},
		"sourceTemplate": {
			"id": "OVP.cardtemplate",
			"version": "0.0.0"
		}
	},
	"sap.ui": {
		"technology": "UI5",
		"icons": {
			"icon": ""
		},
		"deviceTypes": {
			"desktop": true,
			"tablet": true,
			"phone": true
		},
		"supportedThemes": [
			"sap_belize"
		]
	},
	"sap.ui5": {
		"dependencies": {
			"minUI5Version": "${sap.ui5.dist.version}",
			"libs": {
				"sap.ovp": {}
			}
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/i18n.properties"
			},
			"@i18n": {
				"preload": true,
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/i18n.properties"
			},
			"ZCOUNTSO_CDS": {
				"dataSource": "ZCOUNTSO_CDS",
				"settings": {
					"defaultCountMode": "Inline"
				}
			},
			"ZMATERIALS_CDS": {
				"dataSource": "ZMATERIALS_CDS",
				"settings": {
					"defaultCountMode": "Inline"
				}
			}
		},
		"extends": {
			"extensions": {}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		}
	},
	"sap.ovp": {
		"globalFilterModel": "ZCOUNTSO_CDS",
		"globalFilterEntityType": "ZCOUNTSOType",
		"containerLayout": "resizable",
		"enableLiveFilter": true,
		"considerAnalyticalParameters": false,
		"cards": {
			"card00": {
				"model": "ZCOUNTSO_CDS",
				"template": "sap.ovp.cards.list",
				"settings": {
					"title": "{{card00_title}}",
					"subTitle": "{{card00_subTitle}}",
					"entitySet": "ZCOUNTSO",
					"listType": "extended",
					"listFlavor": "bar",
					"sortBy": "soCount",
					"sortOrder": "descending",
					"addODataSelect": false,
					"annotationPath": "com.sap.vocabularies.UI.v1.LineItem#Q1"
				}
			},
			"card01": {
				"model": "ZMATERIALS_CDS",
				"template": "sap.ovp.cards.list",
				"settings": {
					"title": "{{card01_title}}",
					"subTitle": "{{card01_subTitle}}",
					"entitySet": "ZMATERIALS",
					"listType": "extended",
					"listFlavor": "bar",
					"sortBy": "MaterialsCreated",
					"sortOrder": "descending",
					"addODataSelect": true,
					"annotationPath": "com.sap.vocabularies.UI.v1.LineItem#MARA"
				}
			}
		}
	}
}

Run the app now! Final result should look like this :

Conclusion : We have achieved to create an overview page with cards comprising of multiple CDS.

Quick Tip : Instead of Bar chart, Donut chart and other types of charts can be achieved by changing the annotations in the CDS 🙂

I hope this blog is useful. Thanks for your time!