SAPUI5 MVC Apps のWorkday にリアルタイム連携を実現

古川えりか
コンテンツスペシャリスト

SAPUI5 でビルトインODataModel を使い、Workday への変更をリアルタイムで反映するWeb アプリを作成します。

この記事では、バックエンドデータベースに書き込むことなくWorkday API の機能を活用するSAPUI5 アプリを作成するために、CData API Server およびADO.NET Provider for Workday (または250+ の他のADO.NET Providers) を使用する方法を説明します。API Server は、サーバー上で実行されてWorkday のOData フィードを生成する軽量のWeb アプリケーションです。OData は、Web を介したリアルタイムデータアクセスの標準であり、SAPUI5 およびOpenUI5 にビルトインのサポートがあります。

Workday データ連携について

CData は、Workday のライブデータにアクセスし、統合するための最も簡単な方法を提供します。お客様は CData の接続機能を以下の目的で使用しています：

Prism Analytics Data Catalog で作成したテーブルやデータセットにアクセスでき、Workday システムの忠実性を損なうことなく、ネイティブの Workday データハブを操作できます。
Workday Reports-as-a-Service にアクセスして、Prism から利用できない部門データセットや、Prism の許容サイズを超えるデータセットのデータを表示できます。
WQL、REST、または SOAP でベースデータオブジェクトにアクセスし、より詳細で細かいアクセスを実現できます（ただし、クエリの作成には Workday 管理者や IT の支援が必要な場合があります）。

ユーザーは、Tableau、Power BI、Excel などの分析ツールと Workday を統合し、当社のツールを活用して Workday データをデータベースやデータウェアハウスにレプリケートしています。アクセスは、認証されたユーザーの ID とロールに基づいて、ユーザーレベルで保護されます。

Workday を CData と連携させるための設定についての詳細は、ナレッジベース記事をご覧ください：Comprehensive Workday Connectivity through Workday WQL および Reports-as-a-Service & Workday + CData: Connection & Integration Best Practices

はじめに

API Server の設定

以下のリンクからAPI Server の無償トライアルをスタートしたら、セキュアなWorkday OData サービスを作成していきましょう。

Workday への接続

SAPUI5 からWorkday のデータを操作するには、まずWorkday への接続を作成・設定します。

API Server にログインして、「Connections」をクリック、さらに「接続を追加」をクリックします。
「接続を追加」をクリックして、データソースがAPI Server に事前にインストールされている場合は、一覧から「Workday」を選択します。
事前にインストールされていない場合は、コネクタを追加していきます。コネクタ追加の手順は以下の記事にまとめてありますので、ご確認ください。
CData コネクタの追加方法はこちら >>
それでは、Workday への接続設定を行っていきましょう！
Workday 接続プロパティの取得・設定方法

ここでは、4つのWorkday API の接続パラメータを設定する方法、およびTenant とBaseURL を取得する方法について説明します。必要なAPI のパラメータが設定され、カスタムOAuth および / またはAzure AD API クライアントを作成したら、接続の準備は完了です。

接続の前提条件

API / 前提条件 / 接続パラメータ
WQL / WQL サービスを有効化（下記参照） / ConnectionType： WQL
Reports as a Service / カタログレポートの設定（ヘルプドキュメントの「データアクセスのファインチューニング」参照） / ConnectionType： Reports
REST / 自動で有効化 / ConnectionType： REST
SOAP / 自動で有効化 / ヘルプドキュメントのWorkday SOAP API への認証を参照

BaseURL およびTenant の取得

