Skip to Content
Author's profile photo Jamie Cawley

Creating a Fiori OVP Application with CDS view annotations – Part 1

In this blog I will provide some examples that demonstrate how CDS view annotations can be used to generate a Fiori Overview Page (OVP) Application.  An OVP application consists of an Application Header, a Smart Filter and one or many Cards.  The Cards can be used to show data in many forms such as tables and charts.  The CDS view UI annotations are how we define what is shown in the card.  For an overview of OVP see

User Interface Add-On for SAP NetWeaver – SAP Library

To be able to create and run the examples you will need the following:

  • Netweaver 7.5 System
  • Eclipse Mars or Juno
  • Web IDE account

We will also use data from the demo/testing Enterprise Procurement Modal(EPM).  If you have no data existing for the model you can use transaction code SEPM_DG to generate data.  For more information regarding EPM see


The NetWeaver Enterprise Procurement Model – An Introduction


We will start by creating a new CDS view in Eclipse.  If you haven’t setup eclipse yet you can follow Step 1: Installation of Eclipse and its ADT plugin in Simmaco’s Smart Template blog


How to create Smart Templates annotations within CDS views – part 1



CREATING THE CDS VIEW


If you haven’t already done so, you will first need to add a new ABAP system.  This can be done in the ABAP perspective by choosing the menu option File -> New -> Other and searching for ABAP Project.  Either choose your system from the list or provide the necessary connection details.


With your system added choose New – > Other.  In the search input type ddl and choose DDL Source under ABAP


Screen Shot 2016-06-14 at 9.08.26 AM.png


After choosing Next provide the Project, Package, Name and Description details and choose NextScreen Shot 2016-06-14 at 9.10.31 AM.png


Provide any Transport Details if necessary and choose Next.  For Templates, we can use the Define View template.  Choose Finish to complete the process.Screen Shot 2016-06-14 at 9.12.54 AM.png


In the generated view set the values

  • sql_view_name: zovpdemo
  • data_source_name: sepm_cds_sales_order as so

and use the auto complete (CTRL + space) option Insert All Elements to add all of the columns.  This should result in


@AbapCatalog.sqlViewName: 'zovpdemo'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP Demo App'
define view Z_Ovp_Demo as select from sepm_cds_sales_order as so {
so.sales_order_key,
so.sales_order_id,
so.created_by,
so.created_at,
so.changed_by,
so.changed_at,
so.note_guid,
so.currency_code,
so.gross_amount,
so.net_amount,
so.tax_amount,
so.lifecycle_status,
so.billing_status,
so.delivery_status,
so.buyer_guid,
 /* Associations */
so.customer,
so.items
}


After saving and activating, you can verify that the view is working correctly by right clicking on the view and choosing Open Width -> Data Preview.



ADDING SMART FILTER SEARCH FIELDS


The annotation @UI.selectionField can be used to mark fields as global filters for the OVP application.  For the purposes of this example we will mark the sales order id field as well as the customer.company_name with this annotation to allow searching on it.  It is also necessary to identify a field as a key which we will assign to the sales_order_key field.  The result of these changes yields


@AbapCatalog.sqlViewName: 'zovpdemo'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP Demo App'
@OData.publish: true
define view Z_Ovp_Demo as select from sepm_cds_sales_order as so {
key so.sales_order_key,@UI.selectionField: [{ position: 10 }]
so.sales_order_id,
so.created_by,
so.created_at,
so.changed_by,
so.changed_at,
so.note_guid,
so.currency_code,
so.gross_amount,
so.net_amount,
so.tax_amount,
so.lifecycle_status,
so.billing_status,
so.delivery_status,
so.buyer_guid,
 /* Associations */
so.customer,
so.items
@UI.selectionField: [ { position: 20 } ]
so.customer.company_name
}


Within the selectionField annotation we assigned a position, this can be used to position fields in the UI when multiple are used.  We also added the annotation


@OData.publish: true


which is necessary to publish the CDS view as an odata service.


PUBLISHING THE SERVICE

After saving and activating the change you will notice a little bubble nice to the publish annotation.  This will give us access to the service url but it’s usually required that the service is first added in the ABAP system.

