ApprovalMax のデータをDevExpress Data Grid にデータバインドする。

加藤龍彦
加藤龍彦
デジタルマーケティング
CData API Driver for ADO.NET をDevExpress のWindows Forms およびWeb コントロールと組み合わせて使い、チャートに ApprovalMax のデータ を取り込みます。



CData API Driver for ADO.NET は、サードパーティ製コントロールと組み合わせて使える標準的なADO.NET データアクセスコンポーネントを備えています。通常のADO.NET データバインドの手順に沿って進めるだけで、UI コントロールからリアルタイムデータの取得・表示を実現できます。この記事では、CData のコンポーネントを使って DevExpress UI コントロール(Windows Forms およびWeb コントロール) にデータバインドする方法を紹介します。今回は、リアルタイムのデータを可視化するチャートにデータバインドしていきます。

まず、Profile 接続プロパティをディスク上の ApprovalMax プロファイルの場所に設定します(例:C:\profiles\ApprovalMax.apip)。次に、ProfileSettings 接続プロパティを ApprovalMax の接続文字列に設定します(以下を参照)。

ApprovalMax API プロファイル設定

ApprovalMax Public API では、OAuth 2.0 の認可コードフローで認証を行います。自分のデータに接続するだけでなく、他のユーザーが各自のデータに接続できるようにすることも可能です。

まず、ApprovalMax に OAuth アプリケーションを登録する必要があります。ApprovalMax Developer Portal(https://developer.approvalmax.com/applications)にサインインし、新しいアプリケーションを作成します。OAuth アプリケーションには Client ID と Client Secret が割り当てられます。また、Redirect URI(Callback URL)を少なくとも1つ登録しておく必要があります。

Public API を利用するには、ApprovalMax の Premium サブスクリプション(または有効なトライアル)が必要です。

以下の接続プロパティを設定すると、接続できるようになります。

  • AuthScheme:OAuth に設定します。
  • InitiateOAuth:GETANDREFRESH に設定します。InitiateOAuth を使うと、OAuthAccessToken を取得するプロセスを管理できます。
  • OAuthClientId:ApprovalMax Developer Portal のアプリケーション設定に表示される Client ID に設定します。
  • OAuthClientSecret:ApprovalMax Developer Portal のアプリケーション設定に表示される Client Secret に設定します。
  • CallbackURL:アプリケーション設定で登録した Redirect URI に設定します。
  • Scope:(オプション)デフォルトの OAuth スコープを上書きします。デフォルト値の openid offline_access https://www.approvalmax.com/scopes/public_api/read は、このプロファイルのすべてのテーブルへの読み取り専用アクセスを許可し、リフレッシュトークンを有効にします。スコープを絞り込む際は、最小権限の原則に従ってください。

OAuth の Authorization URL は https://identity.approvalmax.com/connect/authorize、Token URL は https://identity.approvalmax.com/connect/token です。グラントタイプは authorization_code と refresh_token の両方に対応しています。

Windows Forms コントロール

下のコードでは、ApprovalMax でDevExpress のチャートに追加する方法を説明します。APIDataAdapter はチャートコントロールのSeries プロパティにバインドします。コントロールのDiagram プロパティはx 軸とy 軸をカラム名として定義します。


using (APIConnection connection = new APIConnection(
"Profile=C:\profiles\ApprovalMax.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackURL=your_callback_url;")) {
  APIDataAdapter dataAdapter = new APIDataAdapter(
  "SELECT UserId, Email FROM UserProfiles WHERE CompanyId = '00000000-0000-0000-0000-000000000000'", connection);

  DataTable table = new DataTable();
  dataAdapter.Fill(table);
  DevExpress.XtraCharts.Series series = new DevExpress.XtraCharts.Series();
  chartControl1.Series.Add(series);
  DataTable table = new DataTable();
  series.ValueDataMembers.AddRange(new string[] { "Email" });
  series.ArgumentScaleType = DevExpress.XtraCharts.ScaleType.Qualitative;
  series.ArgumentDataMember = "UserId";
  series.ValueScaleType = DevExpress.XtraCharts.ScaleType.Numerical;
  chartControl1.Legend.Visibility = DevExpress.Utils.DefaultBoolean.False;
  ((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}
The complete code example and the resulting chart.

Web コントロール

下のコードではApprovalMax でDevExpress Web を操作するための設定方法を説明します。APIDataAdapter はチャートのSeries プロパティにバインドします。Diagram プロパティはx 軸とy 軸をカラム名として定義します。


using DevExpress.XtraCharts;

using (APIConnection connection = new APIConnection(
"Profile=C:\profiles\ApprovalMax.apip;AuthScheme=OAuth;InitiateOAuth=GETANDREFRESH;OAuthClientId=your_client_id;OAuthClientSecret=your_client_secret;CallbackURL=your_callback_url;"))
{
  APIDataAdapter APIDataAdapter1 = new APIDataAdapter("SELECT UserId, Email FROM UserProfiles WHERE CompanyId = '00000000-0000-0000-0000-000000000000'", connection);
  DataTable table = new DataTable();
  APIDataAdapter1.Fill(table);
  DevExpress.XtraCharts.Series series = new Series("Series1", ViewType.Bar);
  WebChartControl1.Series.Add(series);
  DataTable table = new DataTable();
  series.ValueDataMembers.AddRange(new string[] { "Email" });
  series.ArgumentScaleType = ScaleType.Qualitative;
  series.ArgumentDataMember = "UserId";
  series.ValueScaleType = ScaleType.Numerical;
  ((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}
An ASP.NET application created with the ADO.NET Provider and the DevExpress Web Forms control.(Salesforce is shown.)

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

API Driver で ApprovalMax のライブデータに接続

ApprovalMax に接続