SAPUI5 MVC Apps にSQL Analysis Services データ連携を追加

SAPUI5 でビルトインODataModel を使って、SQL Analysis Services data をリアルタイムでウェブアプリに連携。

本記事では、CData API Server とADO.NET Provider for SQL Analysis Services (もしくは190+ の他のADO.NET Providers) を組み合わせて、バックエンドの同期DB を使わずに、リアルタイムSQL Analysis Services API にリアルタイム連携するSAPUI5 アプリを開発できます。API Server は、SQL Analysis Services data のOData フィードを生成するライトウェイトなアプリです。OData はSAPUI5 およびOpenUI5 でサポートされています。

Set Up the API Server

Follow the steps below to begin producing secure SQL Analysis Services OData services:

Deploy

The API Server runs on your own server. On Windows, you can deploy using the stand-alone server or IIS. On a Java servlet container, drop in the API Server WAR file. See the help documentation for more information and how-tos.

The API Server is also easy to deploy on Microsoft Azure, Amazon EC2, and Heroku.

Connect to SQL Analysis Services

After you deploy the API Server and the ADO.NET Provider for SQL Analysis Services, provide authentication values and other connection properties needed to connect to SQL Analysis Services by clicking Settings -> Connections and adding a new connection in the API Server administration console.

To connect, provide authentication and set the Url property to a valid SQL Server Analysis Services endpoint. You can connect to SQL Server Analysis Services instances hosted over HTTP with XMLA access. See the Microsoft documentation to configure HTTP access to SQL Server Analysis Services.

To secure connections and authenticate, set the corresponding connection properties, below. The data provider supports the major authentication schemes, including HTTP and Windows, as well as SSL/TLS.

  • HTTP Authentication

    Set AuthScheme to "Basic" or "Digest" and set User and Password. Specify other authentication values in CustomHeaders.

  • Windows (NTLM)

    Set the Windows User and Password and set AuthScheme to "NTLM".

  • Kerberos and Kerberos Delegation

    To authenticate with Kerberos, set AuthScheme to NEGOTIATE. To use Kerberos delegation, set AuthScheme to KERBEROSDELEGATION. If needed, provide the User, Password, and KerberosSPN. By default, the data provider attempts to communicate with the SPN at the specified Url.

  • SSL/TLS:

    By default, the data provider attempts to negotiate SSL/TLS by checking the server's certificate against the system's trusted certificate store. To specify another certificate, see the SSLServerCert property for the available formats.

You can then access any cube as a relational table: When you connect the data provider retrieves SSAS metadata and dynamically updates the table schemas. Instead of retrieving metadata every connection, you can set the CacheLocation property to automatically cache to a simple file-based store.

See the Getting Started section of the CData documentation, under Retrieving Analysis Services Data, to execute SQL-92 queries to the cubes.

You can then choose the SQL Analysis Services entities you want to allow the API Server access to by clicking Settings -> Resources. This article uses Adventure_Works as an example.

Authorize API Server Users

After determining the OData services you want to produce, authorize users by clicking Settings -> Users. The API Server uses authtoken-based authentication and supports the major authentication schemes. You can authenticate as well as encrypt connections with SSL. Access can also be restricted by IP address; Access is restricted to only the local machine by default.

Create the View

In this article the user views and interacts with SQL Analysis Services data through an SAPUI5 table control. Table columns will be automatically detected from the metadata retrieved from the API Server's API endpoint. We define the following table in a separate View.view.xml file:


<mvc:View
  controllerName="sap.ui.table.sample.OData2.Controller"
  xmlns="sap.ui.table"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:u="sap.ui.unified"
  xmlns:c="sap.ui.core"
  xmlns:m="sap.m">
  <m:Page
    showHeader="false"
    enableScrolling="false"
    class="sapUiContentPadding">
    <m:content>
      <Table
        id="table"
        selectionMode="MultiToggle"
        visibleRowCount="10"
        enableSelectAll="false"
        rows="{/Adventure_Works}"
        threshold="15"
        enableBusyIndicator="true"
        columns="{
          path: 'meta>/dataServices/schema/[${namespace}===\'CData\']/entityType/[${name}===\'Adventure_Works\']/property',
          factory: '.columnFactory'
        }">
        <toolbar>
          <m:Toolbar>
            <m:Title text="SQL Analysis Services Adventure_Works"></m:Title>
          </m:Toolbar>
        </toolbar>
        <noData>
          <m:BusyIndicator class="sapUiMediumMargin"/>
        </noData>
      </Table>
    </m:content>
  </m:Page>
