Skip to Content

Introduction

As part of SAP Multichannel Foundation for Utilities and Public Sector, we ship template UI applications that show the functionality behind the OData service models for SAP IS-U and SAP CRM for Utilities. These template applications consume both SAP ERP (IS-U) and SAP CRM OData models. SAP CRM is used primarily for account information, contract management, products, marketing permissions and other features.

Some customers want to run SAP Multichannel Foundation for Utilities and Public Sector connected to an SAP IS-U system only, i.e. without integrating it to an SAP CRM system. For this “IS-U only” scenario, necessary OData services are available to achieve that. Delivered template responsive and desktop UIs need to be adapted. In this blog I will take an example of a responsive UI template and demonstrate how it can be adapted for IS-U only scenario.

Main master and transactional data objects from SAP IS-U are listed here:

  • Account (Business Partner)
  • Address Dependent & Independent Phone, E-mail, Fax
  • Contract Account
  • Contract
  • Bank Account
  • Account Address
  • Account Contact
  • Division
  • Country
  • Region
  • PaymentCard
  • PaymentCardType
  • Service Notification
  • Service Order
  • Budget Billing Plan
  • Payment Plan
  • Payment Document
  • Invoice
  • Device
  • Meter Reading and etc.

Sometimes, we get questions about where to find information on OData entities in both service models 😈 . You can always refer to our help documentation to get a full list of entities both on SAP CRM and SAP IS-U. Alternatively, you can see our delivered OData models in transaction SEGW (Gateway Service Builder) – both in the IS-U and the CRM systems. It displays all properties of the OData services including entity properties, navigation links, key attributes, settings on entities like filterable, creatable, updateable and others.

Prerequisites

Tools: Eclipse Kepler with SAP UI5 plugins with Apache Tomcat™ web server, SAP Gateway (GW) with UMCUI501 add-on SP04, SAP IS-U (ERP) with UMCERP01 add-on SP04.

Before you start modifying the responsive UI, you need to make sure that the OData services necessary to run the application are available and configured. Please read chapter 4 in the Admin Guide which describes IS-U only installation scenario.

The services that we need are:

  1. ERP_UTILITIES_UMC – main OData services with Utilities content
  2. ERP_UTILITIES_UMC_PUBLIC_SRV –  OData services exposing anonymous/public services (anonymous meter reading, anonymous payments)
  3. ERP_UTILITIES_UMC_URM – User Request management services needed for user creation
  4. USERMANAGEMENT – OData service for logged user offering features like password change or display user profile
  5. VBI_APPL_DEF_SRV – Visual Business OData service offering retrieval of application customizing used for outages map display
  6. VBI_GEOCODER_SRV – Visual Business OData service exposing address to geo-coordinates transformation for outage map display

Note: if you don’t have outage map display, simply remove the tiles related to outages from main application as well as public application. VBI_APPL_DEF_SRV and VBI_GEOCODER_SRV would not be needed in this case.

Before making any UI changes, perform a smoke test with advanced REST Client or Gateway Client on SAP GW system (for example, try requests like: HTTP GET on ERP_UTILITIES_UMC/$metadata and HTTP GET on ERP_UTILITIES_UMC/Accounts) to see if you get response.

Hint: Prepare your test user in SU01 by having a user with the same names on GW and ERP, and assign a business partner with good test data to this user on ERP.

/wp-content/uploads/2015/05/1_711588.png

Result of the test of the service (you get “200 OK” as response and the data for business partner attached to your user):

/wp-content/uploads/2015/05/2_711589.png

Final prerequisite: download the source code of the UI application from UMCUI501 add-on. You need to download UMCUI5_MOBILE application using Eclipse team provider tool. Download as well public application part and foundation library using the following blog.

I must warn that I’m not going into details about SAP UI5 architecture or programming; as well, I don’t describe how to set up Apache Tomcat™ web server. Please check the resources available to learn more about these technologies, for example, the following SCN community. There is a Getting Started on SAP UI5 blog which you should read.

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. Foundation is just a foundation library of the application and, usually, you don’t need to modify it.

/wp-content/uploads/2015/05/3_711608.png

Setting up IS-U only scenario

As discussed, the UI responsive application consists of three parts: logon (public part), foundation library, and the actual application (UMCUI5_MOBILE).

The UI application is based on MVC pattern – model view controller design pattern. However, separate tiles with the views, model, and controllers are grouped into components. We also decided to group data retrieval and manipulation logic in so called “data providers” instead of a controller. DataProvider is an object that works with data received from  OData calls. Controllers in UI call specific data providers.

Let’s take a look at the structure of a typical component in mobile responsive app:

