The SAPUI5 SDK is the reference website for every Fiori developer. Here we find documentation, a detailed guide of all SAPUI5 controls, examples of object implementation and also various tools such as demo applications. These SAPUI5 applications allow you to see the characteristics of your technology and can serve as a basis for our work. That’s really cool of SAP, but sometimes they don’t work. It is not common, but sometimes there may be problems that do not allow our project to load properly in our development environment.
In this tutorial we will see how to import into our SCP WebIDE the demo application of the shopping cart, what errors arise and how to fix them:
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:
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:
- 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’.
- Select the ‘index.html’ file and click the run button
- 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’.
At this point it is important to understand where we are and what error we have. The applications provided by SAP in the SAPUI5 SDK, whether small or more complex applications examples such as this shopping cart, are never connected to an external data source. In the vast majority of scenarios, an SAPUI5 application acts as a frontend of a backend system (which can be SAP or not) and this communication will be carried out using the OData protocol with which the different CRUD operations will be performed on the data source. By building a Mock Server, what is done is to simulate that Backend system so that OData queries are performed exactly the same, but are redirected to take the data locally, usually from a JSON file. You can find more information in the SDK itself.
The case at hand is that we have an error in our application because the file that starts the Mock Server does not exist in our project.
To fix it, go back to the Web IDE to find where we refer to that file.
Click on the magnifying glass on the toolbar on the right and type the name of the file in the search area. The search results indicate that we refer to this file in the index.
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.
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!