</mvc:View>

Create the Model and Controller

In SAPUI5, you do not need to write any OData queries; an ODataModel instance handles the application's data access commands. The API Server then translates the queries into SQL Analysis Services API calls.

The controller processes user input and represents information to the user through a view. Define the controller in a new file, Controller.controller.js. Instantiate the model in the onInit function -- you will need to replace the placeholder values for the URL to the API Server, a user allowed to access the OData endpoint of the API Server, and the authtoken for the user.

sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/odata/v2/ODataModel",
  "sap/ui/model/json/JSONModel",
  "sap/ui/table/Column",
  "sap/m/Text",
], function(Controller, ODataModel, JSONModel, Column, Text ) {
  "use strict";
  

  return Controller.extend("sap.ui.table.sample.OData2.Controller", {
    
    onInit : function () {
      
      var oView = this.getView();
      var oDataModel = new ODataModel("http://myserver/api.rsc/",{user: "MyUser", password: "MyAuthToken"});
      
      oDataModel.getMetaModel().loaded().then(function(){
        oView.setModel(oDataModel.getMetaModel(), "meta");
      });
      oView.setModel(oDataModel);
      
      var oTable = oView.byId("table");
      var oBinding = oTable.getBinding("rows");
      var oBusyIndicator = oTable.getNoData();
      oBinding.attachDataRequested(function(){
      oTable.setNoData(oBusyIndicator);
      });
      oBinding.attachDataReceived(function(){
        oTable.setNoData(null); //use default again ("no data" in case no data is available)
      });
    },
    
    onExit : function () {
    },
    
    columnFactory : function(sId, oContext) {
      var oModel = this.getView().getModel();
      var sName = oContext.getProperty("name");
      var sType = oContext.getProperty("type");
      var iLen = oContext.getProperty("maxLength");
      iLen = iLen ? parseInt(iLen, 10) : 10;
      
      return new Column(sId, {
        sortProperty: sName, 
        filterProperty: sName,
        width: (iLen > 9 ? (iLen > 50 ? 15 : 10) : 5) + "rem",
        label: new sap.m.Label({text: "{/#Adventure_Works/" + sName + "/@name}"}),
        hAlign: sType && sType.indexOf("Decimal") >= 0 ? "End" : "Begin",
        template: new Text({text: {path: sName}})
      });
    }
    
  });

});

Describe Application Logic

Create a component that contains the resources of your application. Define the following in Component.js:


sap.ui.define([
  'sap/ui/core/UIComponent'
], function(UIComponent) {
  "use strict";

  return UIComponent.extend("sap.ui.table.sample.OData2.Component", {
    metadata : {
      rootView : "sap.ui.table.sample.OData2.View",
      dependencies : {
        libs : [
          "sap.ui.table",
          "sap.ui.unified",
          "sap.m"
        ]
      },

      config : {
        sample : {
          stretch : true,
          files : [
            "View.view.xml",
            "Controller.controller.js"
          ]
        }
      }
    }
  });

});

Bootstrap OpenUI5 and Launch

To complete the MVC application, simply add the bootstrap and initialization code. Add these directly to index.html:

<!DOCTYPE HTML>

<html>
<head>
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <meta charset="utf-8"> 
  <title>SQL Analysis Services Adventure_Works</title>
  
  <script id="sap-ui-bootstrap"
    src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-libs="sap.m"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-preload="async"
    data-sap-ui-compatVersion="edge" 
    data-sap-ui-resourceroots='{"sap.ui.table.sample.OData2": "./", "sap.ui.demo.mock": "mockdata"}'>
  </script>
  
  <!-- application launch configuration -->
  <script>
  
      sap.ui.getCore().attachInit(function() {
        new sap.m.App ({
          pages: [
                new sap.m.Page({
                    title: "SQL Analysis Services Adventure_Works", 
                    enableScrolling : false,
                  content: [ new sap.ui.core.ComponentContainer({
                  height : "100%", name : "sap.ui.table.sample.OData2"
                })]
            })
          ]
      }).placeAt("content");
    });

  </script>
</head> 
  <!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body> 
</html>

The resulting SAPUI5 table control reflects any changes to a table in the remote SQL Analysis Services data. You can now browse and search current SQL Analysis Services data.

 
 
ダウンロード