To do so, open the t-code /n/iwfnd/maint_service and press the Add Service button.  In the Add Selected Services screen provide a System Alias, in my case I will use LOCAL, and then press the Get Services button.  The Technical Service Name field,  Z_Ovp_Demo, can be provided to filter the results if necessary.  Selecting the service should result in the Add Service dialog appearing.  Here you can assign it a package and choose the enter button to complete the process.

Screen Shot 2016-06-15 at 12.30.06 PM.png

Pressing the enter button should confirm your process and inform you that the service was created successfully.

GENERATING AN APPLICATION IN SAP WEB IDE

This step will require that you have a connection to your backend system setup in the HANA Cloud Platform for use with SAP Web IDE.  If you haven’t done so please see

Setup your SAP Web IDE on HANA Cloud Platform Part 1

In SAP Web IDE choose the menu option File -> New -> Project From Template.  Choose the template Overview Page Application and choose Next.  Provide a name such as OVP_Demo and choose Next.  Using the Service Catalog Source select your system and then search for your service, Z_Ovp_Demo and choose Next.

In the Annotation Selection step the annotation file should appear automatically.  If it does not choose the option Add Annotation Files and choose the option Annotation URL.  Select your system and provide the url, correcting the TechnicalName if necessary

/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName=’Z_OVP_DEMO_CDS_VAN’,Version=’0001′)/$value

Choose the Next button and then provide the values as shown.

Screen Shot 2016-06-15 at 4.05.38 PM.png

Press Finish to complete the template workflow.


A SMALL ADJUSTMENT

At the time of creating this blog I had to make the following adjustment due to some issues presented by the template.  Verify and adjust accordingly if this issue is presented in your generated app.  Open the neo-app.json and verify that your backend destination route path is as follows, making sure that if the path and entryPath are set as /sap/opu/odata/sap/Z_OVP_DEMO_CDS, both are changed to /sap/opu/odata



{
      "path": "/sap/opu/odata",
      "target": {
        "type": "destination",
        "name": "UIA_Virtual_000",
        "entryPath": "/sap/opu/odata"
      },
      "description": "UIA_Virtual_000"
    },



RUNNING THE APP

Select the Component.js and Run the app.  After pressing the filter icon your app should resemble

Screen Shot 2016-06-16 at 2.02.32 PM.png

In the next part we will add some additional annotations that we will then use to display some cards in the apps.  See part two at

Creating a Fiori OVP Application with CDS view annotations – Part 2

RESOURCES

ABAP CDS – SAP Annotations – ABAP Keyword Documentation

About ABAP Programming Model for SAP Fiori – SAP Library

