How to run the CRM My Opportunities Fiori application in WebIDE

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.

Step 3. Enter the project repo information.

Step 4. Run it for the first time.

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

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)

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

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.

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

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

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.

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"
    }
  ]
}