Introduction

This document is intended for developers who want to install SAP UI5 template mobile application through Eclipse IDE on their local development environment.


SAP Multichannel Foundation for Utilities and Public Sector delivers an UI responsive template mobile application which helps the user to manage all aspects of their utility accounts and view important information from their utility company anywhere and anytime.


Template mobile UI application consists of three packages:

  • public/logon
  • foundation
  • private (UMCUI5_MOBILE)


You can download all these applications from UMCUI501 add-on deployed on SAP Gateway.


Private:

This application is a mobile application which consumes OData services from MCF CRM and ERP add-ons. You can download this BSP application through Eclipse SAP UI5 team provider tool.

Conventional package name:  sap.umc.mobile


Public:

This application offers a logon page and provides features like user maintenance. Please use the report BSP_UPDATE_MIMEREPOS to download from MIME repository public application which is not loaded to SAP Gateway as a BSP application.

Conventional package name:  sap.umc.mobile.public


Foundation:

This application is used as a foundation library for mobile applications of Multichannel foundation. Please use the report BSP_UPDATE_MIMEREPOS to download from MIME repository foundation application which is not loaded to SAP Gateway as a BSP application.

Conventional package name:  sap.umc.mobile.foundation


All three application packages should be created as per their given conventional name in Eclipse.

NOTE: Customers usually don’t need to modify the foundation library.


Find below the structure of SAP MCF public and foundation packages in MIME repository:


/wp-content/uploads/2015/10/1_821027.png


This blog is sequenced as follows:


  1. Prerequisites

          a. Eclipse installed with Apache Tomcat

          b. SAPUI5 tools plugins added to Eclipse

  2.  Installation

          a.  Creating SAPUI5 Template

          b.  Downloading application packages (public, private and foundation) from BSP and MIME repositories

  3.  Deployment

          a. Configuration changes at eclipse

          b. Deploy on server and test

          c. Configuration changes before deployment on NW GW

          d. Deploy to NW GW

  4.  References


Prerequisites

  • User must have access to SAP Gateway from where the application is downloaded.
  • Java runtime environment JRE version 1.6 or higher, 32-Bit or 64-Bit.
  • Eclipse Juno or any latest version http://www.eclipse.org/downloads/packages/release/
  • Operating System: Windows OS (XP, Vista, 7 or 8/8.1)

Downloading and Installing SAP UI5 Tools :


/wp-content/uploads/2015/10/2_821029.png


Installation

1. Creating SAP UI5 application projects: we have to create SAP UI5 application projects for all the packages (private, public and foundation).


        a. Private application (sap.umc.mobile)

      • Open a new SAP UI5 project (File-> New -> Other)

Capture.PNG

      • Create the application with the conventional package name and uncheck the box with option “Create an Initial View”

Capture4.PNG

      • Now right click on the project and click on Team -> Share

/wp-content/uploads/2015/10/5_821065.png

/wp-content/uploads/2015/10/6_821066.png

      • Select the SAP Gateway.

/wp-content/uploads/2015/10/7_821659.png

      • Logon to the system with SAP Logon username.

/wp-content/uploads/2015/10/8_821068.png

/wp-content/uploads/2015/10/9_821069.png

/wp-content/uploads/2015/10/10_821070.png

          b. Public and foundation: create empty SAPUI5 application projects for public and foundation package and follow the steps below:

      • Download application package (public and foundation) from MIME repository.
      • Logon to SAP Gateway, go to transaction “SE38” and download the application package as shown below.

              Repository name                                          :  BSP_UPDATE_MIMEREPOS

              Mime Repository Path for foundation Package:  /SAP/PUBLIC/BC/UI2/umcui5_mobile_foundation

              Mime Repository Path for Public Package      :  /SAP/PUBLIC/BC/UI2/umcui5_mobile_logon



/wp-content/uploads/2015/10/11_821071.png


/wp-content/uploads/2015/10/12_821075.png


      • Make sure you export to an empty directory on the disk.


/wp-content/uploads/2015/10/13_821076.png


/wp-content/uploads/2015/10/14_821077.png


        •   Similarly for foundation package:


/wp-content/uploads/2015/10/15_821084.png


Now, manually copy and paste the downloaded package from the local folder to the Web Content folder of the respective SAPUI5 Template project created in Eclipse as shown below.

For public package:

/wp-content/uploads/2015/10/16_821699.png

/wp-content/uploads/2015/10/17_821086.png


For foundation:


/wp-content/uploads/2015/10/18_821700.png



/wp-content/uploads/2015/10/19_821088.png



