I ran into some problem running the CRM My Opportunities application in WebIDE earlier, my understanding is that this application was built in the pre-WebIDE days, a bit of tinkering is needed. I was able to get it to work in the end, and I’d like to share my personal findings with the community in case others may have the same need.

What you’ll need:

– Access to WebIDE

– Access to CRM My Opportunities code repository

– Access to gateway system

– Access to fine green tea 🙂

Step 1. Launch WebIDE.

Step 2. Go to menu File -> Git -> Clone Repository.

Image [2].png

Step 3. Enter the project repo information.

Image [4].png

Step 4. Run it for the first time.

Image [6].png

Step 5. Choose noShellIndex.html as the default entry path then click OK. (a run configuration will be created automatically)

Image.png

The app won’t start, if you take a look at the Chrome developer tool console, there’s a jQuery is not defined error which prevents app from launching.

Step 6. Add the neo-app.json file to the root directory of the project. (see the final version of the neo-app.json content at the bottom of this post)

Image [7].png

Step 7. Run it again, you’ll now be able to open My Opportunities app.

Image [5].png

Next, we’ll create a extension project out the My Opportunities app we cloned in our WebIDE workspace, what’s the advantage over create the extension project out of a remote resource? Well, you’ll have both the standard application and the extension application in the same workspace, and also, you can play around with the standard application, change a thing or two for experiment, and your extended app will pick up the changes made in the standard application right away, sounds good? Alright, let’s continue.

Step 8. There’s actually a neo-app.json existed already when we first cloned the app, but it does not really works, that’s why we created our own. In order to create a extension project out it, we can’t have two neo-app.json file, that’s why in this step, what we will need to do is to rename this file to something the system won’t be able to recognize.

Image [8].png

Step 9. Now, go to menu File -> New -> Extension Project.

Image [3].png

Step 10. Select the webapp folder as the original application destination.

Image [9].png

Step 11. Again, we’ll need to update the neo-app.json file of the extended app, so that you can connect it to your gateway system, and also, to eliminate the library.js not found error you may encounter.

Image [10].png

Once that’s done, you’re good to go, happy coding 🙂


{
  "routes": [
    {
      "path": "/sap/opu/odata",
      "wattUsage": "odata_abap",
      "target": {
        "type": "destination",
        "name": "your_gateway_name",
        "entryPath": "/sap/opu/odata"
      },
      "description": "your_gateway_description"
    },
    {
      "path": "/src/main/webapp/resources/",
      "target": {
        "type": "service",
        "name": "sapui5",
        "entryPath": "/resources"
      },
      "description": "SAPUI5 Resources"
    },
    {
      "path": "/src/main/webapp/resources",
      "target": {
        "type": "application",
        "name": "cuscrmlibreuse",
        "preferLocal": true
      },
      "description": "Reuse Library"
    }
  ]
}
To report this post you need to login first.

13 Comments

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

  1. Jeremy Good

    Hi Ji – thank you for sharing the details of your lessons learned!

    I presume this is all on-premise Fiori, so I’m curious if you find a different app extension experience with the SAP Fiori, cloud edition?

    (0) 
    1. Ji Wu Post author

      Greetings Mr. Good, unfortunately I haven’t got the chance to get my hands on Fiori cloud edition, I’ll definitely come and share my two cents on it if I do 🙂

      (0) 
      1. Jeremy Good

        I think you’ll appreciate that easy access to the original application code and extension capability with Web IDE:  SAP Fiori, Cloud Edition  (you can explore the My Opportunities demo app with SAP backend data in less than 1 minute and opening Web IDE for extension tests with the companion source code app in approximately 5 clicks of a mouse).  All this before the water boils for your cup of tea 😉

        (0) 
  2. Emmanuel Dacosta

    Hello Ji

    How do you export the source code of the appli in your GIT repo ?

    When I access directly the UI5 repo and download the source code, I do not have the same directory tree. (For example, i do not have the webapp folder).

    Regards and happy new year

    Emmanuel

    (0) 
    1. Ji Wu Post author

      Hello Emmanuel, happy new year to you. Fortunately I dont have to export anything, there’s a My Opportunities app source code git repo on our internal server, I just simply cloned it 😀

      (0) 
  3. Vivek Sharma

    Hello Ji,

    Thanks for the post, this was very helpfull in developing an extension app for Opportunity. I however am facing the same issue when launching the app from the fiori launch pad. From the Web IDE the Opportunity extension app works fine , but when the same is deployed on the fiori launchpad, it does not work, and gives the below error –

    Error: failed to load ‘sap/cus/crm/lib/reuse/library.js’ from /sap/bc/ui5_ui5/ui2/ushell/resources/sap/cus/crm/lib/reuse/library.js: 404 – NOT FOUND

    Any idea what would be the issue and resolution here ?

    Thanks,

    Vivek

    (0) 
    1. Ji Wu Post author

      Hello Vivek,

      I never run into that issue, can’t think of a reason off the top of my head, probably need some debugging in order to find out the root cause. Sorry, I couldn’t be more helpful.

      (0) 
  4. Vivek Sharma

    Hello Ji,

    Thanks for your response. I actually debugged standard code and found the below issue for Appointments application. It is the same issue that I mentioned above.

    In the method below, the value of sPath is ” /sap/bc/ui5_ui5/sap/CRM_MYCAL”

    Note that “CRM_MYCAL” is in capital letters, if it had been “crm_mycal”, it would have successfully registered and worked fine.

    (function() {

      var sPath = jQuery.sap.getModulePath(“cus.crm.mycalendar”);

      if (sPath.toLowerCase().indexOf(“crm_mycal”) !== -1) {

      if (sPath.lastIndexOf(“/”) !== sPath.length – 1) {

      sPath += “/”;

      }

      jQuery.sap.registerModulePath(“sap.cus.crm.lib.reuse”,

      sPath + “../crm_lib_reuse/sap/cus/crm/lib/reuse”);

      }

    }());

    So now the question is, why does jQuery.sap.getModulePath(“cus.crm.mycalendar”) return “/sap/bc/ui5_ui5/sap/CRM_MYCAL” and NOT “/sap/bc/ui5_ui5/sap/crm_mycal


    Can you please throw some light where can I check this ?

    Thanks,

    Vivek

    (0) 
    1. Ji Wu Post author

      Hello Vivek,

      I checked one of my colleague, he’s saying that (upper case) has something to do with the backend configuration, that’s how it’s configured in the backend.

      (0) 
      1. Vivek Sharma

        Thanks Ji, for your response. Not sure where this in the backend, but as a workaround I am registering the below library.js file in my custom Component.

        jQuery.sap.registerModulePath(“sap.cus.crm.lib.reuse”,

          sPath + “../crm_lib_reuse/sap/cus/crm/lib/reuse”);

        This has resolved my issue, but would be still interesting to know where is it configured in the backend, as this issue is only for appointments and not for opportunities.

        If you have an idea on it, please do share.

        Thanks,

        Vivek

        (0) 
        1. Ji Wu Post author

          Hello Vivek,

          I think this is the place:

          gateway system -> tcode LPD_CUST -> search for UICRM001 -> My Appointments:

          /wp-content/uploads/2016/03/config_898328.png

          (0) 

Leave a Reply