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: 
AnkurBajpai
Active Participant
Hi All,

In this blog post we are going to create a destination in the SAP Cloud Connector/SAP Cloud Platform Cockpit and Analytical List Page/Object Page.

Pre-requisite- Please visit my previous blog post for the development of OData Service-


Analytical List Page Part 3(Development of OData Service)

Let’s start from the creation of destination:

1. Create destination in SAP Cloud Connector-



  • Login to your SAP Cloud connector.

  • Click on “Cloud to On-Premise” in SAP Cloud Connector and make an entry for your SAP system as I created.




 

2. Create destination SAP Cloud Platform-



  • Login to your SAP Cloud Platform (Neo Trial account) -> Destinations -> Click on “New Destination” -> Make a new entry and Check the connection.

  • Connection should be reachable.





3. Create Analytical List Report Template-



  • Click on “Service tab” and enable SAP WEB IDE Full Stack service if not enabled.

  • Open SAP WEB IDE Full Stack.

  • Click on “File” -> New -> Project from template -> Select “Analytical List Page/ Object Page” template ->Click on "Next".




  • Enter Project Name, Title and Namespace -> Click on “Next”




  • Choose your system in Service Catalog” and search for the OData service (ZXC_SO_84).




  • Here we can see our annotation files.




  • Click on “Next”.




 

  • Select OData Collection, OData Navigatio and Table Type ->Default checked “Auto Hide” and "Enable Smart Variant Management" box remains same -> Click on “Next”.


 



  • Click on “Finish”.




  • Now we can see our newly created project.




  • Now we are going to test the application. Click on “Run” button.




  • Select “flpSandBox.html” -> Click on “OK”.


 

  • Click on tile “ALP_SO”.




  • This is how our app look like with default properties.




  • Now we are going to add UI annotation for these column fields and for the header info.

  • @UI.headerInfo is the annotation to add Header Info in List Report Page.

  • @UI.lineItem is annotation to add columns.






  • Open ADT -> Add following lines of comment.

  • Here I added a virtual field counter, and specify its default aggregation behavior by adding the annotation- @DefaultAggregation: #SUM

  • Press “CTRL+ S“ to save the changes and “CTRL +F3” to activate the CDS view.

  • Go the Browser screen and refresh the page.

  • Now we can see only Table items column fields by default -> Click on “Go” button.




  • Now we are going to add annotations for the chart, selection field, data point and identification.

  • @UI.chart is the annotation to add charts on Analytical List Page.

  • @UI.selectionField is the annotation to show selection field on compact filter.

  • @UI.dataPoint is the annotation to show fields on Object page at header area.

  • @UI.identification is the annotation to show fields on facet area(content area).










 

Code snippet-
@AbapCatalog.sqlViewName: 'ZX_VW_SO_84'

@AbapCatalog.compiler.compareFilter: true

@AccessControl.authorizationCheck: #CHECK

@EndUserText.label: 'Sales Order'

@OData.publish: true




@UI.headerInfo: {

typeName: 'Sales Order',

typeNamePlural: 'Sales Orders'}




