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 http://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:\usr\sap\sapui5 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:\usr\sap\openui5 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..

<script src="/openui5/runtime/resources/sap-ui-core.js".

and I got ....

The Holy Grail - Integrating the lot into the ABAP Work Bench ...

But the definitive running version of the code, te UI5 Javascript that makes up the web-page, is not easily accessible to our ABAP developer. And it would be nice to have just one place to go to manage the code. And if this one place is accessible from within the SAP GUI, the developer can leverage all the code management facilities that ABAP provides.

So lets turn our Eclipse Project into a BSP....

I created a BSP Application called ZDEMOJAM_UI5 and added a page with flow logic called index.html. I completely replaced the generated code with the code from the index.html of my demojam3 Eclipse project.

Remember the change on line 7 <script src="/openui5/runtime/resources/sap-ui-core.js".

which is required to point the BSP index.html at the OpenUI5 library and resources.

Using the ABAP report BSP_UPDATE_MIMEREPOS, I loaded everything from the WebContent folder for the demojam3 Eclipse project into my BSP application as MIMEs...

Back in the ABAP WorkBench, you can see how the structure of folders and files in the MIMEs repository for ZDEMOJAM_UI5 reflect those from my demojam3 Eclipse project. To save confusion, consider deleting the META-INF and WEB-INF sub-folders and the index.html file from the MIMEs folder, but do not delete any other folders or their contents.

And the results after I activated and ran the BSP.

The big difference between this and the equivalent steps in Building a CRUD Application with SAPUI5 and ICF REST/JSON Service. is that I didn't have to load the UI5 libraries into the BSP. You only need to change the <script src="/openui5/runtime/resources/sap-ui-core.js" in the index.html to change the OpenUI5 library that this BSP uses.

... without installing anything on the Operating System

One last trick.: If I can't access the operating system or the SAP Profile Parameters to install the UI5 libraries, I can use someone else's The downside is that I am at the mercy of the owner of the domain I load the libraries from (in this case SAP). The upside of using the libraries directly from the OpenUI5 site is that I am always using the latest version of the libraries.

Since the demojam is being held in a casino Hotel, I modified the output to suit. I leave that as an exercise for the budding UI5 Developer

Summary

This completes the implementation of a UI5 Application, calling a legacy ABAP back-end.

No SAP Add-ons, so no disruption or Change Control required to start developing;
No operating system modifications required (although I do recommend you use your own copy of the OpenUI5 library);
Develop the database processing in ABAP,
Develop the front end in Eclipse, then
Deploying and running the combined code using standard ABAP tools (SE80 and / or BSP_UPDATE_MIMEREPOS), and
The final application can be managed using standard ABAP tools and controls
(Version Management, Change Management, Transport Management),and
you can have a consistent look and feel for all your applications, from R3 4.6 right through to Hana Enterprise Cloud.

A quick update - At the airport on Saturday, demojam is tomorrow, and I'm passing time cleaning up some of the rubbish in my bookmarks and my documentation. And I found a reference to a Thomas Jung blog titled ABAP Freak Show - jQuery for BSP. UI5 is based on jQuery. So there's not much new under the sun at all !!