Skip to Content

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

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-01.png

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 …

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-02a.png

… and here it is in my browser.

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-02b.png

It looks a little bare so I added some pretties …

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-03.png

Problems installing the UI5 Add-on

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

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-04.png

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 …)

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-05.png

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

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-06.png

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.

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-07.pngABAP WorkBench, showing the CRUD structure of the ZDEMOJAM Web Service

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-08.pngAs 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.

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-09.pngAnd 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.

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-10.png

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 …

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-11.png

… and I unpacked the SAP UI5 components into the E:\usr\sap\sapui5 directory on my server to get…..

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-12.png

Looks promising, lets try something a bit trickier…

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-13.png

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

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-14.png

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)

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-15.png

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

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-16.png

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

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-17.png

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 ….

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-18.png

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….

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-19.pngI 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

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-20.png

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.

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-20a.png

And the results after I activated and ran the BSP.

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-21.png

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.

https://s3.amazonaws.com/notes.basissap.com/sdn/abap-ui5-image-22.png

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 !!

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

Part 1

Part 2

Part 3

SAPUI5

http://scn.sap.com/community/developer-center/front-end

Get to Know the UI Development Toolkit for HTML5 (aka SAPUI5)

How to Build a SAP HTML5 Application Using MVC with the SAPUI5 Application Development Tool

SAPLink

code.google.com/p/saplink/

http://saplink.org/

SAPLink plugins (SCN Code Exchange)

cw.sdn.sap.com/cw/groups/saplink-plugins

“http://plugins.saplink.org/

CL_TREX_JSON_SERIALIZER bug fixes

http://scn.sap.com/community/mobile/blog/2012/09/24/serialize-abap-data-into-json-format

thanks

To report this post you need to login first.

10 Comments

You must be Logged on to comment or reply to a post.

  1. Pradyp Parakala

    Gr8 work Martin

    Thnx for the detailed explanation, keep posting more docs on UI5 as it will be more helpful for peers like me in SCN.

    Cheers 😉

    Pradyp

    (0) 
  2. Abhijeet Kulkarni

    Hi Martin,

    This is great stuff. When I wanted to connect to the ABAP backend, I used the JSON adapter of Cesar Martin and wrote a servlet to bypass the CORS. While that works perfectly, this is a much cleaner solution to build Proof of Concept solutions so that the management agrees for the SAP UI5 installation!

    (0) 
  3. Paulo Cesar de Biasi Vantini

    Dear Martin,

    I´ve tried Christian tutorial and I achieved the upload and use of the sapui5 libraries into the BSP MIME repository. He advised me about your tutorial which extends and host the ui5 on the WAS. I got excited but right now I got stuck with the profile parameters. According to the prints below I created it as your tutorial through RZ10:

    /wp-content/uploads/2014/07/m1_507857.png

    Accessing the profile values of a server, it seems like icm/HTTP/file_access_2 is active:

    /wp-content/uploads/2014/07/m2_507858.png

    I restarted the server but it seems like its not finding the path:

    /wp-content/uploads/2014/07/m3_507860.png

    Please, I would like to ask your help and let me know what is wrong since I do not know much about BASIS.

    Is it the profile I chose? Some wrong syntax for the instance parameter ? Do you have a step by step for that ?

    Congratulations for such nice content,

    Thanks a lot!

    (0) 

Leave a Reply