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
- Problems installing the UI5 Add-on
- Time for a think
- Meanwhile, lets build our Web Service
- Now to integrate the ABAP Web Service with our UI5 front-end
- Getting the UI5 front-end to run on our ABAP Server
- Time for another think
- OK, what about OpenUI5 ?
- Success – UI5 on an ABAP Server
- The Holy Grail – Integrating the lot into the ABAP Work Bench …
- … without installing anything on the Operating System
- Appendix – Download Source Code
- Appendix – References
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.
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.
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..
and I got ….
The Holy Grail – Integrating the lot into the ABAP Work Bench …
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 🙂
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 !!
Appendix – Download Source Code
Download the zipped Eclipse project source code for demojam1, demojam2 and demojam3 (31K)
Download the SAPLink nugget containing the fix required for JSON processing.(111K)
Download the SAPLink nugget for the ZDEMOJAM Web Service (20K)
Appendix – References
Building a CRUD Application with SAPUI5 and ICF REST/JSON Service
SAPLink plugins (SCN Code Exchange)
CL_TREX_JSON_SERIALIZER bug fixes