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
Hi and thanks for this great blog. Maybe Join the fioripractitioners community on Slack! is also interesting for you.
best blog to start with..
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
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
Please post the issue as a new question providing the same with a screenshot showing what you are seeing.
Regards,
Jamie
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
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
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
Hi Ian,
Please post a new thread in the question and answers area and include the destination and cloud connector configurations.
Regards,
Jamie
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.
Excellent blog. It worked for me. Thanks.
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
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
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.
Hi Puja,
Please post a new thread in the question and answers area and include all of the relevant information.
Regards,
Jamie
My WebIDE didn't have the OVP template but I was able to create Fiori Master Detail application.