Skip to Content
Technical Articles
Author's profile photo Jhodel Cailan

SAP Fiori Elements using CAP Model – Introduction

In the past weeks, I’ve been working on a demo project about SAP Fiori Element using CAP Model. It all started when I was exploring the capabilities of the new SAP Fiori Tools to help aid in SAP Fiori Element app development. Then I realized that there are not that many references of SAP Fiori Element app that uses CAP Model — I guess this is not surprising as CAP is relatively a new programming model. So I decided to come up with a comprehensive example that showcases a real-world scenario.

The demo project is patterned after the SAP Tutorial — Create a List Report Object Page App with SAP Fiori Tools, but using the North Wind Service data model. I enjoyed developing this demo app, and I must say, the CAP framework exceeded my expectations. I hope you will find this demo project useful.

As a teaser, here’s the screenshot of the List Report page:

 

Blog Post Series


 

The Goal: No-Code Challenge


Before starting this project, I was looking for inspiration or objective. Eventually, I came up with the idea that will add challenge and purpose — that is the app shouldn’t be having any code at all. That means there will be no JavaScript codes at all for both frontend and backend applications. Yes, you read that right!

The short explanation about this challenge is that when you know how to code in JavaScript, it is easy to jump into coding without digging deep enough with the capabilities provided by the framework.

Let’s get into a more detailed explanation by first discussing SAP Fiori Elements. In the official documentation of SAP Fiori Elements extension, it is mentioned there that only use app extensions if the desired behavior cannot be produced by annotations and setting the manifest file. So for this reason, I avoided getting into app extensions.

Secondly, for the CAP Model, I have avoided resorting to using custom handlers, which is also having to code in JavaScript. This means that I have relied upon pure CDS capabilities and managed scenarios. I must say that there are times that I thought it can’t be done without JavaScript coding, but with some further digging and perseverance, it proved to be that it can be done with just pure CDS. If the goal was not set at the beginning, I probably had coded the behavior in JavaScript.

Here’s the screenshot of the Object Page:

 

The Demo Project


The demo project is a mono repo that hosts both the SAP Fiori Element List Report app (generated by SAP Fiori Tools) and CAP-based backend service.

The repository can be accessed through the GitHub repository below:

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

Please refer to the README.md file on how to install and test the app.

Here’s the screenshot of the Object Page showing the Monthly Revenue Bar Chart:

Devtoberfest

Inspired by the Devtoberfest 2020 event, I have turned this demo project as an opensource demo project where anybody is welcome to contribute for any scenario or behavior that is still not catered.

It can be a contribution that is riding along with the no-code challenge or expanding in other areas like Fiori Element API Extension scenarios together with CAP Model backend service.

 

Closing


I hope that this demo project will help inspire you in exploring more on the rich capabilities that are native to both Fiori Element and CAP Model. It’s quite amazing that without a single line of JavaScript code, I was able to create a decent looking web application using these two frameworks.

Try it yourself and I hope you will have fun building your own app (like I did!) using these frameworks.

The fun doesn’t stop here. In fact, we are just getting started. In my next blog post, I will try to decompose the project into smaller pieces so that it will be easy for consumers who are new to Fiori Element or CAP Model (or both) to understand and replicate the behavior used in the app. So stay tuned!

Update:

SAP Fiori Element using CAP Model – List Report App

 

 

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

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

