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

After choosing Next provide the Project, Package, Name and Description details and choose Next

Provide any Transport Details if necessary and choose Next.  For Templates, we can use the Define View template.  Choose Finish to complete the process.

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.

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.

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

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