Configure your SAPUI5 application

Log into the SAP Cloud Platform Cockpit with your free trial account on Europe (Rot) - Trial and access “Your Personal Developer Account”.

Click on your SAP Cloud Platform Account identifier (which ends with trial) as highlighted on the below screenshot.

On the left side bar, you can navigate in Connectivity > Destinations.

On the Destinations overview page, click on New Destination

Enter the following information:

Note:

Make sure you paste your SAP HANA XS OData URL from the last tutorial in the URL field.
The URL should end like data.xsodata with no slash “/” at the end

Before clicking on Save, you will need to add the following properties to the destination using the New Property button:

Note:

The New Property button is not available is you are not in edit mode.

Click on Save

You can use the Check Connection button or the icon to your Destination to validate your configuration.

On the left side bar, you can navigate in Services, then using the search box enter SAP Web IDE.

Click on the SAP Web IDE tile, then click on Open SAP Web IDE.

You will get access to the SAP Web IDE main page:

Using the File menu, navigate New > Project from Template.

Select the SAPUI5 Application tile, then click on Next

Enter the following information, then click on Next

Enter the following information, then click on Finish

Your project is created! Let’s continue, and add the “destinations” previously created in the SAP Cloud Platform cockpit as our project “data source”.

On left side tree, expand the movielens\webapp item, and right click on the manifest.json file, and select Open with \ Descriptor Editor.

You can also switch to the Descriptor Editor (using the tabs at the bottom of the screen).

Then select the Data sources tab at the top, and click on the icon as highlighted on the screen:

Select the Service URL item on the left side list, the pick your destination from the drop down.

Click on Next to move to the next screen, then on Finish.

You should now have one entry in your OData Service list.

Now, select Models and click on the icon.

Select Select data source radio, then pick data.xsodata, check the Set as default model for the application.

Then click on OK.

Now, let’s update the model setting by setting Preload to false and Binding Mode to TwoWay as displayed on the screenshot.

Click on the button (or press CTRL+S). This should save the manifest.json file.

Provide an answer to the question below then click on Validate.

The default view created is located in webapp/view/demo.view.xml. We will update the view to prepare for the next steps.

Open the webapp/view/demo.view.xml file and replace the existing code with the following code:

<mvc:View controllerName="mlmovielens.controller.demo" xmlns:html="http://www.w3.org/2000/xhtml" xmlns:mvc="sap.ui.core.mvc"
  displayBlock="true" xmlns="sap.m" xmlns:custom="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
  <SplitApp id="SplitAppDemo" initialMaster="master" initialDetail="detail">
    <masterPages>
      <Page id="master" title="Scenario">
        <content>
          <List itemPress="onDetailListItemPress">
            <items>
              <StandardListItem title="Collaborative Filtering" type="Navigation" custom:to="detail_collaborative"/>
              <StandardListItem title="Content-based Filtering" type="Navigation" custom:to="detail_contentbased"/>
            </items>
          </List>
        </content>
      </Page>
    </masterPages>
    <detailPages>
      <Page id="detail" title="Moveilens Recommendation">
        <content></content>
      </Page>
      <Page id="detail_collaborative" title="Collaborative Filtering">
        <content>
          <!--<mvc:XMLView viewName="mlmovielens.view.collaborative"/>-->
        </content>
      </Page>
      <Page id="detail_contentbased" title="Content-based Filtering">
        <content>
          <!--<mvc:XMLView viewName="mlmovielens.view.contentbased"/>-->
        </content>
      </Page>
    </detailPages>
  </SplitApp>
</mvc:View>

Click on the button (or press CTRL+S).

The default controller is located in webapp/controller/demo.controller.js. We will update the view to prepare for the next steps.

Open the webapp/controller/demo.controller.js file and replace the existing code with the following code:

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/m/MessageToast"
], function(Controller, MessageToast) {
  "use strict";

  return Controller.extend("mlmovielens.controller.demo", {
    onInit: function() {
      if (typeof sap.ui.getCore().getModel() === 'undefined') {
        sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel());
      }
    },
    getSplitAppObj: function() {
      var result = sap.ui.getCore().byId(this.createId("SplitAppDemo"));
      if (!result) {
        MessageToast.show("SplitApp object can't be found", {
          duration: 5000
        });
      }
      return result;
    },
    onDetailListItemPress: function(oEvent) {
      var sToPageId = oEvent.getParameter("listItem").getCustomData()[0].getValue();
      this.getSplitAppObj().toDetail(this.createId(sToPageId));
    }
  });
});

Click on the button (or press CTRL+S)

From the menu bar, select Run > Run As > Web Application or use the Run button.

This will open a web page with the following content:

In case you are having problems when running the application, please find bellow the created and modified files:

• `manifest.json`
• `webapp/controller/demo.controller.js`
• `webapp/view/demo.view.xml`

The complete project can be found on SAP Tutorial public GitHub repository.

However, you won’t be able to clone the repository and directly run the code from the current directory structure. You have to copy the movielens directory content into your existing project directory.

Make sure you check the LICENSE before starting using its content.