SAP Fiori Elements – Overview Page Part 4(Creation of Destinations and Overview 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-

SAP Fiori Elements – Overview 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 Overview Page 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 -> “Overview Page” template -> 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 file.

 

• Click on “Next”.

• Select Datasource Alias, Entity Type for Filter ->Default checked “Enabled Live Filter” box remains same -> Select “Resizable” in Container Layout ->Click on “Next”.

• Click on “Finish”.

• Now we can see our newly created project.

• Click on “Run” button to run the application.

• Click on tile “OVP_SO”.

• Now our Overview Page with default feature looks like this-

• We can see only the title of our app. Let’s add different types of cards.
• Let’s add annotation for the cards in CDS view.

 

• Here I added @UI.lineItem annotation to show these columns on my cards.
• On “Sales Document Number(vbeln)”, I am going to provide a semantic object here so that we can navigate to another app by click on any “Sales Document Number”. I provided intent based navigation. For intent based navigation we need semantic object and action.
• We have some sample application in Fiori Launchpad by default.

 

• Let’s find the semantic object of any sample application. I just took “RTA Demo App” semantic object.
• Click on the tile “RTA Demo App” -> Check the full URL of the opened application.

• Here we can find the semantic object of the application: #Action-tortademo like this.
• I provided intent based navigation here and semantic object “tortademo”

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

Code Snippet:

define view ZXC_SO_84 as select from vbak

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

{

    //vbak

    @Consumption.semanticObject: ‘Action’

    @UI.lineItem: [ { position: 10, label: ‘Sales Document Number’}, {type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: ‘tortademo’}]

    key vbeln,

    audat,

    @UI.lineItem: [{position: 20, label: ‘Created By’ }] 

    ernam,

    waerk,

    @UI.lineItem: [ { position: 30, label: ‘Net Value’}]

    netwr,

    _SOITEMS

  

}

 

• Now we are going to add cards.
• Go to SAP Web IDE Full Stack -> Right click on newly created project (OVP_SO) -> New -> Card.

• Select the card template as per requirements. Here, I selected “Table card” -> Click on “Next”.
• Configure your “Datasource” -> I selected Default Datasource.-> Click on “Next”.

• Enter General fields: “Entity Set”, “Title” and “Subtiltle” -> Enter Annotations fields: “Identification”, “Annotation Path” -> Enter Card Properties fields: “Sort By”, “Sort Order” -> Click on “Next”.

 

• Click on “Next”.

 

• Click on “Finish”.

• Double click on “json” file to check the code of card added.

• Click on “Run”.

• Click on “OVP_SO”.

 

• Let’s see Table card added successfully.

• Let’s check the intent based navigation by click on any sales document number.

• We can see intent based navigation working.
• Now we are going some criticality property on our net value amount and selection field on the header area.
• Go to ADT -> Add the following annotation at “netwr” field.

 

@UI.dataPoint: {title: ‘Net Value’,

    criticalityCalculation: {

    improvementDirection: #TARGET,

    deviationRangeLowValue: 100,

    deviationRangeHighValue: 2000,

    toleranceRangeLowValue: 600,

    toleranceRangeHighValue: 800

    }}

• Add the UI.selectionField annotation in the fields.

 

• Press “CTRL+ S“ to save the changes and “CTRL +F3” to activate the CDS view.
• Refresh the application. Selection fields and Criticality level is added.

• Let’s add other cards -> Follow same procedure to add card as we done above.

 

• Select “List” -> Click on “Next”.

• Select Datasource -> Click on “Next”.

• Enter Template Customization fields.

• In the List Type we have two list types:

1. Condensed: Number of list items displayed: up to 3.
2. Extended: Number of list items displayed: up to 6.

 

• In the List Flavour we have two flavour:

1. Bar
2. Standard

 

• Click on “Next”.

• Click on “FInish”.

 

• Refresh the application window.

 

• See “List Card” added successfully.

 

Stack Card: Stack card is the collection of same types of cards defining a specific topic or action. When clicked, up to 20 stacked cards (Quick View Cards) can be displayed in the object stream.

The information displayed in Quick View Cards is configured in the com.sap.vocabularies.UI.v1.HeaderInfo and com.sap.vocabularies.UI.v1.Facets terms.

 

• For Stack Card add the following annotation in the CDS view.

 

Code Snippet:

 

@UI.headerInfo: {

typeName: ‘Sales Order’,

typeNamePlural: ‘Sales Orders’,

imageUrl: ‘mytestImg’,

 title: {

    label: ‘Sales Order’,

    value: ‘vbeln’

  },

  description: {

    label: ‘Customer’,

    value: ‘ernam’

  }}

 

• I took imageUrl like my current organization logo from Google. Add imageUrl whatever you have.

 

• Now I am going to add Stack Card on SAP Web IDE Full Stack->Follow same procedure to add card as we done above.

 

• Select “Stack Card” -> Click on “Next”.

• Use existing datsource -> Click on “Next”.

• Enter Template Customization fields -> Click on “Next”.

 

• Click on “Finish”.

 

• Refresh the application.

 

• Now we had added Stack Card successfully.

 

Stack Card is divided into two areas.

The left are is works as we define in @UI.identification annotation and the right side area opens the Quick View Cards.

 

• Click on the right-side area of the Stack Card. Quick View Cards are open like this.

 

• Now we are going to add Analytical Card. For Analytical Card, I added annotations: @UI.chart, @UI.selectionVariant, @UI.presentationVariant.

 

Code Snippet for Analytical Chart in ADT:

 

  @UI.presentationVariant: [

{

    qualifier: ‘netAmt’,

    maxItems: ‘5’,

    visualizations: [{

        type: #AS_CHART,

        qualifier: ‘ordNetChart’

    }]

}]

 

@UI.selectionVariant: [

{

    qualifier: ‘netAmt’,

    text: ‘Default’

}]

 

@UI.chart:[{

    qualifier: ‘ordNetChart’,

    title:’Sales Order Amount’,

    chartType: #COLUMN,

    dimensions: [‘vbeln’],

    measures: [‘netwr’],

    dimensionAttributes: {dimension: ‘vbeln’, role:#CATEGORY},

    measureAttributes: [{measure: ‘netwr’, role: #AXIS_1}]

 }]

 

 

• Let’s make a entry of Analytical Card in the “manifest.json”

• I tried to add Analytical Card by same procedure. Here I got Select KPI Annotation but as such I don’t have.
• So, I tried to add manually in “manifest.json” file.

 

• Code snippet of “manifest.json” file for Analytical Card:

“card03”: {

                “model”: “ZXC_SO_84_CDS”,

                “template”: “sap.ovp.cards.charts.analytical”,

                “settings”: {

                                                “title”: “{{card03_title}}”,

                                                “entitySet”: “ZXC_SO_84”,

                                                “chartAnnotationPath”: “com.sap.vocabularies.UI.v1.Chart#ordNetChart”,                                                                                                                            “presentationAnnotationPath”: “com.sap.vocabularies.UI.v1.PresentationVariant#netAmt”,

                                                “identificationAnnotationPath”: “com.sap.vocabularies.UI.v1.Identification#ordNetChart”

                                                                }

                                                }

 

• Refresh the application:
• Here we can see Analytical Card added successfully.

 

Cheers, we had done with the basic SAP Fiori Elements (Overview Page) application.

 

 

Conclusion-

In this blog series we have successfully created an Overview Page.

I hope this blog series help you to develop a basic SAP Fiori Elements (Overview 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

 

• SAP Fiori Elements Guidelines- https://experience.sap.com/fiori-design-web/overview-page/

 

• SAP Community: Fiori Elements- https://wiki.scn.sap.com/wiki/display/Fiori/Fiori+Elements

 

 

 

 

Thanks,

Ankur Bajpai