How to run the CRM Fiori 1.0 applications 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

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

clipboard1

Step 3. Enter the project repo information.

clipboard2

Step 4. Run it for the first time.

clipboard3

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

clipboard4

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)

clipboard5

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

clipboard6

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.

clipboard7

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

clipboard8

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

clipboard9

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.

clipboard10

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