How to Customize the standard MCF package

Special thanks to Trukhin, Yevgen and Arafat, Mohammed Wasim who helped me in writing this blog.

Introduction

This blog explains the steps to be followed to customize Multichannel Foundation for Utilities SAP UI5 template web application. It also explains on how to set up the Eclipse for SAP UI5 ABAP-BSP Repository and how to deploy the SAP UI5 application project on the ABAP Server. The SAP UI5 Repository is technically based on the BSP Repository of the ABAP Server.

Whoever want so customize Multichannel Foundation (MCF) for Utilities SAP UI5 template application.

So, starting with Section one.

Purpose :

Set-up the Eclipse for SAP UI5 ABAP-BSP Repository, deploy a copy of Multichannel Foundation UI5 template application, demonstrate how to modify login pages

Dependencies/Pre-requisites:

Multichannel Foundation for Utilities UMCUI501 component was installed on NetWeaver Gateway server, necessary steps from Admin Guide were executed to installed components UMCERP01/UMCCRM01 on backend SAP ERP and SAP CRM systems
The user needs to have some knowledge of NWDS
Make sure that the software component SAP UI5 TEAM PROVIDER ON 731 (UI5_731) is installed on the 7.31 ABAP backend
Make sure that SAP Note 1684342 is applied in the 7.31 ABAP backend
User should have Developer Access in the backend

To install and run SAPUI5 tools, the following software has to be installed.

Java Runtime environment JRE 1.6 32 bit version (ABAP development tools plugin will need only 32-bit version of JDK)
Operating System : Windows Vista, Windows 7 (32- or 64-Bit)
Download the Eclipse Juno Sr1 Packages from the following link

http://www.eclipse.org/downloads/packages/release/juno/sr1

Extract the downloaded zip file and open eclipse, choose Help–>Install new Software.

Enter the following URL in the Work with field:

https://tools.hana.ondemand.com/juno

Check the following checkboxes:

ABAP Core Development tools (Developer Edition)
Toolkit for HTML5 (GWPA) (Optional)
SAP UI5 ABAP Repository Team Provider (Developer Edition)
UI Development Toolkit for HTML5 (Developer Edition)

In the next step, select Accept and Finish

Finally, restart the Eclipse.

Creation of a Copy of SAP UI5 Template

To check, whether the Installation has been successful, proceed as follows:

For SAP UI5 application development open the Eclipse IDE and choose File > New > Other.

> SAPUI5 Application Development > Application Project. If the installation has been successful, New Application Project wizard opens.

assuming you have connected to your ABAP system and created a SAP UI5 project, you should see something similar to below.

Under SAP UI5 Application Development folder > Select Application Project

Enter Project Name as Z_UMCUI5 as shown below

For the SAPUI5 ABAP repository team provider open the Eclipse IDE and choose File > New > Other…>SAPUI5 Application Development > Application Project. Select the new project and choose Context Menu > Team > Share Project…. If the installation has been successful, SAPUI5 ABAP Repository appears in the list.

Select the ABAP System and enter credentials.

Find the UMCUI5 BSP application and retrieve it into ZUMCUI5 application

Now we copied UMCUI5 as ZUMCUI5 and imported into eclipse, we can proceed with the modification of application.

Once you have imported the project into your eclipse you will be able to see the project as below.

For example, any javascript file or text file i18n.properties can be modified to change SAP delivered text.

Modification of Login Screens

Now we would like to modify login pages. They are located under sap/public/bc/ui2 in MIME repository on the gateway server. Open ABAP Workbench and enter transaction SE80. Click on MIME repository. Navigate to sap/public/bc/ui2. Create a new folder as zumcui5_logon. In txn se38 run the txn BSP_UPDATE_MIMEREPOS and export all the files to the folder by choosing Export to Disk option.

In second section, login into your ABAP system and go to Txn SE80. Click on MIME Repository and navigate to

SAP –> PUBLIC –> UI2.

Create a new folder as zumcui5 and all the sub folders (css,i18n etc.,) similar to umcui5 folder. Copy all the files by clicking on Import MIME object.

You should have the folder structure as shown below.

Under zumcui5_logon we can change the text file i18n folder > i18n_en.properties to modify company name and logo.

Go to Repository Browser under ZUMCUI5 (custom folder which you have created) under MIMEs folder open login.properties file and change the template path, in my case.

To finish the procedure, we need to tell newly created ZUMCUI5 Application to use login pages from zumcui5_logon folder. In order to do this, select BSP Application ZUMCUI5 in MIME repository and modify the login.properties file to point to zumcui5_logon folder.

Double click on login.properties

Change the path to zumcui5_logon instead of umcui5_logon so that template points to the customized login page.

Modify template_login.html, so that application can load CSS from customized folder.

And finally test your application.