How to fix a SAPUI5 demo app

                SAPUI5 provide some key demo apps that allow us to see some features of its technology and give us a base for our work. That’s really cool of SAP, but you may find sometimes doesn’t work. It’s not usual to see that, but in some cases there are problems like the ones related with the import mode that doesn’t allow our project to run. 

Let’s see how to deal with this.

STEP 1: DOWNLOADING A SAPUI5 DEMO APP

Enter SAPUI5 SDK home page, select ‘Demo Apps’ in the toolbar.

There are about 20 apps available. You can just see them by clicking on their names or you can download them, this way you can obtain the code and modify them.

We have selected the ‘Shopping Cart’ app because it’s the one we have problems with. To download it you can click the download button. 

It will display a list with the available apps for downloading. Click the correspondent  ‘Shopping Cart’ download button. Now you should have a ‘ShoppingCart.zip’ file.

STEP 2: IMPORTING THE APP TO OUR SAP WEB IDE 

                You’ll find different development environments for SAPUI5 (SAP Web IDE, Eclipse, Adobe Visual Studio, Atom,…) but we are going to focus on SAP Web IDE. To access SAP Web IDE you must be registered on the SAP Cloud Platform because the Web IDE is a service offered by this product.

If you’re not familiar with this point, we encourage you to follow this tutorial:

https://developers.sap.com/mission.scp-1-start-developing.html

On the home page of SAP Cloud Platform click the ‘Launch SAP Web IDE’ button in order to access to the service.

You may find easy to access to the ‘Development’ section.

Now we’re going to import the app we’ve just download by right-clicking our workspace name, select ‘import’ and then ‘File or Project’.

On the new window click ‘Browse’ and select the .zip of the app. The second field will be filled automatically, it’s the name of the folder where our app will be located at in our workspace.

As you can see, it has an error, that’s because our name folder can’t have any spaces on it, so just remove the space and the error will disappear. Click ‘ok’ to generate the app project.

The app project should look like this.

STEP 3: RUNNING THE APP 

                We’re going to check the app with the Google Chrome Developer Tools. To do that you need to run the application. This application, as most of the applications you will see, was thought to be run with the ‘index.html’ file. Here you have 3 possible modes of running the app with this file:

1. If it’s the first time you run the app, select the name of the app, and click the green play button. Then select the ‘index.html’ file and click ‘ok’.        
2. Select the ‘index.html’ file and click the run button.
   
3. Select the ‘webapp’ folder, right-click, ‘run’. At this point you can either select ‘Run Index.html’ or ‘Run as Web Application’ option. That’s because if you click ‘Run Configurations’ the Web Application configuration starts with the ‘index.html’ file by default.

Anyway, all running methods seen here are valid, choose one and run the application.

STEP 4: CHECKING THE APP

                Once we have the app running on Google Chrome, we need to open the developer tools, by clicking ‘F12’ or right-click, ‘Inspect Element (Q)’ as well.

As you can see the project doesn’t work, it only loads a blank space, but if you check in the ‘Network’ option of the toolbar, it may appear we’ve a problem on the ‘index.html’.

Go back to the Web IDE and open ‘index.html’. There you can see two relatives routes, these routes are ok for SAP, but we need to change them to absolute routes for our app to find the data. 

Instead of the relative source, we add the name URL of the page we get the app from. It will look like this:

This way we’re telling Web IDE to take the necessary libraries from the own SAP web page where they are published. 

We now run the app again and check what the Network says. Don’t forget to save the changes first!

The app is still blank, but we’ve solved the problem with the index. Now it can’t find a file called ‘initMockServer.js’. Come back to the Web IDE to search where we refer to that file.

Click on the magnifying glass icon on the left side, and write the name of the file on the find area. A message on the matches field tell us that we made reference to our search on the index.html.

The sentence written is calling an ‘initMockServer.js’ file that we don’t have in our project. Let’s open the app in the SAPUI5 SDK and run the Chrome developer tools (F12) on it.

https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/cart/webapp/index.html

On the find area we write the name of the file we are searching again, and this time we can see it’s able to find it.

If we click on the file we can see the code that is supposed to be written on it and by the URL obtained we can see that the file should be located on the webapp folder of our project.

We proceed to create that file with the content given. Don’t forget to format the file with ‘.js’.

After this last step if you run the app it works!

SUMMARY

What are the problems, why our app doesn’t work and how do we fix it?

Problems

1. There is a lack of information specifying the source for our app to take the resources from. We need to have an absolute route and we have a relative one.
2. In our package the file that allowed the MockServer to init was lost.

Solutions

1. We have to specify the SAP SDK’s URL, before the relative routes given, like the source of the resource SAPUI5. 
2. We have to copy the MockServer file used for the app by SAP but not included in the project by searching it on the own SAP page.