Skip to Content

SAP HCP predictive services, Register a "Data Set" HCP predictive service from a SAPUI5 application


SAP HCP predictive services, Register a "Data Set" HCP predictive service from a SAPUI5 application

By Abdel Dadouche

You will extend your application with the "Data Set" HCP predictive service

You will learn

  • How to implement the “Data Set” HCP predictive service in a SAPUI5 application


  1. Log into the SAP HANA Cloud Platform Cockpit with your free trial account and access “Your Personal Developer Account”.

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

    SAP HANA Cloud Platform Cockpit
  2. On the left side bar, you can navigate in Applications > HTML5 Applications.

    HTML5 Applications
  3. Click on the Edit Application HTML5 Applications icon for the hcppredictiveservicesdemo application.

    HTML5 Applications
  4. This will open the SAP Web IDE where you have previously created the hcppredictiveservicesdemo application using the project template.

    HTML5 Applications
  5. Create a new file called DatasetRegister.view.xml in the hcppredictiveservicesdemo\webapp\view\dataset and add the following content.

    The view displays a form where the user can select the HANA schema and table to be used to register the dataset.
    Once registered, it will display the dataset description.

    <mvc:View controllerName="demo.controller.dataset.DatasetRegister"
      <Panel expandable="true" expanded="false" headerText="Register a Data Set in the HCP predictive services" width="auto"
        <form:SimpleForm editable="true" layout="ResponsiveGridLayout" class="editableForm">
            <Label text="HANA Schema" labelFor="idInputHANASchema"/>
            <Input id="idInputHANASchema" width="200px" value="DEMO"/>
            <Label text="HANA Table" labelFor="idInputHANATable"/>
            <Input id="idInputHANATable" width="200px" value="TIME_SERIES"/>
            <Button text="Register Description" type="Default" press="onDataSetRegister"/>
        <Panel expandable="false" expanded="true" visible="{= typeof ${/dataSetData} !== 'undefined' &amp;&amp; ${/function} === 'DatasetRegister'}">
          <form:SimpleForm editable="false" layout="ResponsiveGridLayout" class="editableForm">
              <Label text="Identifier"></Label>
              <Text text="{/dataSetData/ID}"/>
              <Label text="Name"></Label>
              <Text text="{/dataSetData/name}"/>
              <Label text="Number Of Rows"></Label>
              <Text text="{/dataSetData/numberOfRows}"/>
              <Label text="Number Of Columns"></Label>
              <Text text="{/dataSetData/numberOfColumns}"/>
          <table:Table rows="{/dataSetData/variables}" enableBusyIndicator="true" selectionMode="Single" visibleRowCount="5" width="100%">
                <Label text="Position"/>
                  <Text text="{position}"/>
                <Label text="Name"/>
                  <Text text="{name}"/>
                <Label text="Storage"/>
                  <Text text="{storage}"/>
                <Label text="Value Type"/>
                  <Text text="{value}"/>

    The view defines a form where the user can enter the name of the HANA schema and table to be used in the HCP predictive service data set registration process. It also define a table where the result is displayed.

  6. Create a file named the DatasetRegister.controller.js file in the hcppredictiveservicesdemo\webapp\controller\dataset directory and add the following code.

    The controller includes the functions used to process the ‘Press’ events on the controls added in the view and process the AJAX calls to the HCP predictive services.

    ], function(Controller, MessageToast) {
      "use strict";
      return Controller.extend("demo.controller.dataset.DatasetRegister", {
        onDataSetRegister: function() {
          // set the busy indicator to avoid multi clicks
          var oBusyIndicator = new sap.m.BusyDialog();
          // get the service parameters value
          var sHANASchema = this.getView().byId("idInputHANASchema").getValue();
          var sHANATable = this.getView().byId("idInputHANATable").getValue();
          // define the service parameters
          var param = {
            hanaURL: sHANASchema + "/" + sHANATable
          // call the service and define call back methods
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            url: "/HCPps/api/analytics/dataset/sync",
            type: "POST",
            data: JSON.stringify(param),
            dataType: "json",
            async: false,
            success: function(data) {
              try {
                //Save data set description data in the model
                sap.ui.getCore().getModel().setProperty("/dataSetData", data);
                sap.ui.getCore().getModel().setProperty("/function", "DatasetRegister");
              } catch (err) {
      "Caught - onDataSetRegister[ajax success] :" + err.message);
            error: function(request, status, error) {
    "Caught - onDataSetRegister[ajax error] :" + request.responseText);
  7. Edit the demo.view.xml file located in the hcppredictiveservicesdemo\webapp\view and replace the existing code by the following one:

    Here we simply extend the main view.

    <mvc:View controllerName="demo.controller.demo"
          <Page title="Developing with HCPps and SAPUI5">
              <mvc:XMLView viewName="demo.view.dataset.DatasetRegister"/>
              <mvc:XMLView viewName="demo.view.odata.ODataDisplay"/>
  8. You can save all modified files by pressing CTRL+SHIFT+S. Then, click on the Run icon Run Applications or press ALT+F5.

    Click on Register Description

    Et voilà!

    TimeSeries Demo Applications

Next Steps

Back to top