Deployment:

  1. Configuration Changes:
    • Check context root for project. It should be same as mentioned in index_local.js.
    • Right click project and click the properties attribute and check for “Web Project Settings” and adjust the context root field if required.


/wp-content/uploads/2015/10/20_821089.png


    b.  Deploy on Server

   

    Deploy all the 3 application on the tomcat server.Capture23.PNG


And now you can see your application ready for development on the below URL:

http://localhost:8080/sap.umc.mobile/index_local.html

/wp-content/uploads/2015/10/21_821093.png




/wp-content/uploads/2015/10/22_821094.png


c. Configuration changes before deployment on NW GW


i. Change the application name to Z*(created by you) in the below files :


private:

      WebContent\Index.html                      — change application path for css file location

      WebContent\Index.js                          —  change application path for registering AppComponent


foundation:

      WebContent\base\js\Constant.js        — change the constant APPLICATION_LOCATION for location on logOff


ii. login.properties file must be uploaded manually on the NW GW ( path as shown in below snapshot ) from the private application path WebContent\public\login.properties. Make sure that the path of the login files( ex: /sap/public/bc/ui2/zumcui5_mobile_logon/template_msg.html) in login.properties of private application is pointing to the BSP Application path.


http://s29.postimg.org/5is3ktn5j/image.png


iii. Logon Data must be configured in NW GW for generating index.html script based on the configured parameter.


      • Go to transaction sicf and configure as shown below in the snapshot.

    

          http://s1.postimg.org/dg70tb71b/image.png


    

      • Go to tab Error Pages and click on the Configuration button.


http://s19.postimg.org/w4osinuwj/image.png



d. Deploy to NW GW

Once the development is completed, the package has to be deployed back to the SAP Gateway. For private application, team provider can be used to upload the application, for public and foundation the report mentioned above should be used for upload to MIME repository.


For Private

/wp-content/uploads/2015/10/5_821065.png

      • Select Repository type as SAPUI5 ABAP Repository.

/wp-content/uploads/2015/10/6_821066.png

      • Configure the connection settings to SAP system where you want to deploy your application.

/wp-content/uploads/2015/10/7_821659.png

      • Logon screen to SAP sysem is displayed. Provide your credentials.

/wp-content/uploads/2015/10/8_821068.png

      • Now, you are provided with two options. First, you can check out any BSP application from the connected SAP system. Otherwise you can go ahead and create your own BSP Application.
      • BSP application name must be prefixed by a letter Z. And now you can browse the package where you want to save your application.

23.PNG

      • Onclick of Next , you will be navigated to a screen where you can select any transport request.

/wp-content/uploads/2015/10/40_839235.png

      • Once click Finish , you will get SAP UI5 library validation pop up message. Click OK.

25PNG.PNG

      • Now Submit the changes to the BSP application which you have created.

/wp-content/uploads/2015/10/41_839942.png

      • You will be navigated to screen showing the changes which is going to get submitted. You can uncheck the file , if you don’t want to submit it.

30.PNG

      • Now you can verify your changes in the NW GW.

http://s19.postimg.org/eglt5plbn/image.png

      • For public and foundation the report mentioned above should be used for upload to MIME repository.

http://s19.postimg.org/7c91tskdv/image.png

        • Now you can see your application up and running on the browser successfully.

     http://s19.postimg.org/5xnlmpcmr/image.png

Thanks to Muhammad Naneh and Yevgen Trukhin for helping in publishing the blog.

References


http://scn.sap.com/community/utilities/blog/2014/06/05/how-to-customize-the-standard-mcf-package


To report this post you need to login first.