Assigned Tags

      16 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vanessa Martinez
      Vanessa Martinez

      Hi and thanks for this great blog. Maybe Join the fioripractitioners community on Slack! is also interesting for you.

      Author's profile photo Vishnu Pankajakshan Panicker
      Vishnu Pankajakshan Panicker

      best blog to start with..

      Author's profile photo Arun Krishnamoorthy
      Arun Krishnamoorthy

      Hi Jamie,

      Thanks for the tutorial. It was well explained. I am facing a problem, i could not see the filters created in the application. Please find below the annotation file. Can  you help how to fix the issue. I have not done any modification to the file.

       

      CDS:

      define view Zcds_Salesorder as
      select from snwd_so as so {

      // Make the Sales Order ID as a Selection Field
      @UI.selectionField: [ { position: 10 } ]
      key so_id as SoId,

      @Semantics.amount.currencyCode: 'CurrencyCode'
      gross_amount as GrossAmount,
      @Semantics.currencyCode
      currency_code as CurrencyCode
      }

       

      Annotation:

      <edmx:Edmx
      xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx" Version="4.0">
      <edmx:Reference Uri="./IWFND/CATALOGSERVICE;v=2/Vocabularies(TechnicalName='%2FIWBEP%2FVOC_COMMON',Version='0001',SAP__Origin='LOCAL')/$value">
      <edmx:Include Namespace="com.sap.vocabularies.Common.v1" Alias="Common"/>
      </edmx:Reference>
      <edmx:Reference Uri="./IWFND/CATALOGSERVICE;v=2/Vocabularies(TechnicalName='%2FIWBEP%2FVOC_UI',Version='0001',SAP__Origin='LOCAL')/$value">
      <edmx:Include Namespace="com.sap.vocabularies.UI.v1" Alias="UI"/>
      </edmx:Reference>
      <edmx:Reference Uri="./IWFND/CATALOGSERVICE;v=2/Vocabularies(TechnicalName='%2FIWBEP%2FVOC_COMMUNICATION',Version='0001',SAP__Origin='LOCAL')/$value">
      <edmx:Include Namespace="com.sap.vocabularies.Communication.v1" Alias="Communication"/>
      </edmx:Reference>
      <edmx:Reference Uri="./SAP/ZCDS_SALESORDER_CDS/$metadata">
      <edmx:Include Namespace="ZCDS_SALESORDER_CDS" Alias="SAP"/>
      </edmx:Reference>
      <edmx:DataServices>
      <Schema
      xmlns="http://docs.oasis-open.org/odata/ns/edm" Namespace="zcds_salesorder_cds_van.v1">
      <Annotations Target="sap.com.cds_z.Zcds_SalesorderType">
      <Annotation Term="UI.SelectionFields">
      <Collection>
      <PropertyPath>SoId</PropertyPath>
      </Collection>
      </Annotation>
      </Annotations>
      </Schema>
      </edmx:DataServices>
      </edmx:Edmx>

       

      Regards,
      Arun Krishnamoorthy

      Author's profile photo M. Happé
      M. Happé

      Hi Arun,

      In meantime the templates/wizards has been modified, I had the same issue regarding the filterbar which doesn't show up.

      Adding the suffix "Type" in the "globalFilterEntityType" property in you manifest.json solved the problem for me:

       

      Regards,
      Mattijs

       

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      Please post the issue as a new question providing the same with a screenshot showing what you are seeing.

       

      Regards,

      Jamie

      Author's profile photo Klaus Koblinger
      Klaus Koblinger

      Hello Jamie,

      thank you for your post.

      Can you tell me if it is possible to add UI Annotations also in HANA CDS Views?

      Thanks Klaus

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      From what I understand the annotation for HANA are related to db development.  The UI annotations are only part of the ABAP spec.

      Regards,

      Jamie

      Author's profile photo Former Member
      Former Member

      Hello Jamie,

      Great article, I am having issue to select service, I got error Catalog Service is unavailable. Cloud Connection status is success. How to expose OData  service so I can consume it here. OData service is created and tested in the browser. Please let me know what can be wrong,

      Thank you!

      Ian Korol

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      Hi Ian,

      Please post a new thread in the question and answers area and include the destination and cloud connector configurations.

      Regards,

      Jamie

      Author's profile photo Former Member
      Former Member

      Hi Jamie,

      Issue was resolved and I can connect to SAP ECC backend system. I have a trial account and I had 2 connections in the cloud connector, one was reachable and one not. When I deleted connection which was not reachable, the issue disappear and it started working.

      Author's profile photo Former Member
      Former Member

      Excellent blog.  It worked for me.  Thanks.

       

      Author's profile photo AshiqAli Ratnani
      AshiqAli Ratnani

      Hi,

      I am trying this out and getting the error 'Page failed to Load'. When I am checking the console I can see the below message:

      ZXAR_OVP_TEST1/Component-changes.json could not be loaded from ../../../../../webapp/Component-changes.json. Check for 'file not found' or parse errors. Reason: Not Found

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      Hi AshigAli

      Please post a new thread in the question and answers area and include a screenshot of the error and the entire console trace.  The Component-changes.json message is of no concern.

      Regards,

      Jamie

      Author's profile photo Former Member
      Former Member

      Hi Jamie,

      Thanks for the tutorial.

      I am not able to see the filters created in the application. I also have added "Type" suffix in manifest file in "globalFilterEntityType” but still no luck.

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      Hi Puja,

      Please post a new thread in the question and answers area and include all of the relevant information.

      Regards,

      Jamie

       

      Author's profile photo kyo choi
      kyo choi

      My WebIDE didn't have the OVP template but I was able to create Fiori Master Detail application.