BaseURL およびTenant プロパティを取得するため、Workday にログインしてView API Clients を検索します。この画面では、Workday はBaseURL とTenant の両方を含むURL であるWorkday REST API Endpoint を表示します。
REST API Endpoint のフォーマットは、 https://domain.com//mycompany です。ここで、
- https://domain.com（URL のサブディレクトリと会社名の前の部分）はBaseURL です。
- mycompany（URL の最後のスラッシュの後の部分）はTenant です。
例えば、REST API エンドポイントがhttps://wd3-impl-services1.workday.com/ccx/api/v1/mycompany の場合、 BaseURL はhttps://wd3-impl-services1.workday.com であり、Tenant はmycompany です。
WQL サービスを有効化
Workday WQL API を介して接続するには、はじめにWQL Service を有効にする必要があります。
1. Workday を開きます。
2. 検索バーにView Domain と入力します。
3. プロンプトにWorkday Query Language と入力します。
4. Allowed Security Group Types のいずれかに、接続するユーザーが含まれていることを確認します。
Workday への認証
Basic 認証以外のほとんどのWorkday 接続では、認証のためにOAuth ベースのカスタムAPI クライアントアプリケーションを作成する必要があります。これには、ユーザーがAzure AD 資格情報を介して接続するエンタープライズインストールも含まれます。 Workday への認証につての詳細は、ヘルプドキュメントの「Workday への認証」セクションを参照してください。
接続情報の入力が完了したら、「保存およびテスト」をクリックします。

Workday 接続プロパティの取得・設定方法

ここでは、4つのWorkday API の接続パラメータを設定する方法、およびTenant とBaseURL を取得する方法について説明します。必要なAPI のパラメータが設定され、カスタムOAuth および / またはAzure AD API クライアントを作成したら、接続の準備は完了です。

接続の前提条件

API / 前提条件 / 接続パラメータ
WQL / WQL サービスを有効化（下記参照） / ConnectionType： WQL
Reports as a Service / カタログレポートの設定（ヘルプドキュメントの「データアクセスのファインチューニング」参照） / ConnectionType： Reports
REST / 自動で有効化 / ConnectionType： REST
SOAP / 自動で有効化 / ヘルプドキュメントのWorkday SOAP API への認証を参照

BaseURL およびTenant の取得

BaseURL およびTenant プロパティを取得するため、Workday にログインしてView API Clients を検索します。この画面では、Workday はBaseURL とTenant の両方を含むURL であるWorkday REST API Endpoint を表示します。

REST API Endpoint のフォーマットは、 https://domain.com//mycompany です。ここで、

https://domain.com（URL のサブディレクトリと会社名の前の部分）はBaseURL です。
mycompany（URL の最後のスラッシュの後の部分）はTenant です。

例えば、REST API エンドポイントがhttps://wd3-impl-services1.workday.com/ccx/api/v1/mycompany の場合、 BaseURL はhttps://wd3-impl-services1.workday.com であり、Tenant はmycompany です。

WQL サービスを有効化

Workday WQL API を介して接続するには、はじめにWQL Service を有効にする必要があります。

Workday を開きます。
検索バーにView Domain と入力します。
プロンプトにWorkday Query Language と入力します。
Allowed Security Group Types のいずれかに、接続するユーザーが含まれていることを確認します。

Workday への認証

Basic 認証以外のほとんどのWorkday 接続では、認証のためにOAuth ベースのカスタムAPI クライアントアプリケーションを作成する必要があります。これには、ユーザーがAzure AD 資格情報を介して接続するエンタープライズインストールも含まれます。 Workday への認証につての詳細は、ヘルプドキュメントの「Workday への認証」セクションを参照してください。

API Server のユーザー設定

次に、API Server 経由でWorkday にアクセスするユーザーを作成します。「Users」ページでユーザーを追加・設定できます。やってみましょう。

「Users」ページで ユーザーを追加をクリックすると、「ユーザーを追加」ポップアップが開きます。
次に、「ロール」、「ユーザー名」、「権限」プロパティを設定し、「ユーザーを追加」をクリックします。
その後、ユーザーの認証トークンが生成されます。各ユーザーの認証トークンとその他の情報は「Users」ページで確認できます。

Workday 用のAPI エンドポイントの作成