/wp-content/uploads/2015/05/4_711523.jpg

The foundation has all the functionalities required by both public and private application and has the main base controller and classes which are abstract and are extended by components. Service Wrapper is a connectivity utility that offers generic functions for HTTP read, update, delete, batch requests, and others.

In this blog I will only demonstrate how to adapt the code of the private application UMCUI5_MOBILE, and won’t get into details of how to adapt logon application; but as you will see the same approach can be used.

OK, now let’s start doing JavaScript coding 😆 .

Remark: if you renamed the application to let’s say zumcui5_mobile, you will have to adapt how the application is loaded in WebContent/index.js by replacing umcui5_mobile with zumcui5_mobile:


fnRegisterModules('sap.umc.mobile', "umcui5_mobile", "/sap/bc/ui5_ui5/sap");

As a quick way to set IS-U only, in main UMCUI5_MOBILE, go to WebContent/app_private/DataProvider.js and change the following line of code in method _prepareData:

this.CRM = this._initService(sap.umc.mobile.CONSTANTS.ODATA_SERVICE_CRM, true);

to:

this.CRM = this._initService(sap.umc.mobile.CONSTANTS.ODATA_SERVICE_ERP, true)

Now all requests that were meant for CRM OData model will be routed via ERP OData model. If you don’t like seeing ‘this.CRM’ variable on app_private DataProvider, you can use “Search->File->Replace” feature of Eclipse to replace ‘CRM’ with ‘ERP’.

Let’s test locally the application on Apache Tomcat™ Server to see the effect.

/wp-content/uploads/2015/05/picture_711624.jpg

I suggest opening Web debugger in Google Chrome or any other browser and going through all pages of the application. Check the network communication in the Web debugger to see which requests didn’t work.

By doing a quick test, the following requests were issued by the UI application and received “404 Not Found” error:


ERP_UTILITIES_UMC/Accounts(‘XX’)/BusinessAgreements?$format=json&$expand=ContractAccountBalance,BillToAccountAddress
ERP_UTILITIES_UMC/Accounts('XX')/ContractItems?$format=json&$expand=Premise,Division,Product,BusinessAgreement
ERP_UTILITIES_UMC/Accounts('XX')/CommunicationPermissions?$format=json&$expand=CommunicationChannel,CommunicationPermissionStatus










/wp-content/uploads/2015/05/5_711623.jpg

Obviously, the BusinessAgreements entity needs to be replaced by ContractAccounts, ContractItems by Contracts.  CommunicationPermissions representing market permissions on CRM has no corresponding entity on ERP. So, references to not available OData entities and their structures or attributes need to be replaced.

List of affected tiles in UI:

  1. User Profile
  2. Message Center
  3. Services
  4. Change Services (has to be taken out since it can’t be replaced, UI coding is required to replace this implementation with fast move-in/out EC70 process and corresponding OData entities of ParkedDocument)

Let’s work on the first tile to bring it back to life by performing the following JavaScript code modifications. General guideline: I’m writing the file and a method name, the commented code is the old code that you should be able to find.

1) WebContent/user_profile/model/OnlineDataProvider.js, method _readBusinessAgreements


//new code:
this.CRM.read(this.getAccountPath() + "ContractAccounts", ["$format=json", "$expand=Contracts/Division"], true, {
//this.CRM.read(this.getAccountPath() + "BusinessAgreements", ["$format=json", "$expand=ContractItems/Division"], true, {










2) WebContent/user_profile/model/OnlineDataProvider.js, method _readBusinessAgreement:



//new code:
this.CRM.read(this.getAccountPath() + "ContractAccounts(ContractAccountID=\'" + sBusinessAgreementID + "\')", ["$format=json"], true, {
//this.CRM.read(this.getAccountPath() + "BusinessAgreements(BusinessAgreementID=\'" + sBusinessAgreementID + "\')", ["$format=json"], true, {










After these JavaScript code modifications in OnlineDataProvider.js, please test the application on Apache Tomcat™ local Server 😉 :

/wp-content/uploads/2015/05/5_711647.png

The information about contract accounts started appearing. However, auto-pay and billing address view needs tweaking as well:

1) WebContent/user_profile/view/BillingAddress.controller.js, method _finishEditingBusinessAgreements


if (oBusinessAgreement.ContractAccountID === this.getView().getModel("billingAddress").getProperty("/AgreementNumber")) {
//if (oBusinessAgreement.BusinessAgreementID === this.getView().getModel("billingAddress").getProperty("/AgreementNumber")) {










2) Add the following lines of code to WebContent/user_profile/view/BillingAddress.controller.js


//added
delete oBusinessAgreementCopy.Contracts;
delete oBusinessAgreementCopy.Invoices;
//up to here
this.getDataProvider().addBatchOperation(oBusinessAgreementCopy, batch);










3) AutoPay.view.xml, adjust UI to display ContractAccountID instead of BusinessAgreementID


<Label text="{businessAgreements>ContractAccountID}" class="sapUmcHorizontalBeforeSpacingX1_5" />
<!-- <Label text="{businessAgreements>BusinessAgreementID}" class="sapUmcHorizontalBeforeSpacingX1_5" /> -->










4) AutoPay.controller.js, method _getSelectedPaymentMethod


