Skip to Content

Configure your SAPUI5 application

0 %
Configure your SAPUI5 application

Configure your SAPUI5 application

Configure your SAPUI5 application and your connect it to your SAP HANA XS OData service to consume your `Movielens` recommendations

You will learn

  • How to add a destination to your SAP Cloud Platform account
  • How to create a SAPUI5 application from a template using the SAP Web IDE
  • How to add a destination to your SAPUI5 application
  • Run your SAPUI5 application

Note: The intent of the following tutorials is not to focus on SAPUI5 but to use it as mean to execute the SAP Predictive services.
For more content on SAPUI5, you can check the dedicated tutorials section available on the SAPUI5 documentation.

Step 1: Create your destination

Log into the SAP Cloud Platform Cockpit Neo Trial 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 by default) as highlighted on the below screenshot.

SAP Cloud Platform Cockpit

You are now in your SAP Cloud Platform developer account!

If you are unclear with what is your SAP Cloud Platform account name, you can refer to the following blog entry: SAP Cloud Platform login, user name, account id, name or display name: you are lost? Not anymore!

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

Your Personal Developer Account

On the Destinations overview page, click on New Destination


Enter the following information:

Field Name Value
Name movielens
Description SAP HANA XS OData Movielens services
Proxy Type Internet
Authentication BasicAuthentication
Password Welcome18Welcome18


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:

Property Name Value
WebIDEEnabled true
WebIDEUsage odata_gen,odata_xs
WebIDEAdditionalData full_url


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

Click on Save

New Destinations

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

Log on to answer question
Step 2: Open the Web IDE

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 Go to Service.


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

Log on to answer question
Step 3: Create your application using the SAPUI5 template

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

Field Name Value
Project Name movielens
Namespace ml

Enter the following information, then click on Finish

Field Name Value
View Type XML
View Name demo
Log on to answer question
Step 4: Add the destinations as your data source

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 plus 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.

Log on to answer question
Step 5: Add your data source as default model

Now, select Models and click on the plus 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 Save Button button (or press CTRL+S). This should save the manifest.json file.

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

Open your `neo-app.json` file and paste its content here.
Step 6: Update the default view: demo.view.xml

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="" xmlns:mvc="sap.ui.core.mvc"
  displayBlock="true" xmlns="sap.m" xmlns:custom="">
  <SplitApp id="SplitAppDemo" initialMaster="master" initialDetail="detail">
      <Page id="master" title="Scenario">
          <List itemPress="onDetailListItemPress">
              <StandardListItem title="Collaborative Filtering" type="Navigation" custom:to="detail_collaborative"/>
              <StandardListItem title="Content-based Filtering" type="Navigation" custom:to="detail_contentbased"/>
      <Page id="detail" title="MovieLens Recommendation">
      <Page id="detail_collaborative" title="Collaborative Filtering">
          <!--<mvc:XMLView viewName="mlmovielens.view.collaborative"/>-->
      <Page id="detail_contentbased" title="Content-based Filtering">
          <!--<mvc:XMLView viewName="mlmovielens.view.contentbased"/>-->

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

Log on to answer question
Step 7: Update the default controller: demo.controller.js

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:

], 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) {"SplitApp object can't be found", {
          duration: 5000
      return result;
    onDetailListItemPress: function(oEvent) {
      var sToPageId = oEvent.getParameter("listItem").getCustomData()[0].getValue();

Click on the Save Button button (or press CTRL+S)

Log on to answer question
Step 8: Run the application

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

Run Button

This will open a web page with the following content:

Run Button
Log on to answer question
Step 9: Created and modified files

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

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.

Log on to answer question

Next Steps

Back to top