A Simple UI5 application running against ABAP without the SAP UI5 Add-on

subtitled I don’t need no stinkin’ plug-in (or Maintenance Certificate, or Solution Manager, or….)

My motivation was to learn about UI5 by doing it. However, since I’m currently resting between engagements, I was unable to (legally) access a licensed SAP system. This blog (and the associated demojam entry in this years Melbourne SAP Inside Track) shows how I resolved the challenges I faced in getting UI5 to work with an old release of the ABAP WAS Developer Edition. After reading this, you will be able to deploy UI5 Applications on an ABAP system where you are unable to (or don’t want to) install the ABAP UI5 Add-on.

Typical situations where this may apply include

• a legacy system (such as a 4.6 / 4.7 system) which is not compatible with the UI5 Add-On components
• a supported Netweaver release that has not been maintained to the level required to support the UI5 Add-On components (SMP Note 1941653)
• an SAP Developer Edition (such as the NW702 SP06 release) without a maintenance certificate

Develop the front end using Eclipse

I started with the Christian Jianelli blog series on Building a CRUD Application with SAPUI5 and ICF REST/JSON Service. First things first, I installed the latest Eclipse IDE for Java EE and the SAPUI5 Application Development Tools. Christian’s blog series gave me the starting material for a UI5 interface, which I tested from within Eclipse on my laptop. Here’s my version of the project in Eclipse …

… and here it is in my browser.

It looks a little bare so I added some pretties …

Problems installing the UI5 Add-on

OK, we have the ‘presentation layer’ working, now to install the UI5 Add-on into my ABAP system…

No Maintenance certificates on a Developer system (NW702 SP06), what about on a licensed system (I know, I know, but we have ways and means …)

As it turns out, cheats never prosper ????

The licensed system is no good to me without a Solution Manger system; In short, deploying SAPUI5 on an ABAP server implies (at the very least)

• That the system has the appropriate levels of other support packs (see note),
• That the system has a Maintenance Certificate so you can load the UI5 Add-on via he SAINT transaction,
• and that you can access the appropriate STACK XML (or hack a version of it) from Solution Manager

I was annoyed now. I decided I was going to get this to work with the most constrained version of ABAP I could get my hands on (currently a Developer Edition of NW702 SP06), but first ……

Time for a think

Meanwhile, lets build our Web Service

In the meantime, I wrote a simple CRUD class, based on the one inSAPUI5 and ICF REST/JSON Service Part 1 and Building a CRUD Application with SAPUI5 and ICF REST/JSON Service Part 2.

You can build it yourself following Christian’s blogs, or you can grab my SAP Link nuggets for the JSON fix and for the Web Service itself at the end of this blog. Please note that my versions of these are different from Christian’s examples,

a) because I wanted to extend his example and

b) because there were some syntax and functional differences between the ABAP releases we were developing on.

ABAP WorkBench, showing the CRUD structure of the ZDEMOJAM Web Service

As Christian suggested, I tested https://nw702.basissap.com/sap/bc/zdemojam using the Postman extension for Chrome. Note the extra field compared to Christian’s example code.

And here are the results, in table ZTB_DEMOJAM (again with the extra field…)

Now to integrate the ABAP Web Service with our UI5 front-end

But there is a problem accessing the ZDEMOJAM web service when I run the UI5 pages from within Eclipse.

It’s not a 404 Resource not found, it’s a 401 or 403 Authorisation Issue. For far too much information about this problem and how to get around it, google CORS SAP UI5 but essentially, the issue is that we have an application deployed on my local Apache Tomcat web-server that is calling a web resource running on another computer; the two reside on different domains or (if I ran an Apache Tomcat web server on my SAP server) different ports. There are ways around this, but I wanted to make this as simple yet as secure as possible.

Getting the UI5 front-end to run on our ABAP Server

Of course, the ABAP system is also a web server (that’s what the W and the S in WAS stand for). So … courtesy of the instance profile parameter icm/HTTP/file_access_2 I made a directory on my ABAP server available on the web …

… and I unpacked the SAP UI5 components into the E:usrsapsapui5 directory on my server to get…..

Looks promising, lets try something a bit trickier…

DOH !! The short story is that something happens when deploying SAP UI5 on Apache Tomcat, that doesn’t occur when deploying it via an ABAP WAS

Time for another think

PS Decent Whisky needs to be at least old enough to buy itself a drink

OK, what about OpenUI5 ?

According to What is OpenUI5 / SAPUI5 ?, there is very little functional difference between SAPUI5 and OpenUI5, and given I am not a paying SAP customer, it has the Open Source license that I should be using anyway. So I deployed OpenUI5 to my ABAP Server, this time using instance profile parameter icm/HTTP/file_access_1 (bet you never saw that coming)

I downloaded the OpenUI5 library and unpacked it into the E:usrsapopenui5 directory on my server and now we get…..

A different colour, but I can live with that. Even better, we also get …

Success – UI5 on an ABAP Server

Now I can just move the demojam3 application from my Eclipse workspace to a directory accessible via the ICM parameters, and I get a working UI5 application with an ABAP back end. Actually, the first time failed miserably, but then I changed where the index.html was looking for the OpenUI5 resources..