Finally I found the time for the “missing part 2” of my blog about the “missing step in the AppBuilder Tutorials” ;-).

As I have shown in part 1 (AppBuilder Tutorials: the missing step!) it is no problem to deploy an AppBuilder application to any http-server. However, chances are high that you have access to some SAP WebAS (any SAP ABAP based system like ERP, CRM, etc.). So, why not using this system‘s web server capabilities instead of Apache or some other http server? Well, let’s do it!

SAP Internet Communication Framework

Nowadays, every SAP ABAP system is shipped with a full blown web server environment. This is accomplished by the so called “Internet Communication Framework” (ICF). For in-depth information about the ICF see

http://help.sap.com/erp2005_ehp_06/helpdata/de/48/d40aca1904154ee10000000a421937/content.htm?frameset=/de/48/d40aca1904154ee10000000a421937/frameset.htm

ICF is a very flexible and powerful framework. It’s impossible to go into detail of every possible aspect in this blog. Let me just show you ONE possible way to achieve our goal, which is to run an AppBuilder application on a real mobile device. Please see part 1 of this blog series on how to deploy your project as a Cordova project. I’m assuming here, that you have deployed your app as described and found the resulting files on your hard drive.

Now, instead of copying the “www” subdirectory to the htdocs directory you can copy it to the respective directory on your ABAP system. Usually an appropriate place for this is:

\usr\sap\[SID]\DVEBMGS[INSTANCE]\

In my case I copied the “www” subdirectory with all files and directories to E:\usr\sap\E02\DVEBMGS00\ and renamed it there to “HelloAB”. Now you have to “tell” the ICF that you have put some files there and whish to access them via http. This can be done by adding a profile parameter.

First go to transaction “RZ10” and then “Goto” –> “Profile values” –> “of a server”. Choose your application server and look for entries of the form “icm/HTTP/file_access_[X]” whereas X can be any number starting from 0. If you can’t find any entries, that’s just fine – if there are any, make a note of the highest X value you’ve found. Then restart transaction “RZ10” and choose the appropriate profile file to add a new parameter (if you don’t know what a profile file is, you might better ask your SAP admin for help. Changing profile files is a dangerous task and can result in a non startable SAP system). In my case I chose the instance profile file E02_DVEBMGS00_S057. Then select “Extended maintenance” and “Change”. Add two new parameters (by hitting the “New-Button”) and name them “icm/HTTP/file_access_[X]”, with X is the number you noted before plus 1 for the first and plus 2 for the second. If you didn’t find any existing file access parameters, start with 0. For the values enter:

PREFIX=/HelloAB/, DOCROOT=[PATH]/HelloAB/, BROWSEDIR=2
PREFIX=/index.html, DOCROOT=[PATH]/HelloAB, DIRINDEX=index.html

(make sure that you enter the path with forward slashes even on a windows system and don’t miss the trailing slashes). In my case the values are: “icm/HTTP/file_access_0” = “PREFIX=/HelloAB/, DOCROOT=E:/usr/sap/E02/DVEBMGS00/HelloAB/, BROWSEDIR=2” and “icm/HTTP/file_access_1” = “PREFIX=/index.html, DOCROOT=E:/usr/sap/E02/DVEBMGS00/HelloAB, DIRINDEX=index.html”. Save AND activate your new profile file version and restart the ICM (Internet Communication Manager: transaction “SMICM” –> “Administration” –> “ICM” –> “Exit Hard” –> “Global”. That’s it! Now you can point your browser to

http[s]://[HOST]:[PORT]/HelloAB/index.html

“HOST” is the host name of your ABAP system and “PORT” the respective http/s port number. If you aren’t sure about this number, have a look at transaction “SMICM” and then “Goto” –> “Services”. In my case I used “http://s057.novo-bc.ch:8000/HelloAB/index.html“.

While this is without doubt quite cool, it isn’t much of an improvement when it comes to saving disk space. It is still necessary to copy the whole application and all libraries (including sapui5) for every single application. Since libraries are meant to be reused by multiple applications, there must be something we can do against this. And it’s simple enough!

Reusing SAPUI5 library

We are now going to install the sapui5 library in a central place and make sure that all applications can use it. For this you can either download the sapui5 evaluation package from SDN (http://scn.sap.com/community/developer-center/front-end) or even simpler just use the version you have already copied with your application: those files can be found in “HelloAB\lib\ui5”. Copy the whole “ui5” directory to your “root” directory (the one in which your “HelloAB” directory is) and rename it to “sapui5”. If you prefer to download the “full evaluation version”, then extract the downloaded files and copy the content of sapui5-static.zip to your “root” directory. Then also rename it to “sapui5”. In either case you have to add another file access profile parameter as follows (increase X by 1 again):

icm/HTTP/file_access_[X] = PREFIX=/sapui5/, DOCROOT=[PATH]/sapui5/, BROWSEDIR=2

In my case I added the following parameter: “icm/HTTP/file_access_2” = “PREFIX=/sapui5/, DOCROOT=E:/usr/sap/E02/DVEBMGS00/sapui5/, BROWSEDIR=2”. Finally adjust the path to the sapui5 lib in your “index.html” file in the “HelloAB” directory:

Before:

<script id='sap-ui-bootstrap' type='text/javascript'
        src='./lib/ui5/resources/sap-ui-core.js'
                        data-sap-ui-preload=''
        data-sap-ui-theme='sap_bluecrystal'
        data-sap-ui-libs='sap.m'>
</script>

After:

<script id='sap-ui-bootstrap' type='text/javascript'
        src='../sapui5/resources/sap-ui-core.js'
                        data-sap-ui-preload=''
        data-sap-ui-theme='sap_bluecrystal'
        data-sap-ui-libs='sap.m'>
</script>

Then restart your ICM again. Now when you are going to deploy a future AppBuilder application, just add two new file access parameters to grant access to the respective application directory and index.html file and adjust the path in the index.html file (and as usually don’t forget to restart your ICM).

So far for part 2. Again, enjoy AppBuilder and be prepared for part 3….

Patrick