SAP Multichannel Foundation for Utilities and Public Sector: How to Set up Template Mobile UI Application for Local Development

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:

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 :

• Open Eclipse and go to Help -> Install New Software.
• Enter the following URL in the Field “Work with” and download the software as shown below in the snapshot https://tools.hana.ondemand.com/juno for other version of Eclipse, find the respective URLs available at https://tools.hana.ondemand.com

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)

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

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

• Select the SAP Gateway.

• Logon to the system with SAP Logon username.

          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

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

•   Similarly for foundation package:

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:

For foundation:

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.

    b.  Deploy on Server

    Deploy all the 3 application on the tomcat server.

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

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

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.

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.

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

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

• Select Repository type as SAPUI5 ABAP Repository.

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

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

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

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

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

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

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

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

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

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

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