//new code:
if (sBusinessAgreementID === this.getView().getModel("businessAgreements").getData().results[i].ContractAccountID) {
//if (sBusinessAgreementID === this.getView().getModel("businessAgreements").getData().results[i].BusinessAgreementID) {










5) AutoPay.controller.js, method _saveBusinessAgreement


//new code:
delete oBusinessAgreementCopy.Contracts;
delete oBusinessAgreementCopy.Invoices;
//up to here
this.getDataProvider().addBatchOperation(oBusinessAgreementCopy, batch);










Now, billing address and auto-pay UIs started working 🙂 :

/wp-content/uploads/2015/05/6_711648.png

User Profile tile and views inside this tile work well now. Let’s go through other tiles.

To fix message center by disconnecting reading CRM related data, in WebContent/message_center/model/OnlineDataProvider.js, method _readMessages, comment this line of code:

//this._performCRMBatch(oDeferredCRM);

Finally, the Services tile displays information about premises that the customer has, related contracts, products. This tile is a mashup of CRM and ERP services. We need to change how the data is read.

1) WebContent/services/model/OnlineDataProvider.js, method  _readServices:


this.CRM.read(this.getAccountPath() + "ContractAccounts", ["$format=json", "$expand=Contracts/Premise,Contracts/Division"], true, {
//this.CRM.read(this.getAccountPath() + "Contracts", ["$format=json", "$expand=Premise,Division,Product,ContractAccounts"], true, {










2) WebContent/services/model/DataProvider.js, method  loadServices. Since the way how data is retrieved has changed, the method needs to be rewritten, please replace the whole method with this code 😳 :


loadServices: function(oDelegate) {
  this.oPremises = new sap.ui.model.json.JSONModel();
  var fnCallBack = jQuery.proxy(function(oData) {
    if (oData && oData.results) {
          var i, j, l, iPremiseIndex, bPremiseFound, aContracts, oContractForPremise, oPremiseWithContracts, aContractAccounts;
          aContractAccounts = oData.results;
          var aPremises = [];
          iPremiseIndex = 0;
          for (i=0; i < aContractAccounts.length; i++){
                aContracts = aContractAccounts[i].Contracts.results;
                for (l = 0; l < aContracts.length; l++) {
                    bPremiseFound = false;
                    for (j = 0; j < aPremises.length; j++) {
                          if (aPremises[j].PremiseID === aContracts[l].Premise.PremiseID) {
                              oContractForPremise = sap.umc.mobile.private.app.js.utils.copyObjectProperties(sap.umc.mobile.private.app.js.utils
                              .deleteLocalProperties(aContracts[l]));
                              delete oContractForPremise.Premise;
                              aPremises[l]._contracts.push(oContractForPremise);
                              bPremiseFound = true;
                              break;
                          }
                    }
                    if (bPremiseFound === false) {
                    oPremiseWithContracts = aContracts[l].Premise;
                    oContractForPremise = sap.umc.mobile.private.app.js.utils.copyObjectProperties(sap.umc.mobile.private.app.js.utils
                    .deleteLocalProperties(aContracts[l]));
                    delete oContractForPremise.Premise;
                    oPremiseWithContracts._contracts = [oContractForPremise];
                    oPremiseWithContracts._ID = iPremiseIndex;
                    iPremiseIndex++;
                    aPremises.push(oPremiseWithContracts);
                }
            }
      }
    for(var k = 0; k < aPremises.length; k++){
        aPremises[k]._contracts.reverse();
    }
    // fix default premise with home tiles
    aPremises.reverse();
    this.oPremises.setData(aPremises);
    oDelegate.onPremisesLoaded(this.oPremises);
}
}, this);
this._readServices(fnCallBack);
},










Two other small modifications and we are done:

1) WebContent/services/view/ServiceDetail.controller.js, method  _initializeContractModel:


