Tool To Design Custom Ui5 Apps

In the last openSAP course SAP Fiori Overview: Design, Develop and Deploy, one of the topics there is building SAP Fiori Apps using SAP Fiori Elements which helps speed up the development of SAP Fiori Apps with very minimum code (or no code at all) needed. The speed of development using SAP Fiori Elements is increased further with the help of SAP Fiori Tools. SAP Fiori Tools is available in both SAP Business Application Studio and Visual Studio Code as an extension plugin. It became generally available since the second half of June 2020.

I think SAP Fiori Tools is really cool, and if you haven't tried it yet, then I suggest going through this tutorial — Create a List Report Object Page App with SAP Fiori Tools. It is still very new and currently geared towards supporting the development of SAP Fiori Apps using SAP Fiori Elements. You might be asking, but what if I'm developing a SAPUI5 Freestyle App? Can I still use this tool? These are the questions that I had in mind, so I dig into the inner workings of the generated project and easily found out that you can definitely use the features it has for generic SAPUI5 development.

In this blog post, I will be showing the important features or tooling support provided by SAP Fiori Tools that can be used for generic SAPUI5 Freestyle App development.

Prerequisites

SAP Business Application Studio
Visual Studio Code with SAP Fiori Tools extension installed

UI5 Tooling

SAP Fiori Tools is basically a suite of tools for frontend development, and one of the tools that make SAP Fiori Tools awesome is the UI5 Tooling. You might be new to this UI5 Tooling (like I am), so I suggest that you watch this 1-hour video showcase — The UI5 Tooling – a modern CLI-based development experience!

Whenever I do frontend development, I always use a local IDE. And with my local IDE, I have a number of setups for frontend development including having a local SAPUI5 runtime. Now, with the help of UI5 Tooling, a lot of this setup is simplified and made even better in terms of development experience.

Here are the features that I will put a focus on this blog post:

Local hosting of SAPUI5 runtime (for fast loading UI5 libraries)
Proxy for backend OData Service (no need to turn off browser security to bypass CORS)

It's worth noting here as well, that UI5 Tooling is already in version 2, and this is already being used by SAP Fiori Tools. So if you are new to UI5 Tooling, then be aware that there are significant changes between versions 1 and 2. During my journey of digging for materials (blog posts) relating to UI5 Tooling, they are mainly from version 1 wherein I run into some issues, and while trying to solve them I came to the conclusion that I might as well just pick up from version 2. Hence, I wrote this blog post to share what I was able to pick up from version 2.

Generate Application using SAP Fiori Tools

The tool behind this is the Yeoman Generator. I won't be going into detail on how to use this tool because the assumption is you've already used this tool before. But just in case this is your first time, then head into the tutorial below to learn how to use the tool:

Create a List Report Object Page App with SAP Fiori Tools

Since we are targetting to deploy this app to an ABAP system, then make sure that when you generate the template up, you select the OData service Gateway Sample Basic. All ABAP system should have this OData Service and the URL should be:

          <hostname>/sap/opu/odata/IWBEP/GWSAMPLE_BASIC

If the service is not accessible, that means that the service is not activated yet, so make sure that it is activated first before you proceed with the next steps.

You can refer to the generated project which is available in the link below:

https://github.com/jcailan/cap-samples/tree/blog-fiori-tools-base

Note:

The hostname for the backend ABAP system in this repo is set to a dummy value — sample.host.com:8000. If you want to make use of this repo, you need to do a find and replace operation at project level to replace this dummy hostname with your own system's hostname.

You may want to test the generated app by running the command below:

          > npm run start-mock

And you should get the following results:

Note that the generated app at this point is an SAP Fiori Element template, which is expected. The objective of this blog post is to use this template as a base for working with SAPUI5 freestyle app. Hopefully, the future updates of SAP Fiori Tools, they will provide Yeoman Generator templates for SAPUI5 Freestyle App that is using UI5 Tooling 2.0. I tried the SAPUI5 Freestyle template in SAP Business Application Studio, but unfortunately, it didn't allow me to click on the "Next" button and I was stuck there at the wizard.

SAPUI5 Freestyle App

The next step is to work your way into building your own SAPUI5 Freestyle App. Just replace the template in the webapp folder with the implementation of your freestyle app. For this demo, I just simply made use of the UI5 List control to show the list of Sales Order from our backend OData Service.

Test the app once again and you will see a simple UI5 page:

This is just to showcase that the generated SAP Fiori Element template has now been used for the SAPUI5 freestyle app, and as you can see from the screenshot above, the data listed is coming from the backend ABAP system.

You can refer to below project for the converted Fiori Element template to SAPUI5 Freestyle App:

https://github.com/jcailan/cap-samples/tree/blog-fiori-tools

Now that we have achieved our goal, let's dig in next to the features that make this tool awesome!

Inspect the Project Template

1. Let's inspect the capability of serving the SAPUI5 runtime locally from our machine. Look for the ui5-local.yaml file and you will see the configuration for the SAPUI5 runtime.

          framework:   name: SAPUI5   version: "1.80.1"   libraries:     - name: sap.f     - name: sap.m     - name: sap.suite.ui.generic.template     - name: sap.ui.comp     - name: sap.ui.core     - name: sap.ui.generic.app     - name: sap.ui.table     - name: sap.ui.unified     - name: sap.ushell     - name: themelib_sap_fiori_3

This is really handy because the tool is already taking care of handling the library download and also the management of version for you. You can just simply change the value of the version field to make the SAPUI5 version that you want to work with. Also, note that only the libraries mentioned in this config will be downloaded which is good for optimization. Just remember to update this config to add/remove libraries you need/don't need on your app.

2. Next are the custom middlewares delivered by SAP Fiori Tools. First off, let's set the fiori-tools-proxy middleware, this is used to proxy the backend service from our app so that we don't have to change the dataSources configuration from the manifest.json file to make it point to the absolute path of the backend service. The same deployment configuration can now be used for local development and testing. This is a really cool feature!

          server:   customMiddleware:     - name: fiori-tools-proxy       afterMiddleware: compression       configuration:         backend:           - path: /sap             url: http://sample.host.com:8000     - name: fiori-tools-appreload       afterMiddleware: compression       configuration:         port: 35729         path: webapp

Lastly, is the fiori-tools-apppreload middleware, this is used to listen for any changes in the project files and force a reload of the browser so that the app is automatically updated. While I didn't think that I would need this kind of feature, this is very much welcome addition for a better development experience when working with SAPUI5. This feature will feel natural to you if you have backend development experience using nodemon.

That's it!

Closing

In my opinion, this is a great evolution of the SAPUI5 development experience. SAPUI5 developers now have the chance to be more aligned with how other frontend/web developers are doing their work. This is really going back to the roots of what it means to be a web developer.

And so far, the main focus of this blog post was to showcase what's in store for local development in SAPUI5 using SAP Fiori Tools. Another aspect is deployment to the ABAP system which can be the topic in my next blog post.

SAP Fiori Tools – Deploy to ABAP server

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

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