@UI.chart: [{

qualifier: 'ChartDefault',

chartType: #DONUT,

description: 'Sales Details',

dimensions: ['netwr'],

measures: ['counter'],

dimensionAttributes: [{dimension: 'netwr', role: #CATEGORY }],

measureAttributes: [{measure: 'counter', role: #AXIS_1, asDataPoint: true }] },




{

qualifier: 'KPIChart2',

chartType: #COLUMN,

description: 'Sales Details',

dimensions: ['netwr'],

measures: ['counter'],

dimensionAttributes: [{dimension: 'netwr', role: #CATEGORY }],

measureAttributes: [{measure: 'counter', role: #AXIS_1, asDataPoint: true }] }]




@UI.presentationVariant:

[

{qualifier: 'KPINetwr',sortOrder: [{by: 'counter', direction: #DESC }],

visualizations: [{ type: #AS_CHART, qualifier: 'KPIChart1' },

{type: #AS_DATAPOINT,qualifier: 'KPIChart1'}]},




{qualifier: 'KPINETWR',sortOrder: [{by: 'ernam', direction: #DESC }],

visualizations: [{ type: #AS_CHART, qualifier: 'KPIChart2' }]},

{qualifier: 'Default', visualizations: [{ type: #AS_CHART, qualifier: 'ChartDefault' }]}]




@UI.selectionVariant: [{

qualifier: 'KPINetwr',text: 'KPI Net Value'},

{ qualifier: 'Default',text: 'Default Net Value'}]




@UI.selectionPresentationVariant: [{

qualifier: 'KPINetwr',

presentationVariantQualifier: 'KPINetwr',

selectionVariantQualifier: 'KPINetwr'

},{

qualifier: 'Default',

presentationVariantQualifier: 'Default',

selectionVariantQualifier: 'Default'

}]







define view ZXC_SO_84 as select from vbak

association [1..*] to ZXC_SOITEMS_84 as _SOITEMS on $projection.vbeln = _SOITEMS.vbeln

{

//vbak

@UI.selectionField: [{position: 10 }]

@UI.dataPoint:{title: 'Sales Document Number'}

@UI.identification: [{position: 10, importance: #HIGH }]

@UI.lineItem: [ { position: 10 }]

key vbeln,

@UI.selectionField: [{position: 20 }]

@UI.dataPoint:{title: 'Created on'}

@UI.lineItem: [ { position: 20}]

erdat,

audat,

@UI.selectionField: [{position: 30 }]

@UI.dataPoint:{title: 'Created By'}

@UI.identification: [{position: 20, importance: #HIGH }]

@UI.lineItem: [ { position: 30, label: 'Created By' }]

ernam,

@UI.lineItem: [ {position: 40}]

auart,

waerk,

@UI.selectionField: [{position: 50  }]

@UI.dataPoint:{title: 'Net Value Test'}

@UI.lineItem: [ { position: 50}]

netwr,

@UI.selectionField: [{position: 60  }]

@UI.identification: [{position: 30, importance: #HIGH }]

@UI.lineItem: [ {position: 60}]

vkorg,

@UI.lineItem: [ {position: 70}]

spart,

@UI.lineItem: [ { position: 80}]

_SOITEMS,

@DefaultAggregation: #SUM

cast(1 as abap.int8) as counter

}




  • Press “CTRL+ S“ to save the changes and “CTRL +F3” to activate the CDS view.

  • Go the Browser screen and refresh the page.

  • Click on “Go”.




  • Still, we are not able to see chart on Content Area.

  • Let’s do one setting in “manifest.json” file on SAP Web IDE Full Stack.

  • Double click on “manifest.json” file -> Add- “qualifier” : “Default” in the settings area of Analytical Page.




  • Press “CTRL + S” to save the changes and refresh the application page.




  • Now we are fine with the chart at content area.

  • There is one more issue, we can’t see visual filter.

  • Let’s make some changes in the SAP Web IDE Full Stack.

  • Open Project folder -> Double Click on “annotations” folder -> Double Click on “annotations.xml” -> Click on “Select Targets”




  • Expand structure of “ZXC_SO_84Type” -> Expand structure of “Properties”




  • Select “vbeln” -> Click on “OK”.




  • Expand newly created “Properties” -> Expand “vbeln” -> Click on “+” at Local Annotations.






 

  • Expand “Common Vocabulary” -> Select “ValueList” -> Click on “OK”






  • Enter the Collection “ZXC_SO_84” -> Click on “+” at "Common.ValueList".




  • Select “PresentationVariantQualifier” -> Click on “OK”.




  • Enter “PresentationVariantQualifier” – KPINETWR




  • Press “CTRL +S” and refresh the application.


 



  • Now we can see Visual Filter also.

  • This is how our basic application looks like.

  • Click on row item of the list.




  • This is our Object Page screen.




  • Here we can change following highlighted facet as per requirements.


 

  • Go to SAP Web IDE -> Open Project -> i18n folder -> Open "i18n.properties" file




  • Here we change the details:


General Information – Sales Order Information

Second Facet- Sales Order Item Details

 

  • Click “CTRL + S” to save the changes and refresh the application screen.

  • Now we can see changes.


 



  • Our basic application is ready.


 

  • Now we add application flexibility functionality and it will look more prettier than now.


 

  • Go to SAP Web IDE Full Stack -> Open Project ->Double click on “manifest.json” file and add the following code at the generic app area.


 

"flexibleColumnLayout": {

"defaultTwoColumnLayoutType": "TwoColumnsMidExpanded",

"defaultThreeColumnLayoutType": "ThreeColumnsEndExpanded"

},



 

  • Click “CTRL + S” to save the changes -> Click on “Run” button.

  • Now we can see changes.




  • Click on tile “ALP_SO” -> Click on row item of the table.


 





  • Now see how our application looks prettier. Our Analytical List Report and Object Page visible in same screen.


 

  • Let’s add KPI in the Analytical List Page. Here I am going to add default standard KPI.


 

  • Go to SAP Web IDE Full Stack -> Right Click on our project “ALP_SO” -> Click on “Add KPI”




  • Here we can see active standard KPI for my system. Now for the demo I am taking standard active KPI for our application.


 

  • Select the KPI -> Click on “Add KPIs”




  • Our KPI is added successfully, we can check in the “manifest.json” file.




  • Click on “manifest.json file” -> Go to at Analytical Page code.

  • See the changes under “keyPerformanceIndicators”.

  • Click on “Run” button.

  • See KPI tag is added successfully.




  • Click on KPI tag to see functionality.




  • This is how our KPI looks like.

  • So, we have done with the basic Analytical List Page/Object Page application.


Conclusion-


In this blog series we have successfully created an Analytical List Page/ Object Page.

I hope this blog series help you to develop a basic SAP Fiori Elements (Analytical List Page/ Object Page) application using CDS view and annotations on SAP S/4 Hana.

 

 

  • Getting Started with SAP Fiori Elements


 

SAP Fiori Elements Guidelines-

https://experience.sap.com/fiori-design-web/list-report-floorplan-sap-fiori-element/

 

SAP Community: Fiori Elements-

https://wiki.scn.sap.com/wiki/display/Fiori/Fiori+Elements

 

 

Thanks,

Ankur Bajpai
13 Comments
Labels in this area