Skip to Content
Technical Articles
Author's profile photo Alban Leong

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

Assigned Tags

      13 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Xiang Li Heah
      Xiang Li Heah

      Awesome and great step-by-step demo and tips ! Thanks for sharing.

      Author's profile photo Alban Leong
      Alban Leong
      Blog Post Author

      You're welcome, Xiang Li Heah and thanks for leaving a comment~!

      Author's profile photo Syambabu Allu
      Syambabu Allu

      Nicely explained.
      Thanks for sharing in detail.

      Thank you,

      Syam

      Author's profile photo Alban Leong
      Alban Leong
      Blog Post Author

      You're welcome and glad you liked the post, Syambabu Allu - thanks for leaving a comment~!

      Author's profile photo Victor Carmona Pale
      Victor Carmona Pale

      Thank you for this article.

      I try to create an application in Visual Studio Code. When I open Application Generator (Yeoman UI), project types do not appear, therefore I cannot go ahead.

      Install the extension incorrectly?

      Best regards, Victor.

       

      Author's profile photo Alban Leong
      Alban Leong
      Blog Post Author

      Victor Carmona Pale - You might just be missing the step of installing the windows-build-tools as mentioned here in this comment https://blogs.sap.com/2020/06/22/sap-fiori-tools-is-generally-available.-increase-the-efficiency-of-developing-sap-fiori-elements-apps/#comment-516490.

      https://www.npmjs.com/package/windows-build-tools

      Author's profile photo Victor Carmona Pale
      Victor Carmona Pale

      Thank you so much Alban.

      I try to follow this tutorial: https://developers.sap.com/tutorials/fiori-tools-generate-project.html

      I use MacOS, Do you think the tutorial is only for Windows OS?

      Best regards, Victor.

      Author's profile photo Alban Leong
      Alban Leong
      Blog Post Author

      Ahh, sorry that I made the assumption that you were on Windows.

      MacOS would not have this prerequisite and should just work by installing NodeJS and making sure you have the right version.

      Again, going back to the blogpost – other users have reported similar issues with MacOS as well and this seemed to work for them.

      Open a terminal window and run > sudo npm i -g @sap/generator-fiori-elements 

      to install the generator and restart VSCode. - HTH

      https://blogs.sap.com/2020/06/22/sap-fiori-tools-is-generally-available.-increase-the-efficiency-of-developing-sap-fiori-elements-apps/#comment-514992

      Author's profile photo Victor Carmona Pale
      Victor Carmona Pale

      Thank you Alban.

      I executed: npm i @sap/generator-fiori-elements and this resolved my issue.

      You are an expert.

      Author's profile photo Uwe Fetzer
      Uwe Fetzer

      Hi Alban,

      just a short note: Transaction /IWFND/MAINT_SERVICE is singular (without ending "S")

      Author's profile photo Alban Leong
      Alban Leong
      Blog Post Author

      Thanks for noticing that - I've updated the blog.

      However, curiously enough, not sure if you've tried it but... if you enter /n/IWFND/MAINT_SERVICES in the SAP GUI command field, it actually works... 🙂

      Author's profile photo Shai Sinai
      Shai Sinai

      /IWFND/MAINT_SERVICE_WITH_ANOTHER_SUFFIX would also work 🙂

      I guess this is because the length of transaction code is 20 characters.

      Author's profile photo Bob Douglas
      Bob Douglas

      Hi Alban Leong,

      Very useful blog for beginners! I just wanted to ask how can I now deploy my Fiori Elements project from VS Code to the server? I assume I have to copy the full folder and upload it somehow, but I find very confusing information, mostly related to do things from SCP and not in my own ABAP AS.

      And a second question, can I add CUD operations using the @Odata.publish: true instead of creating the service in SEGW?