- Develop a UI5/Fiori Application on top of RAP Service
Recently I was trying to create a Full Stack application using UI5 Technology on top of the RAP( Restful ABAP) and while I was going through this journey, recorded the steps and thought to share with you all who are probably beginners for the topic.
In this blog, I have referred to a series of video tutorials which you can find on my YouTube channel (https://www.youtube.com/c/SomnathPaul-CreativeProgramming, and here I am introducing each video with a brief of what I intend to create.
I downloaded Eclipse ADT from https://tools.eu1.hana.ondemand.com and of course, had already a Trial account to start with.
Now what? Integrating my Eclipse with ABAP on cloud service to create my first ABAP cloud project and create a ‘Hello World’ program.
For more details, you can check these two videos:
Step 2: Explore the Managed Model
After Hello World, wanted to create something more and hence created a simple Transactional Application (Sales Order Demo) using a Managed Framework which can abstract all the complicated CRUD operations and of course, focused on creating a business object model with VDM, added annotations to it and get my application ready for Testing with a preview mode. A nice testing client that gets auto-generated with the help of underlined annotations, cool!
For more details:
- Business Object (Sales Order App) with CRUD using Managed Model Video
Step 3: Building up a Fiori Application using Fiori Elements
Now my backend is ready and that even supports CRUD operations, so now a good time to create the front-end client using Fiori. SAP has made this just a piece of cake and within a minute or two (actually took a little more time for me to find the steps initially 😉 ) but yes, could successfully create my Fiori Application using Web IDE on top of the RAP model.
**Web IDE was available for Trail Users when I recorded my steps though.
More details here:
- Building up a Fiori Application (in WebIDE) using the RAP Service – Video
Step 3: Explore the Unmanaged Model
So far, this journey was cool and got some confidence about the topic but let’s do even more!
So started exploring on Unmanaged Model where CRUD operation I will manage not the Framework. As in the real world, applications are not simple ones. Not always a Greenfield implementation that I will do there will be some brownfield part also!
So let us start finding out how to create an unmanaged model that will handle all my CRUD operations (of course my responsibility becomes more now, I need to write my own codes to handle that out). That is great, let us do that.
So created a Travel and Booking application and built my backend business object model. Added annotations to it, then separated with metadata extensions, and of course, now things become more challenging but was good fun to explore on this.
Here are the steps I recorded:
- Creating Travel & Booking Business Object with Unmanaged Model Video
- Error Handling with Unmanaged approach Video
- Enable CRUD Capabilities for Travel and Booking App – (Unmanaged) – Video
Testing of my work been done so far with the Preview option and it was good fun to check all the CRUD functionalities that I built with the custom logic.
Step 5: Drafting
Now thought to explore the Drafting Capabilities, which I did earlier with the BOPF model but how different this would be in the ABAP on Cloud project, was quite excited to know.
Detailed steps are here:
Step 6: Testing WebAPI in Postman
In step 3, I showed how to do a Fiori Application with Fiori Elements, which is definitely a piece of cake that SAP has made!
But I wanted to do it in a hard way! 😉
Therefore, I thought to remove my annotation first from my backend model and wanted to create every UI element of my own. I know a bad decision but lets’ do it!
So I created a WebAPI and now stuck with Testing my Model 🙁
As no more, my preview tool is there. Hmmm, what to do now; let’s try testing in the POSTMAN tool. However, oAuth protected service cannot be tested with a basic authentication approach we need a JWT token for this.
To know more about the steps:
- Build Web API and get this Tested in POSTMAN – Video
Step 7: Let’s Learn APPROUTER now
The intention was to create a freestyle UI5 application but that was not an easy job for me, honestly. As somehow, I managed to test the CRUD operations using POSTMAN with the bearer token but how I can manage while handling the same with my custom UI5 application!
APPROUTER did the tricks and this NODE JS application managed all the required routing and get the token from XSUAA, cool. Let’s build a small HTML application and test the same.
How to do that?
Here is the detailed step I recorded:
- Understanding APPROUTER and build a simple HTML Application – Video
Step 8:Let’s create UI5 Application
All set, APPROUTER did the magic by handling the Authentication part and my silly and stupid HTML application is now able to retrieve data from the backend RAP model!!
That is exciting!
So let’s head over to this UI5 App development. Web IDE has gone (am a poor Trial user), let’s do that in Business Application Studio which is more powerful, and future IDE.
No, changed my mind, Let’s create in VS CODE my favorite. Anyway, I had no intention to start with any given template but to do things more from scratch.
Recorded steps are here:
- Build up SAP UI5 Application using VS CODE and APPROUTER on Web API – Video
Step 9: Local Development
It was great fun so far but quite annoying doing development locally my decision was bad 🙁
As each time I make some changes, I need to deploy the code to the cloud to test my application. Can I do something by running this application locally?
Yes possible, by running my APPROUTER locally! That is cool!
More steps are here:
- Trying UI5 development offline by running APPROUTER Locally – Video
Step 10: ABAP Code exit / Virtual Element
This is, of course, an optional step but thought to add a virtual element to my RAP model.
- ABAP Code Exit / Virtual Element for Travel and Booking Object – Video
Step 11: UI5 Routing (Using Factory Template Binding)
Navigation is an indispensable part of an application and when I have Travel & Related Booking entity available so obviously need to enable the routing to make my application look really an application.
- Adding Routing to my custom UI5 Application built on Web API (using Factory Template Binding ) – Video
Step 12: CRUD Operation with the smart controls
My application now looks like a report, let’s make this transactional. Let us now add the CRUD operation to my application.
Fluctuating mind and lazy also so thought back to use my original Travel and Booking Model which had all the UI annotations attached. As without UI annotations, I had to work even hard to handle all my F4 helps for the smart UI controls that I wanted to use now. So switch over quickly to that service and let’s focus on the CRUD operation which is now my prime focus.
Here is the recorded step:
- Enabling CRUD operation in this custom UI5 Application using smart controls (Smart Form / & Smart Field) – Video
Let us begin something new… let us create a bot yes of course using SAP CAI and integrate it to my app, How cool is that?
Here are the steps:…………
I must mention a blog that I referred to at times and implemented the concepts in my learning journey. Here is that one:
Conclusion: This is just a beginning and a long way to go and can’t be concluded right away! However, from a blog perspective, the steps I recorded was only for the beginners who have an appetite to learn this newest technology about RAP concepts and started exploring. My try was just to help them out and will be happy to know if it does really.
So no infrastructure issue just download eclipse ADT, create a Trial User Account, and VS Code (optional), that is it!
Thanks for watching and share your feedback, as that is equally important. Also not just watching but implement it also else of no use 🙂
- BR, Somnath