Skip to Content
Previous

Configure your SAPUI5 application

By Abdel Dadouche

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 Cloud for predictive services.
    For more content on SAPUI5, you can check the dedicated tutorials section available on the SAPUI5 documentation.

Details

Step 1: Create your destination

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.

SAP HANA Cloud Platform Cockpit

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

Your Personal Developer Account

On the Destinations overview page, click on New Destination

Destinations

Enter the following information:

Field Name Value
Name movielens
Type HTTP
Description SAP HANA XS OData Movielens services
URL your SAP HANA XS OData URL
Proxy Type Internet
Authentication BasicAuthentication
User TRIAL
Password Welcome17Welcome17

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:

Property Name Value
WebIDEEnabled true
WebIDEUsage odata_gen,odata_xs
WebIDEAdditionalData full_url

Note:

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.

Please log in to access this content.
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.

Web IDE

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

Web IDE

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

Web IDE
Please log in to access this content.
Step 3: Create your application using the SAPUI5 template

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

Project

Select the SAPUI5 Application tile, then click on Next

Project

Enter the following information, then click on Next

Field Name Value
Project Name movielens
Namespace ml
Project

Enter the following information, then click on Finish

Field Name Value
View Type XML
View Name demo
Project
Please log in to access this content.
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 themanifest.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:

Project

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

Project

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

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

Project

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.

Project

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.

Project

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 5: 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="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_collaborativer"/>
              <StandardListItem title="Content-based Filtering" type="Navigation" custom:to="detail_contentbased"/>
            </items>
          </List>
        </content>
      </Page>
    </masterPages>
    <detailPages>
      <Page id="detail" title="Moveilen Recommendation">
        <content></content>
      </Page>
      <Page id="detail_collaborativer" 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 Save Button button (or press CTRL+S).

Please log in to access this content.
Step 6: 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:

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 Save Button button (or press CTRL+S)

Please log in to access this content.
Step 7: 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
Please log in to access this content.
Solution: 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.

Please log in to access this content.

Updated 10/10/2017

Time to Complete

10 Min

Beginner
Next
Back to top