Generate sample OData on ABAP AS 7.52 SP04 Dev Edition for SAP Fiori tools

TL;DR: Use SAP ABAP AS Developer Edition and SAP Fiori tools on VSCode to develop Fiori Elements application locally

My first impression of SAP Fiori tools after watching a presentation by Peter Spielvogel during last year’s TechEd which includes a demo of the planned SAP Fiori tools (YouTube: https://youtu.be/E_FbbJuDwsI?t=1252) was that it is really easy to use and will certainly accelerate the creation of SAP Fiori Elements applications. I am also grateful to have been able to be part of the beta testing group which helped me understand and be impressed at how simple and easy it would be to create Fiori Elements apps with Fiori tools.The option to use VSCode for offline local development is a great and much appreciated feature – in my opinion.

SAP WebIDE unfortunately has always been an online IDE tool (yes – I am aware of the local Personal Edition but it hasn’t been updated in years – last update in Dec, 2018?) and although you can also develop SAPUI5 application with other tooling (see blog post: https://blogs.sap.com/2019/11/26/sapui5-tools-for-eclipse-now-is-the-time-to-look-for-alternatives/ ), none of these have the ease-of-use features that SAP WebIDE has provided through a wizard step-by-step process, form editors, etc.

SAP Fiori tools is now finally released and generally available. See blog post for the announcement – https://blogs.sap.com/2020/06/22/sap-fiori-tools-is-generally-available.-increase-the-efficiency-of-developing-sap-fiori-elements-apps/ .

In the blog post above, you’ll find links to tutorials on https://developers.sap.com/tutorials/ that you can get an introduction / walk-through of the features and ease-of-use of SAP Fiori tools. However, one of the main requirement before developing any Fiori application is the availability of an OData service and in the tutorial by SAP, you’ll be using an OData service from the Gateway Demo System (ES5).

Of course, in order for you to “truly” do offline development, it would be nice to have an OData service that is also available without having to be online and preferably one that you can also manipulate the data/CDS in the backend as well.

Here’s where the SAP ABAP AS Developer Edition comes in. This system is delivered ready with sample data and CDS just waiting to be exposed as OData so that you can start creating your Fiori Elements application.

Please see blog post – https://blogs.sap.com/2019/07/01/as-abap-752-sp04-developer-edition-to-download/ or https://blogs.sap.com/2019/04/30/how-to-easily-install-sap-netweaver-developer-edition-7.52-and-abapgit-with-vagrant-in-10-man-minutes/ for information on how to download and install it on your own PC/laptop. Personally, I prefer the “vagrant” method because it only takes a mere 10 mins and everything else is completely automated – the entire automated installation takes about an hour on my laptop.

Alright, assuming that you already have the ABAP Developer Edition server running, here’s how you can generate an OData service that you’ll be able to use with SAP Fiori tools locally in 3 simple steps using existing data from the Enterprise Procurement Model (EPM) – https://archive.sap.com/documents/docs/DOC-31458

1. Create a Consumption CDS “ZSEPM_C_PurchaseOrder” and Metadata Extension “ZSEPM_CPO_MDE”

Consumption CDS – 

@AbapCatalog.sqlViewName: 'ZSEPM_CPO'
@AbapCatalog.compiler.compareFilter: true
@VDM.viewType: #CONSUMPTION
@Metadata.allowExtensions:true
@AccessControl.authorizationCheck: #NOT_REQUIRED     //EPM does not use authorization restrictions
@EndUserText.label: 'EPM Demo: Purchase Order - Consumption'
@OData.publish: true
define view ZSEPM_C_PurchaseOrder as select from SEPM_I_PurchaseOrder_E as PO {
     //sepm_i_purchaseorder_e
     key PO.PurchaseOrder,
     PO.Supplier,
     PO.TransactionCurrency,
     PO.GrossAmountInTransacCurrency,
     PO.NetAmountInTransactionCurrency,
     PO.TaxAmountInTransactionCurrency,
     PO.PurchaseOrderLifeCycleStatus,
     PO.PurchaseOrderApprovalStatus,
     PO.PurchaseOrderConfStatus,
     PO.PurchaseOrderOrderingStatus,
     PO.PurchaseOrderInvoicingStatus,
     PO.PurchaseOrderOverallStatus,
     PO.CreatedBySystemUser,
     PO.LastChangedBySystemUser,
     PO.CreationDateTime,
     PO.LastChangedDateTime,
     /* Associations */
     //sepm_i_purchaseorder_e
     PO._ApprovalStatus,
     PO._ConfirmationStatus,
     PO._InvoicingStatus,
     PO._Item,
     PO._LifeCycleStatus,
     PO._OrderingStatus,
     PO._OverallStatus,
     PO._Supplier,
     PO._SupplierV2,
     PO._Text,
     PO._TransactionCurrency
}

Metadata Extension

@Metadata.layer:#CUSTOMER

@UI: {
  headerInfo: { typeName: 'Purchase Order',
                typeNamePlural: 'Purchase Orders',
                title: { type: #STANDARD,
                         value: 'PurchaseOrder' } } }
annotate view ZSEPM_C_PurchaseOrder
    with 
{
  //ZSEPM_C_PurchaseOrder
  @UI: { lineItem:       [ { position: 10,
                             importance: #HIGH } ],
         identification: [ { position: 10 } ] }
  PurchaseOrder;

  @UI: { lineItem:       [ { position: 20,
                             importance: #HIGH } ],
         identification: [ { position: 20 } ] }
  PurchaseOrderOverallStatus;

  @UI: { lineItem:       [ { position: 30,
                             importance: #HIGH } ],
         identification: [ { position: 30 } ] }
  CreationDateTime;
  
  @UI: { lineItem:       [ { position: 40,
                             importance: #HIGH } ],
         identification: [ { position: 40 } ] }
  LastChangedDateTime;
}

2. Publish, activate and test the OData service

– Make sure that the annotation @OData.publish is set to true on the CDS and activate CDS

– Then activate the generated OData service in transaction /IWFND/MAINT_SERVICE

– Finally, run a quick test of the OData service in your browser or the SAP Gateway Client

3. Time to head over to SAP Fiori tools to generate the Fiori Elements application

– Generate a new Fiori Elements app in SAP Fiori tools in VSCode using the Application Generator

– Once the project is generated, you can run the ‘start’ script to get localhost running and preview your new Fiori app!

That’s it – you now have an ABAP backend where you can freely work on changing the CDS anyway you want – eg: adding more associations, adding/changing annotations, updating / deleting records and at the same time, develop your Fiori Elements application with Fiori tools locally

Conclusion

SAP Fiori tools is most definitely the quickest and easiest way to get started with developing Fiori Elements applications and with the support of using VSCode for local development – developers can truly have a complete local development experience when developing with the ABAP AS 75x Developer Edition server.

Also, unfortunately, I was not able to get the “deploy-to-abap” to work with this ABAP server because the minimum SAP_UI version that is required is 753 and this ABAP server only comes with 752. Maybe next release of a new ABAP Dev Edition server?!?! *fingers crossed and wishful thinking*

Tip: There are more CDS such as the one used in the example above available in the ABAP system. You just need to look into the following Package.
S_NWDEMO > S_EPM_STAKEHOLDERS > S_EPM_CDS > S_EPM_CDS_REF