UI5 in ABAP Cloud (without RAP or Fiori Elements)

I wanted to create a UI5 App without RAP for a mobile use-case. There is an open-source project called abap2UI5 which offers this functionality (Qudos to the maintainers).

The cloud installation was more complicated than I expected.

After doing the “full install” which required pulling the core and front-end repositories, I got stuck with a CORS issue.

Installation notes

This assumes you have ABAPgit (in eclipse) and have Visual Studio Code installed. I won't repeat all the instructions just the additional parts that weren’t explicitly covered.

Create a new (short) package and link Repo

Create a new ABAP Package (keep the name short) I ran into 30 character limit and had to relink it. Always use PREFIX for the folder logic.

ABAPGit Repo link in ADT

I needed to force the activation of some of the components.

Deploying the front-end to ABAP Cloud

Since ADT abapGit doesn’t support importing of UI5 apps (BSPs) directly, you need to deploy the front-end via VS Code (using SAP Fiori Tools extension).

Download the front-end app

There is a separate repository for the front-end app, for ABAP Cloud we want to use the Cloud V2 branch:

Clone the cloud_v2 branch onto your local machine and install node dependancies:

git clone --branch cloud_v2 --single-branch https://github.com/abap2UI5/frontend.git cloud_v2 2>&1

Update line 19 of the manifest.json file (this is what was causing the UCON error).

"dataSources": {
       "http": {
         "uri": "/sap/bc/http/sap/z2ui5",
         "type": "JSON"
       }
     },

Open the application info using Fiori Tools extension:

Add a deployment configuration (which points to your ABAP Cloud or S/4HANA Cloud System):

This image shows a package name which was too long, keep it short.

Add a Fiori Launchpad configuration too, this will add the relevant descriptors for linking the application to a specific role, use names that suit your specific use case.

Then deploy the application:

When trying to run the “base” URL of the HTTP Service, I also saw that the UI5 libraries loading had issues:

What I did was leverage the user exit that the framework provides and change the source:

Changed config source to ui5.sap.com

Added the Sample Libraries

I then used git and installed the Samples and Controls examples to explore the capabilities. When you open the base HTTP Service URL (provided by HTTP Service you created earlier) you are shown applications:

Default ABAP2UI5 HTTP Page

Business User (not developer) Access

Running the HTTP service works because you have the developer role, if you want to provide access (in production) to business users, you need to set up an IAM App, Business Catalog and a tile with intent navigation. The end result will be a tile to access the UI5 application:

Create a Launchpad App Descriptor Item (LADI)

Create descriptor and add the Navugation parameters (which relate to your specific application you want to show in the tile).

When trying to save I got asyntax error, use the Open With -> Source Editor to edit it directly (the id does not allow lower case):

Add the navigation properties, which provides details on which abap2ui5 application to start!

Navigation properties which indicate which app to “start”

Create IAM App

Create a new IAM App and include the HTTP service.

Add the LADI from above and publish the IAM locally.

Add App to a new Business Catalog

Now link the IAM App to a Business Catalog and publish locally.

Add to a Business Role

It is then possible to add the business catalog to a custom role in the ABAP Launchpad:

Create a space and page and add the tile so the user can access it.

Benefits of Building Server-Side Apps

Abap2UI5 inverts traditional UI5 development. Instead of a complex frontend SPA that consumes OData, the ABAP server generates both the view and the data on each roundtrip.

Get Warren Eiserman’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

The benefits include:

• Everything lives in one ABAP Class (business rules, validation, navigation). The framework handles all the plumbing. Side-effects and state transitions are expressed in ordinary ABAP
• No Frontend-Backend contract to maintain. No OData service definitions and annotations required.
• Leverage AI to build applications and build using clean core principles.

Conclusion

Abap2UI5 is an open-source project that can deliver tangible benefits across both on-premise, ABAP Cloud and S/4HANA Public Cloud environments. Build applications quicker with fewer moving parts.