End-to-End Development of Fiori App using ABAP RAP, Fiori Elements and VS Code

[kschoudary]

Introduction:

In this blog post, I would like to share my recent experiences in successfully building an application using ABAP Restful Programming Model (RAP) and Fiori Elements (UI5) using Visual Studio Code (VS Code)  as my local IDE in an On-Premise S/4HANA 2020 System.

There are several blogs, videos and tutorials that cover an individual topic, but I could not find a single blog that lists all the required steps for an End-to-End Development Scenario of a Fiori App, particularly using VS Code as IDE.

So, I am sharing the steps I performed for this End-to-End Development Scenario (Full stack Development) of a Fiori App and publishing it to Fiori Launchpad (FLP).

In view of this, I am listing here the necessary steps in sequence. The details on how to do is well documented in the references mentioned at the end of this blog.

This is based on the S/4HANA 2020 edition and ABAP RAP which has advanced features. I have tried earlier using Personal edition of Web-IDE and noticed a lot has changed now that made the development of Applications using Fiori Elements is much easier and simpler.

Systems and Tools Used:

• SAP System:
  
  
  
  • Product: S4HANA ON PREMISE, Release 2020, Initial Shipment Stack
  
  
  
  


• Developer Tools:
  
  
  
  • Eclipse (Version: 2020-09 (4.17.0))
  
  
  • ABAP Development Tools / ADT (Version 3.14) installed in Eclipse
  
  
  • Visual Studio Code (VS Code) (Version 1.51.1)
  
  
  
  

I followed the OpenSAP Course - Building Apps with the ABAP RESTful Application Programming Model and few blogs and videos that I mentioned under references that helped me to complete this development.

I have completed all the tutorials in this ABAP RAP course on SAP test system (Thanks to the OpenSAP Team for providing such a detailed documentation on Github). Then I have used the Week-4 tutorial to create this app in our On-Premise S/4HANA 2020 system. I used existing database tables MARA and MCHB for the report in place of the Travel and Booking tables used in the tutorial, as I have a requirement to list Products and Batches.

This particular report is developed as Read-Only, so no actions/buttons are required and hence no behavior definition is created here. Behavior definition is required to perform CUD (Create/Update/Delete) operations using actions/buttons in the report. I will add a separate blog later for CUD operations.

The total development is split into 5 steps.