Assigned Tags

      17 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo sachin patil
      sachin patil

      Thanks for this wonderful post. The information in this article is very helpful to me. Thanks a lot for sharing.

      Best Regards

      Sachin Patil

      Author's profile photo Jhodel Cailan
      Jhodel Cailan
      Blog Post Author

      You're welcome sachin patil ! And thanks for your comment!

      Author's profile photo Mio Yasutake
      Mio Yasutake

      Hi Jhodel,

       

      Thanks for your great post as always.

      This annotation sample really helps.  It includes many features I wanted to try.

       

      Regards,

      Mio

      Author's profile photo Jhodel Cailan
      Jhodel Cailan
      Blog Post Author

      You're welcome Mio Yasutake ! And thanks for the positive comment!

      Happy no-coding! 🙂

      Author's profile photo Juanjo Gersol Ortega
      Juanjo Gersol Ortega

      Hi Jhodel,

       

      Your project has also been of great help to me.

       

      Thank you very much!

      Author's profile photo Jhodel Cailan
      Jhodel Cailan
      Blog Post Author

      You're welcome Juanjo Gersol Ortega ! I'm glad that you find it helpful!

      Author's profile photo Pierre Dominique
      Pierre Dominique

      Another great blog post! Thanks again for sharing this Jhodel, finding the right annotation and the right syntax can be tricky so this example will probably help many developers.

      Author's profile photo Jhodel Cailan
      Jhodel Cailan
      Blog Post Author

      Thanks Pierre Dominique for the wonderful comment!

      You're spot on, annotations can be tricky and that's how I find it as well during my journey. Also, add to the equation the vast resources using to ABAP CDS that is not directly applicable to CAP CDS. 🙂

      Author's profile photo tummagunta chaitanya
      tummagunta chaitanya

      Hi Jhodel,

      Really helpful post. I am from ABAP background and learning SAP UI5(JavaScript). The point you mentioned that without javascript and annotations drawn my attention towards CAP model, may be I will start my learning with your project.

      Thanks again for the wonderful post.

      Author's profile photo Jhodel Cailan
      Jhodel Cailan
      Blog Post Author

      Hi tummagunta chaitanya - thanks for your comment! Sure - and have fun learning!

      Author's profile photo Venu Ravipati
      Venu Ravipati

      Thanks for sharing this Jhodel Cailan.

      Good to see how CAP and Fiori tools come together to easily developing enterprise grade Apps.

      BR,
      Venu

      Author's profile photo Jhodel Cailan
      Jhodel Cailan
      Blog Post Author

      You're welcome Venu Ravipati ! And thanks for your comment!

      Author's profile photo Ioana Stefania Santimbrean
      Ioana Stefania Santimbrean

      Thank you so much for this blog post! I finally manage to understand better how annotations work 🙂 Very much appreciated!

      Kind regards,

      Stefania

      Author's profile photo Jhodel Cailan
      Jhodel Cailan
      Blog Post Author

      Thanks for your comment Ioana Stefania Santimbrean !

      Glad to know that it helped you!

      Cheers,

      Jhodel

      Author's profile photo Hieu Ngo Xuan
      Hieu Ngo Xuan

      Hi Jhodel Cailan

      Thank you so much for awesome blog post! I have watched your tutorial.

      I have a question about develop UI app for CAP project. Instead of use config for UI by xml, Im now using annotation from cds model, like this:

      And here is structure of project

      I put UI app into “app” directory” and service in “srv” directory.

      As you see Im using another way, So i wonder if by approach annotation directly from this CDS model for UI:

      • can we develop more complex interfaces later?
      • Can more custom or make anything element UI  like xml as you?
      • What are the limitations of my and your approach?

      I’ve just done it, so it really takes a right direction to avoid wasting time. Thank’s you very much!

       

      Kind regards,

      Hieu

      Author's profile photo Jhodel Cailan
      Jhodel Cailan
      Blog Post Author

      Thanks for your comment Hieu Ngo Xuan !

      can we develop more complex interfaces later?

      Yes

      Can more custom or make anything element UI  like xml as you?

      Yes

      What are the limitations of my and your approach?

      There are no limitations on either of the approach. Think of it this way, there are 2 teams from SAP side namely CAP Team and the Fiori Element Team. The CAP Team introduced an approach they think you should use in order for you to modularize your backend and frontend code within one CAP project -- and this is the approach you are using. While Fiori Element team has their own approach of starting your UI5/Fiori Element project independent of the backend service you are using, and this is the approach that has always been there even before CAP.

      At the end of the day, it just a matter of preference and development standards or practices that needs to be followed within your development team. In practice, I prefer to have the frontend and backend projects separate to keep things consistent with how we do it in the ABAP stack.

      Author's profile photo Hieu Ngo Xuan
      Hieu Ngo Xuan

      Hi Jhodel Cailan,

      Many thanks for your enthusiasm!

      Maybe I'll implement the interface the way I'm doing, I think the CAP will support this well, and our application is simply neatly contained in the "app" directory, connect via Approuter. Anyway many thanks for your very clear answer. I will continue to move forward in the direction of what I am doing, with the convenience and disadvantages that I will share above so that we have more perspectives on the development of an application.

      Kind regards,

      Hieu