SAP Fiori Elements using RAP Model

[jhodel18]

About 2.5 years ago when I published a blog post about SAP Fiori Elements using CAP Model. Since then, I've been doing projects that make use of CAP framework almost exclusively, but not until recently when I started using RAP for official projects. On that note, I thought that it would be good to finally create my own RAP sample project using the same formula I used in my SAP Fiori Elements using CAP Model sample project -- hence, this is what this blog post is all about!

Here's a screenshot of the Fiori Elements App using Flexible Column Layout:

 

 

 

The Goal: No-Code Challenge

---

Like in the CAP version, the goal is the same -- create an application that relies only on pure CDS and Annotations, and no ABAP codes at all (or JavaScript for the UI side). The main idea is to avoid any unnecessary custom logic and use the standard functionalities of RAP and Fiori Elements as much as possible.

 

 

The Demo Project

---

The demo project is available in BTP ABAP Trial under the package ZRFES (RAP FE Samples) or if you have your own BTP ABAP instance you can install it using the repository below:

https://github.com/jcailan/rap-fe-samples

 

ABAP Project

 

Steps

• First of all, you need to have the abapGit plugin installed in your ADT


• Create a package called ZRFES


• Link repository https://github.com/jcailan/rap-fe-samples


• Pull the source codes and then Activate the ABAP objects


• Publish the service bindings ZUI_PRODUCTS_RS_O2 and ZUI_PRODUCTS_RS_O4


• Lastly, generate data by executing class ZCL_DATA_GENERATOR_RS

 

Service Binding Preview

If you use the Preview function of the Service Binding ZUI_PRODUCTS_RS_O4, you will notice that the column chart is not available, this is because the annotations needed for this to work are not supported by ABAP CDS.

 

Fiori Element App with Local Annotations

But if I add the missing annotations using local annotations within the Fiori Element app itself, the problem is fixed.

 

If you are curious to know how I fixed it, I've added the generated Fiori Element app in the same repository, with local annotations that fixed the chart problem.

 

 

Closing

---

Using the RAP model, I was able to recreate the same functionalities of my CAP+FE app except only for the Chart Facet. Therefore, as an OData Service framework, CAP and RAP are both capable in terms of the functionalities used so far, however, CAP has shown superiority when it comes to the supported Fiori Elements annotations -- but I consider this a minor setback since there's nothing a local annotation could not fix.

 

 

 

~~~~~~~~~~~~~~~~

Appreciate it if you have any comments, suggestions, or questions. Cheers!~