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

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.

 

 

 

 

 

 

 

Thanks,

Ankur Bajpai

Assigned Tags

      10 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Alagar Pandian
      Alagar Pandian

      Thank you so much Ankur for this series of blogs !! good one!

      Can you guide how can I learn more about annotations so that I can use  correct annotation to enable intended features. Is there a detailed document available on this ?

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

      Hi Alagar Pandian,

      Everything is maintained in SAP Wiki, please visit:

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

      Here you will get lots of things to learn.

       

      Author's profile photo Santosh Nayak
      Santosh Nayak

      Hello Ankur,

      If I want to navigate to one of my custom list report by clicking the link on the table card (Intent based navigation), how can I achie that ? Let's say from my table card when I click on the sale order number it should take me to the list page with the report displaying only that particular sale order on which the user clicked.

      Thanks in advance.

       

      Regards,

      Santosh

       

       

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

      Hi Santosh Nayak,

       

      First of all you need check what is the Intent(Semantic Object + Semantic Action) of your custom application i.e (#SemanticObject-SemanticAction).

      Then you can use the same annotation on fields which needs to pass as parameter.

          @Consumption.semanticObject: ‘SemanticObject’

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

         vbeln

       

      Thanks,

      Ankur

      Author's profile photo Santosh Nayak
      Santosh Nayak

      Thanks Ankur ! That works

      Author's profile photo Pritesh Patel
      Pritesh Patel

      What if I have parameters to Pass. For example, I need to see Sales Order details when I click on any line item in overview page. What annotations would I need to use for that?

      Author's profile photo Ajit Mahale
      Ajit Mahale

      Hello Ankur,

       

      Nice Blog, I am following for my Basic FIORI development.

       

      However , I got stuck in cloud connector. Where I have to look for Cloud connector and subsequent web development. Now I am only getting BTP Cockpit. Which is creating sample on SAP Business Application Studio. We can connect our R/3 system but all development data expose outside to our network. Which we do not want.

       

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

      Hi Ajit Mahale,

      It would be good if you put your query with more details in QA forum of SAP community.

      Author's profile photo Meet Vajaria
      Meet Vajaria

      Hi Ankur,

      Great Blog.

      But I still could not figure out, how we can navigate from Card Header. I would like to navigate from Card header to another app based on SemanticObject-Action (Intent-based).

      It would be great if you can provide some insights here.

      Thank you.

      Meet

      Author's profile photo Gentleman Kannan
      Gentleman Kannan

      Hello Ankur,

       

      can't we achieve this overview page using local annotation and Northwind Odata?