Step-1: Prepare OData services (Eclipse / ADT) (see Reference#1)

1. Identify Database (DB) Tables (Example: MARA, MCHB)


2. Create CDS Views in Eclipse / ADT(Since we are using existing DB tables, the model is built as ‘ UnManaged’ )
   
   
   
   • Create View Entity for Material (Root) - ZI_MARA_U_KSC
   
   
   • Create View Entity for Batches (Child) - ZI_MCHB_U_KSC
   
   
   • Activate both the views
   
   
   • Preview data (F8)
   
   
   • Add the Composition Associations to both the above Views
   
   
   
   Add the composition association that points from the Material entity to the Batches entity and the association that points from the child entity Batches to the parent entity Material
   
   
   
   • Create Behavior Definition for Interface View of Material (Optional, for Buttons)
   
   
   • Create control structures and mappings (Optional, for Buttons)
   
   
   • Create Behavior Implementation class for Material Entity (Optional, for Buttons)
   
   
   • Activate above objects (Optional, for Buttons)
   
   
   • Testing the BO with EML (Optional, for Buttons)
   
   
   
   
   • Create Projection View for Material (Root) - ZC_MARA_U_KSC
   
   
   • Create Projection View for Batches (Child) - ZC_MCHB_U_KSC
   
   
   • Activate both the views
   
   
   • Preview data (F8)
   
   
   
   


3. Create ODATA Service in Eclipse / ADT
   
   
   
   • Create Service Definition for Material Projection View - ZUI_MARA_U_02_KSC
   
   
   • Create Service Binding for the above - ZUI_MARA_U_02_KSC
   
   
   
   


4. Preview data from ODATA Service in Eclipse / ADT (This will open in default browser)
   
   
   
   • Preview Metadata
   
   
   • Preview Materials
   
   
   • Preview Batches
   
   
   
   

Step-2: Prepare UI annotations (Eclipse / ADT) (see Reference#1)

1. Create CDS Metadata Views in Eclipse / ADT

• 
  
  
  
  • Create Metadata Extension View for Material Projection View- ZC_MARA_U_KSC
  
  
  • Create Metadata Extension View for Batches Projection View - ZC_MCHB_U_KSC
  
  
  
  

Step-3: Build UI applications (VS Code IDE)  (see Reference#2 and 3)

1. Generate Fiori Application using template on above ODATA service in VS Code
   
   
   
   • Choose Template - List Report with Object Page
   
   
   • Wait for object to be generated as it may take a couple of minutes
   
   
   
   


2. Preview App from VS Code
   
   
   
   • The app will be opened in the default browser
   
   
   • Enter User Id & Password
   
   
   • Click on GO button to see the results.
   
   
   • Click on a Product, to see the Object page with details for this Product. This page lists all the Batches for this Product (This meets the requirement to Display List of Products and their Batches)
   
   
   
   


3. Build App in VS Code
   
   
   
   • Open a terminal
   
   
   • Navigate to the root folder
   
   
   • Enter the following two commands one after the other
     
     
     
     • npm install (This will download and unzip all required dependencies)
     
     
     • npx ui5 build -a (This will create a folder ‘dist’ that can be loaded into ABAP in the next step)
     
     
     
     
   
   
   
   

Step-4: Upload to ABAP Repository (see Reference#4)

1. Use the ABAP report /UI5/UI5_REPOSITORY_LOAD to deploy the content of the ‘dist’ folder
   
   
   
   • Enter the Application name - ZKSC_POC_UI5A01 (the app name should be within 15 characters. It took me a while to figure out this!)
   
   
   • Follow the prompts
   
   
   
   


2. Review BSP App using Tcode: SE80 or in Eclipse / ADT under BSP Library/BSP Applications and make sure its status is Active

 Step-5: Publish to FLP

1. Configure Fiori tile in the Launchpad
   
   
   
   • Choose or Create a new Semantic Object (From IMG or use Trn.Code: /UI2/SEMOBJ)
   
   
   • Choose a Category or Create new Category in FLP
   
   
   • Add Tile and fill in
     
     
     
     • Title, Subtitle, Keywords, Icon and Information : xxx
     
     
     • Semantic Object (custom one created above)
     
     
     • Action (display)
     
     
     
     
   
   
   • Add Mappings and fill in
     
     
     
     • Semantic Object (custom one created above)
     
     
     • Action (display)
     
     
     • Application Type: SAPUI5 Fiori App
     
     
     • Title: xxx
     
     
     • URL: /sap/bc/ui5_ui5/sap/ZKSC_POC_UI5A01/   (uploaded BSP Application name)
     
     
     • Transaction: Zksc.zkscpocbdrrep01 (AppComponent name from Component.js file of the app>
     
     
     
     
   
   
   • Choose a Group or Create new Group
   
   
   • Add the above tile to this Group
   
   
   
   


2. Work with Security team to make sure the required roles are assigned for the selected Category and Group to the user (This is common practice in Enterprises for developers to work with Security team for developing/maintaining and assignment of Roles)


3. Test Fiori Tile. This should display the List of Products and Batch details.

Conclusion:

The purpose of this blog is to help developers, particularly using VS Code as their IDE, to develop a Fiori App from start to finish from a single source.

Please feel free to provide comments and feed back.

References:

1. OpenSAP Course - Building Apps with the ABAP RESTful Application Programming Model, Week-4 - DEALING WITH EXISTING CODE - https://github.com/SAP-samples/abap-platform-rap-opensap/tree/main/week4


2. SAP Tutorial – Create a List Report Object Page App with SAP Fiori Tools - https://developers.sap.com/group.fiori-tools-lrop.html


3. SAP Blog - Develop SAP UI5 Apps and deploy to ABAP repository using Visual Studio Code by SaiNithesh Gajula                                 - https://blogs.sap.com/2020/07/18/develop-sap-ui5-apps-using-visual-studio-code/


4. SAP Blog - How to Get Your Preferred JavaScript IDE Ready for SAPUI5 Development by Matthias Schmalz from SAP, and look under - Deployment to the SAPUI5 ABAP Repository
   - https://blogs.sap.com/2019/11/29/how-to-get-your-preferred-javascript-ide-ready-for-sapui5-developme...