//modified
//this.getDataProvider().loadBudgetBillingProcedure(oContract.contract.BusinessAgreementID, jQuery.proxy(this._intializeVisibleTabs, this));
this.getDataProvider().loadBudgetBillingProcedure(oContract.contract.ContractAccountID, jQuery.proxy(this._intializeVisibleTabs, this));










2) WebContent/services/view/ServiceDetail.view.xml, UI display modifications to use model correctly, old xml commented out, new in.


<ObjectAttribute
                text="{parts:[ 'contract>/division' , 'contract>/division/Description'], formatter:'sap.umc.mobile.services.js.utils.productFormatter
      <!--  text="{parts:[ 'contract>/division' , 'contract>/contract/Product/Description'], formatter:'sap.umc.mobile.services.js.utils.productFormatter'}" class="sapUmcWhiteTextColor"/> -->










Finally, the services display now works 😉 :

/wp-content/uploads/2015/05/7_711649.png

One tile that needs complete rewriting is the “Manage Services” tile. It needs to be rewritten to adapt to ISU way of how to create move-in/out. We deliver OData entities needed to execute fast move-in/out process as per transaction EC70.

I decided to remove “Manage Services” tile from the application by commenting out the following code in WebContent/home/model/Tiles.js:


//this.addManageService = (function(){
//var oTile = {
// "number": "",
// "numberUnit": "",
// "numberClass": "sapUmcTileNumber sapUmcGreyTextColor",
// "numberUnitClass": "sapUmcTileNumberUnit sapUmcGreyTextColor",
// "info": sap.ui.getCore().getModel("i18n").getProperty("HOME.CHANGE_SERVICE_INFO"),
// "icon": "sap-icon://settings",
// "title": sap.ui.getCore().getModel("i18n").getProperty("HOME.MANAGE_SERVICE")
// };
//  this.TileCollection.push(oTile);
//}).call(this);










Result 🙂 :

/wp-content/uploads/2015/05/10_711716.jpg

That’s it for now. I hope you got the idea on how to create IS-U only UI applications using our templates. Please leave your comments and feedback on this blog.

😆 😈

To report this post you need to login first.

