Skip to Content
Technical Articles

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

12 Comments
You must be Logged on to comment or reply to a post.