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.

• For more information on SAP Fiori Elements- https://sapui5.hana.ondemand.com/#/topic/03265b0408e2432c9571d6b3feb6b1fd

• 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