ユーザーを作成したら、Workday のデータ用のAPI エンドポイントを作成していきます。

まず、「API」ページに移動し、「テーブルを追加」をクリックします。
アクセスしたい接続を選択し、次へをクリックします。
接続を選択した状態で、各テーブルを選択して確認をクリックすることでエンドポイントを作成します。

OData のエンドポイントを取得

以上でWorkday への接続を設定してユーザーを作成し、API Server でWorkday データのAPI を追加しました。これで、OData 形式のWorkday データをREST API で利用できます。API Server の「API」ページから、API のエンドポイントを表示およびコピーできます。

ビューの作成

この記事では、ユーザーはSAPUI5 テーブルコントロールを介してWorkday を表示および操作します。テーブルのカラムは、API Server のAPI エンドポイントから取得したメタデータから自動的に検出されます。次のテーブルを別のView.view.xml ファイルで定義します。


<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="{/Workers}"
        threshold="15"
        enableBusyIndicator="true"
        columns="{
          path: 'meta>/dataServices/schema/[${namespace}===\'CData\']/entityType/[${name}===\'Workers\']/property',
          factory: '.columnFactory'
        }">
        <toolbar>
          <m:Toolbar>
            <m:Title text="Workday Workers"></m:Title>
          </m:Toolbar>
        </toolbar>
        <noData>
          <m:BusyIndicator class="sapUiMediumMargin"/>
        </noData>
      </Table>
    </m:content>
  </m:Page>
</mvc:View>

モデルとコントローラーの作成

SAPUI5 では、OData クエリを作成する必要はありません。ODataModel インスタンスはアプリケーションのデータアクセスコマンドを処理します。次に、API Server はクエリをWorkday API 呼び出しに変換します。

コントローラーはユーザー入力を処理し、ビューを通じてユーザーに情報を表示します。新しいファイルであるController.controller.js でコントローラーを定義します。onInit 関数でモデルをインスタンス化します。API Server へのURL、API Server のOData エンドポイントへのアクセスを許可されたユーザー、そしてユーザーの認証トークンのプレースホルダー値を置き換える必要があります。

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: "{/#Workers/" + sName + "/@name}"}),
        hAlign: sType && sType.indexOf("Decimal") >= 0 ?"End" :"Begin",
        template: new Text({text: {path: sName}})
      });
    }

  });

});

アプリケーションロジックの説明

アプリケーションのリソースを含むコンポーネントを作成します。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"
          ]
        }
      }
    }
  });

});

OpenUI5 をブーストラップして起動

MVC アプリケーションを完了するには、ブートストラップと初期化コードを追加します。これらをindex.html に直接追加します。

<!DOCTYPE HTML>

<html>
<head>
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <meta charset="utf-8">
  <title>Workday Workers</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: "Workday Workers",
                    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>

結果のSAPUI5 テーブルコントロールは、リモートWorkday 内のテーブルへの変更を反映します。これで、現在のWorkday を参照および検索できます。

A table in SAPUI5 that reflects changes to the data in real time.(Salesforce is shown.)

はじめる準備はできましたか？

詳細はこちら、または無料トライアルにお申し込みください：

CData API Server お問い合わせ

SAPUI5 MVC Apps のWorkday にリアルタイム連携を実現

Workday データ連携について

はじめに

API Server の設定

Workday への接続

Workday 接続プロパティの取得・設定方法

接続の前提条件

BaseURL およびTenant の取得

WQL サービスを有効化

Workday への認証

Workday 接続プロパティの取得・設定方法

接続の前提条件

BaseURL およびTenant の取得

WQL サービスを有効化

Workday への認証

API Server のユーザー設定

Workday 用のAPI エンドポイントの作成

OData のエンドポイントを取得

ビューの作成

モデルとコントローラーの作成

アプリケーションロジックの説明

OpenUI5 をブーストラップして起動

はじめる準備はできましたか？

この記事の内容

関連記事