【徹底解説】Wijmo Grid でe-Sales Manager データバインド！インタラクティブWeb アプリ開発ガイド

古川えりか
古川えりか
コンテンツスペシャリスト
複雑なWijmo Grid × e-Sales Managerの連携をOData APIで実現。e-Sales Managerへのデータバインド方法からインタラクティブグリッド開発まで詳しく解説。Wijmo での開発を大幅に効率化できます。



e-Sales Manager Connector は、e-Sales Manager のデータ をWeb サービスとして提供し、ライブデータへの接続を可能にします。この記事では、JSONP 形式のe-Sales Manager のデータをWijmo Grid から利用する方法を説明します。

API Server の設定

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

e-Sales Manager への接続

Salesforce Connect からe-Sales Manager のデータを操作するには、まずe-Sales Manager への接続を作成・設定します。

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

  5. e セールスマネージャー Remix に接続するには、User、Passowrd、URL、TenantId パラメータが必要です。

    • User：API を実行するためのログインユーザーのユーザーID。
    • Password：API を実行するためのログインユーザーのユーザーパスワード
      • 。
    • URL：e-Sales Manager Remix エンドポイントへのURL。例：https://XXX.softbrain.co.jp
    • TenantId：e-Sales Manager Remix テナント名のTenantd。例：cdata
  6. 接続情報の入力が完了したら、「保存およびテスト」をクリックします。

e セールスマネージャー Remix に接続するには、User、Passowrd、URL、TenantId パラメータが必要です。

  • User：API を実行するためのログインユーザーのユーザーID。
  • Password：API を実行するためのログインユーザーのユーザーパスワード
    • 。
  • URL：e-Sales Manager Remix エンドポイントへのURL。例：https://XXX.softbrain.co.jp
  • TenantId：e-Sales Manager Remix テナント名のTenantd。例：cdata

API Server のユーザー設定

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

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

e-Sales Manager 用のAPI エンドポイントの作成

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

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

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

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

API Server の設定

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

e-Sales Manager への接続

Salesforce Connect からe-Sales Manager のデータを操作するには、まずe-Sales Manager への接続を作成・設定します。

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

  5. e セールスマネージャー Remix に接続するには、User、Passowrd、URL、TenantId パラメータが必要です。

    • User：API を実行するためのログインユーザーのユーザーID。
    • Password：API を実行するためのログインユーザーのユーザーパスワード
      • 。
    • URL：e-Sales Manager Remix エンドポイントへのURL。例：https://XXX.softbrain.co.jp
    • TenantId：e-Sales Manager Remix テナント名のTenantd。例：cdata
  6. 接続情報の入力が完了したら、「保存およびテスト」をクリックします。

e セールスマネージャー Remix に接続するには、User、Passowrd、URL、TenantId パラメータが必要です。

  • User：API を実行するためのログインユーザーのユーザーID。
  • Password：API を実行するためのログインユーザーのユーザーパスワード
    • 。
  • URL：e-Sales Manager Remix エンドポイントへのURL。例：https://XXX.softbrain.co.jp
  • TenantId：e-Sales Manager Remix テナント名のTenantd。例：cdata

API Server のユーザー設定

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

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

e-Sales Manager 用のAPI エンドポイントの作成

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

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

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

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

  1. 必要なWijmo、jQuery、およびKnockout ライブラリをロードします。 
    
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20143.59.min.css"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20143.59.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20143.59.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20143.59.min.js"></script>
<script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20143.59.js"></script>
<script src="http://cdn.wijmo.com/wijmo/external/knockout-2.2.0.js"></script>
<script src="http://cdn.wijmo.com/amd-js/3.20143.59/knockout-3.1.0.js"></script>
<script src="http://cdn.wijmo.com/interop/knockout.wijmo.3.20143.59.js"></script>
  2. ViewModel を作成し、ODataView を使用して接続します。
  3. データバインド：以下は、いくつかのページングボタンを備えたシンプルなテーブルです。マークアップのbody セクションに貼り付けることができます。 
    


リアルタイムでライブe-Sales Manager データを編集

Customer

以下は結果のグリッドです。フィルタリング、ソート、編集、保存ができます。

結果のWijmo グリッド。（Salesforce が表示されています。）

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

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

CData API Server お問い合わせ

この記事の内容

関連記事