Skip to Content
Technical Articles
Author's profile photo Ankur Bajpai

SAP Fiori Elements – Analytical List Page Part 4(Creation of Destinations and Analytical List Page Template)

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

Assigned tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vineet Gupta
      Vineet Gupta

      Hello Ankur,

      Nice blog series. Easy to understand and steps broken out effectively.

      Do you know if this scenario should work in "Suite on HANA with Netwaever 7.5" system? Or is this valid for S/4 HANA only?

       

      Thanks

      Vineet

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Hi Vineet,

      I didn't try on "Suite on HANA with Netwaever 7.5". As I learned from the documentation, I think it should work with that.

      Please check the "System Requirements" needed for SAP Fiori Elements.

      https://ui5.sap.com/1.69.0/#/topic/03265b0408e2432c9571d6b3feb6b1fd

       

      Thanks,

      Ankur Bajpai

       

      Author's profile photo Wang Tao
      Wang Tao

      Great papers.

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thanks Wang Tao !!!

      Author's profile photo Deepak Tewari
      Deepak Tewari

      Very Nicely Documented !! Good Work Ankur !

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Thanks Deepak Tewari !!!

      Author's profile photo vinay singh
      vinay singh

      Hi Ankur,

      Thanks for such a detail blog its very helpful.

      I was trying to do the same but facing issue as shown n screenshot. Please help where the actual problem is.

       

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Hi vinay singh,

      Please check with your OData service. Here, it is showing 403 error code in console.

       

       

      Author's profile photo Gottfried Bleiziffer
      Gottfried Bleiziffer

      Hi Ankur Bajpai,

      thanks for this great blog!

      I have a question about the table in the content area.

      Do you know how i can group the table (like the marked positions in the picture) because i can' find any solutions.

       

      Thanks

      Gottfried Bleiziffer

      Author's profile photo Ankur Bajpai
      Ankur Bajpai
      Blog Post Author

      Hi Gottfried Bleiziffer,

       

      I guess by adding “groupBy” property in annoatation @UI.presentationVariant you can achieve the requirement.

      e.g.

      @UI.presentationVariant:

      [
      {qualifier: ‘KPINetwr’,sortOrder: [{by: ‘counter’, direction: #DESC }], groupBy: [‘counter’],
      visualizations: [{ type: #AS_CHART, qualifier: ‘KPIChart1’ },
      {type: #AS_DATAPOINT,qualifier: ‘KPIChart1’}]},

      {qualifier: ‘KPINETWR’,sortOrder: [{by: ‘ernam’, direction: #DESC }], groupBy: [‘ername’],

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

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

       

       

       

      I hope it will help you.

       

      Thanks.

      Author's profile photo Gottfried Bleiziffer
      Gottfried Bleiziffer

      Hi Ankur Bajpai ,

      thank you for your answer.

      Meanwile I found a solution for my problem. It depends what table type you choose.

      In my problem I had a “responsive” table type like in your example. I changed the table type to “analytical table” and it worked. Now it’s much easier to group the table and you have a sum function.

       

      Rgds

      Gottfried Bleiziffer

      Author's profile photo RAMAKRISHNAN MURUGAN
      RAMAKRISHNAN MURUGAN

      Hello Ankur,

      I had followed the same steps as per blog. But not able to see the visual filter. Do we need any other corrections in annotations?

       

      BR,

      RAM.

      Author's profile photo Shilpa R
      Shilpa R

      Hi Ankur Bajpai, this blog is very helpful infact I started laerning CDS by seeing your sap blogs I have gone through all the blogs that you have posted and I had one doubt can we implement variant using CDS annotation?