15 Comments

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

  1. Balint Szebenyi

    It does not work for me, I see the following error message in the tomcat log.

    WARNING: An error occured when accessing the /META-INF/ui5.properties! Reason: The /META-INF/ui5.properties could not be found!

    nov. 14, 2015 11:17:08 DE com.sap.ui5.resource.ResourceServlet init

    WARNING: Could not find property “x-sap-ui5-BuildTimestamp” in ui5.properties or MANIFEST.MF or the value is not valid! Using System.currentTimeMillis as cachebuster timestamp.

    nov. 14, 2015 11:17:53 DE com.sap.ui5.resource.ResourceUtil loadProperties

    WARNING: An error occured when accessing the /META-INF/ui5.properties! Reason: The /META-INF/ui5.properties could not be found!

    nov. 14, 2015 11:17:53 DE com.sap.ui5.resource.ResourceServlet init

    WARNING: Could not find property “x-sap-ui5-BuildTimestamp” in ui5.properties or MANIFEST.MF or the value is not valid! Using System.currentTimeMillis as cachebuster timestamp.

    Do you have any idea where I have gone wrong in the process?

    In Chrome I see the following file to be unobtainable by sap-ui-core.js:

    http://localhost:8080/sap.umc.mobile.logon/resources/sap-ui-version.json

    (0) 
      1. Balint Szebenyi

        It seems to have been a problem of not proper copy pasting the files I guess. Now the screen opens some minor graphics errors are visible (background missing) and a lot of 404 errors come back. The logon itself does not work as the submitLoginCredentials function is undefined. Can you point me where to look? This app works almost all right on the server after we have spent a lot of time with it, but those modifications included only hiding some of the controls. Now that we download it and try to make it run for the individual developers we are stopped by these errors.

        2015-11-16 15_41_33-SAP Multichannel Foundation for Utilities Public.png

        (0) 
        1. Yevgen Trukhin

          It seems you are testing the public applicaiton/login pages. Unfortunately, while you can run them on the tomcat for testing of layout, you can’t test some of features like login because the html pages are tightly coupled with NW ABAP server and require test on NW GW for full functionality. The errors that i see in the log mean that OData services are not visible to the client.

          Yevgen

          (0) 
          1. Balint Szebenyi

            Ohh 🙂 It does not really serve our purpose then 🙂 It would have been nice to develop collaboratively and avoid conflicts by using a version tracking system instead of using eclipse’s submit/retrieve.

            Is there a way then to test the application itself with online data? It seems to me that offline data is not really available.

            I thought that if we can make the app work nicely in a separated environment then we would be close to pack it together and deploy it. Can you maybe help us with how you would deploy this app (I think this will be done via the fiori client – as the demo app suggests in the play store) with an article like this?

            (0) 
            1. Varun Pattiah Sankaralingam Post author

              Yes, its not possible to test both public and private package collaboratively. But you can test it separately.  Also its possible to test the application with online data by deploying the private package sap.umc.mobile as mentioned above and having created a user at NW GW to get access to all ODATA services.

              Also Offline data is available in the package but in order to test we manually set the Demo mode to true in the file Dataprovider.js of foundation package.

              Also we are planning to write a blog for how to deploy mobile package which may clarify your doubts further. By the way, we use cordova plugin to deploy our mobile application. 

              (0) 
              1. Balint Szebenyi

                I would be happy even with separate testing, but how would the inner part know which user is logged in without actually logging in? (The login works when the code is located on the GW/backend combo, that’s how we have been developing up until now.)

                I am really looking forward to your blog post 🙂 🙂 🙂 🙂 We are planning to use that, we know the concept but the fine details are to be discovered, that’s why it would be of great help.

                Many thanks!

                (0) 
        2. Narpreet Singh

          simply go to the SICF T code and activate your service for erp_utilities_umc_urm.

          Activate this service only if SAP-ISU is your leading system.

          Cheers

          (0) 
  2. Jayshree Ravi

    Thanks for the post. I am about to start a POC for MCF and have a question.

    Do we have to use JRE 1.6 and Eclipse 32 bit only? Will 64 bit not work considering most desktops/laptops nowadays are 64 bit? Even downloading JRE 1.6 is not recommended on the website. Is it related with any server versions?

    FYI – We will connect it to Netweaver Gateway 7.4, ECC EhP5 / CRM EhP 1 (Netweaver 7.02). Does that make a  difference?

    Please advise

    Jayshree

    (0) 
    1. Balint Szebenyi

      I have been using Eclipse MARS 64 bit, JRE 1.8, and a bit older ISU (IS-U only scenario) with a more recent GW. I don’t think that it will make a difference. Anyway you may install an older eclipse in parallel any time.

      (0) 
      1. Jayshree Ravi

        Thanks for your reply. Have you by any chance tried it out?  How will we know if it works as it might error only in some instances or would it give an error straightaway?

        Jayshree

        (0) 
    2. Yevgen Trukhin

      Hi Jayshree, in the past there was a limitation on plugin for team provider which is used to upload sap ui5 code as BSP application to NW GW. It used to be limited to 32 bit eclipse. It seems now it is possible to use 64 bit as i see from documentation: SAP Development Tools for Eclipse so you could try with 64 bit version. ABAP system versions should be ok.

      Yevgen

      (0) 
      1. Jayshree Ravi

        Thanks Yevgen

        Do you know if anyone has tried it yet? Whilst I do want to go with 64 bit and the latest JRE version, it is important that I don’t jeopardise the trial.

        Jayshree

        (0) 

Leave a Reply