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 View : In this step, we are creating 2 CDS views :
a. ZSOCOUNT - CDS for displaying sales orders based on Sales order Type
b. ZMATERIAL - CDS for displaying Materials based on PLANT
2.Expose CDS View as OData
Add the annotation to both the CDS views :
3.Activate the OData Service
Activate the oData in Backend using Tcode: /N/IWFND/MAINT_SERVICE
Similarly Activate the OData for second CDS ZMATERIALS.
4. Create App in WebIDE
In the next step - Data Connection, connect your backend server and provide login credentials
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.
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 :
Do not forget to add the UI annotations in the CDS. Final CDS code should be like this:
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 :
2. Add model to manifest.json
3. Add new card and link the CDS entity set
Finally the manifest.json file should have the following code:
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!
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 :
- Create CDS Views
- Expose CDS View as OData
- Activate the OData Service
- Create App in WebIDE
- 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.auartb. 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: true3.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.auartLets 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 :
- 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!
- SAP Managed Tags:
2 Comments
