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:
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 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:
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!~
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
- SAP Fiori Element using CAP Model – Introduction
- SAP Fiori Element using CAP Model – List Report App
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:
DevtoberfestInspired 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!~
- SAP Managed Tags:
17 Comments
