Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
SyedAllaBakshu
Participant
2,248
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!
2 Comments
Labels in this area