27 Comments

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

  1. G Reddy

    Hi Yevgen Trukhin,

    I have followed the steps and facing a problem  after this step .

    Capture.PNG

    When i have tested the same application in my Eclipse i am encountering a problem.

    Capture1.PNG

    From here i am encountering the problem.

    I will show you the screens where all the paths will be referred.

    Capture2.PNG

    Please help me if you have any idea about this issue.

    Thanks In Advance,

    Prabhanjan

    (0) 
      1. G Reddy

        Hi Yevgen,

        Still i have the same problem. If i execute the application on ABAP server i am encountering problem with CRM issues.

        Thanks,

        Prabhanjan

        (0) 
          1. G Reddy

            Hi Yevgen,

            I have tested standard UMCUI5 Mobile app from Eclipse which i have executed from eclipse on ABAP Server.

            Capture3.PNG

            As this is first checking  CRM_UTILITIES_UMC and validating the error. But in my scenario we do not have CRM. We have configured MCF on ISU Environment.

            Please help me how to resolve this issue.

            Thanks,

            Prabhanjan

            (0) 
            1. Yevgen Trukhin Post author

              Hi Prabhanjan, yes in my blog i didnt describe steps how to fix the public part of the application. But i hope after reading the blog, you should be able to fix it….

              Yevgen

              (0) 
              1. G Reddy

                Hi Yevgen,

                I have a small doubt when we are activating the MCF for Utilities. We have only ISU System and we do not have CRM system. For SAP ISU as well we have gateway installed in the same server. It means SAP ISU System & SAP Gateway System is same in our case. I am in confusion which steps do i need to actiavte.

                Capture5.PNG

                Please help me.

                (0) 
                1. Yevgen Trukhin Post author

                  Prabhanjan, it should be possible to setup MCF in the landscape that you described. Check the guide for IS-U standalone installation. In terms of RFC setup, you will have to use ‘LOCAL’ instead of RFC to point to the same system. This is what i can suggest.

                  (0) 
                  1. G Reddy

                    Hi Yevgen,

                    Thank you Yevgen. Even i have configured the same and while downloading standard UMCUI5 to eclipse and running with ABAP Server ‘CRM_UTILITIES_UMC’ service is executing and from there app is encountering the errors.

                    If i dounloaded the UCMUI5 app into eclipse and made minor changes for ‘CRM_UTILITIES_UMC’ with ‘ERP_UTILITIES_UMC’ we are facing the problem with SAP UI5 libraries between Our eclipse environment and SAP environment.

                    Please let me know how do i need to rectify the above errors.

                    Thanks In Advance,

                    Prabhanjan

                    (0) 
  2. Jayshree Ravi

    Hi Yevgen

    Nice blog

    I have a question on backend functionality

    We have a fairly significant customised backend in ISU and CRM. Also we currently use UCES over Enterprise Portal. We had developed custom code in ISU to fulfill the queries. I would like to reuse these function modules as much as possible

    Where can I get information to understand how to go about  that? Any help would be greatly appreciated

    Jayshree

    (0) 
    1. Yevgen Trukhin Post author

      Hello Jayshree, our OData service model was created using standard SAP APIs (RFCs, BAPIs). You can take a look at this model via this model OData Entities in SAP Multichannel Foundation for Utilities and – SAP Multichannel Foundation for Utilities and Public S…

      We do understand the need to use other APIs or create new OData entities. There are a lot of extension approaches that you can use: you can replace our implementation for a specific OData entity with your own, you can extend the interface of OData entity.

      Described here:

      1) Extending the Interface of an OData Entity Using Custom Fields

      2)SAP Multichannel Foundation for Utilities: Implement Custom Logic for an Existing Entity

      I hope this helps to clarify the direction.

      Best Regards, Yevgen

      (0) 
  3. Zoltan Mike

    Hi Yevgen

    Nice blog!


    We are implementing the MCF SP5 ISU only scenario (used your blog).  Unfortunately the user activation not works correctly. The install guide did not explain about the activation url.


    Can you or everybody send me a valid url example to user activation?


    We customized this url :

    https://server.host:9000/sap/opu/odata/sap/erp_utilities_umc_urm/UserRequestActivationRequestCollection


    So the email contains this url:  (system generated)

    https://server.host:9000/sap/opu/odata/sap/erp_utilities_umc_urm/UserRequestActivationRequestCollection?RequestID=40D915563813694AE1000000C0A80804&ActivationKey=359610556533E9B1424479ED08BA8AEC181274A4&type=3


    After click – Sap sent back this message:

    Operation ‘Query’ not supported for entity type ‘UserRequestActivationRequest’.

    Maybe our URL is not correct. 🙁 or the customizing is wrong.


    Thank you.


    mike

    (0) 
    1. Yevgen Trukhin Post author

      Hi Mike, yes your URL is not correct it seems.The user activation needs to happen via the UI.

      Sample URL:

      server:port/sap/bc/ui5_ui5/sap/UMCUI5_MOBILE/index.html?RequestID=005056AB30BE1EE59B8D284DC6BA3A69&ActivationKey=C66A617050FE107888F98B67E036D55545EEC193&type=3

      You can set the URL in the badi that you can access via customizing IMG Path:  SPRO −> SAP Customizing Implementation Guide −> SAP NetWeaver −> Gateway Service Enablement −> Backend OData                 Channel −> User Self Service Setup −> Define Notification Process for User Request Management:

      Best Regards, Yevgen

      (0) 
      1. Zoltan Mike

        Hi,

        WOW you are very quick!  The new link is OK, working fine.  🙂   The first user created in GW and in ISU too.

        Maybe the official guide need some update. 🙂

          Thank you

        Best Regards, mike

        (0) 
  4. Prince Pasricha

    Hi Yevgen,

    Nice blog!

    I have one question on Move in functionality that MCF offers.

    I would like to know if we can create move in for a new customer who does not have any Business Partner in system. If yes, how we can do that using ERP as standalone scenario.

    Could you please help on this.

    Thank you!

    (0) 
    1. Yevgen Trukhin Post author

      Prince, we don’t have this feature out of box with ERP standalone. We do have move-in/out based on EC70 parked document functionality but no support for new customer scenario. That would need to be done as custom development.

      Yevgen

      (0) 
  5. Suman Biswas

    Hi Yevgen,

    We are trying to implement MCF in our SAP ISU/CRM system. However we have an embedded gateway deployment. The gateway add on’s are activated on ERP and CRM systems.

    I am following the admin guide but little confused on the steps for embedded deployment as the guide assumes we have a gateway hub system. In that case do we have any place where we have the steps?

    For the actions which are mentioned in the gateway hub system in the guide, where do we do those in case of embedded deployment?

    (0) 
    1. Yevgen Trukhin Post author

      Hi Suman, for testing/development/internal usage this setup is ok, but for productive usage I would reconsider.

      Yevgen

      PS you can add me on scn and we can exchange private messages if u have questions.

      (0) 
  6. Parag Aher

    Dear Experts,

     

    I’m new to MCF. I’m done with prerequisites for the same.

    Kindly help me with the list of services we need to activate to make MCF portal run.

     

    Regards,

    Parag

    (0) 

Leave a Reply