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

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

Talkdesk では OAuth 2.0 の Client Credentials グラントを使用します。ブラウザでの認可ステップやコールバック URL は必要ありません。

以下の接続プロパティを設定します。

• AccountName：Talkdesk アカウントの名前。
• Region：Talkdesk インスタンスがデプロイされているリージョン。指定できる値は US（デフォルト）、EU、CA、AU、UK、FedRamp です。
• OAuthClientId：カスタム OAuth アプリケーションの登録時に割り当てられた Client Id。
• OAuthClientSecret：カスタム OAuth アプリケーションに割り当てられた Client Secret。

カスタム OAuth アプリケーションの作成

1. Talkdesk アカウントにログインし、ナビゲーションメニューから OAuth Clients を選択します。
2. Create OAuth Client をクリックし、クライアントにわかりやすい名前を付けます。
3. Grant Type を Client Credentials に設定します。
4. Add scopes をクリックし、アクセスしたいデータに応じたスコープを選択します。
5. Create をクリックし、Client Id と Client Secret をコピーします。

接続時、ドライバーは Talkdesk にアクセストークンを自動でリクエストしてキャッシュし、有効期限が切れると更新します。アプリケーションで選択したスコープが、クエリ予定のビューに対応していることを確認してください。対応していない場合、トークンのリクエストが失敗することがあります。

Windows Forms コントロール

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

using (TalkdeskConnection connection = new TalkdeskConnection(
"AccountName=myAccount;Region=US;OAuthClientId=myClientId;OAuthClientSecret=myClientSecret;")) {
  TalkdeskDataAdapter dataAdapter = new TalkdeskDataAdapter(
  "SELECT Id, Name FROM Users WHERE Active = 'true'", 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[] { "Name" });
  series.ArgumentScaleType = DevExpress.XtraCharts.ScaleType.Qualitative;
  series.ArgumentDataMember = "Id";
  series.ValueScaleType = DevExpress.XtraCharts.ScaleType.Numerical;
  chartControl1.Legend.Visibility = DevExpress.Utils.DefaultBoolean.False;
  ((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}

Web コントロール

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

using DevExpress.XtraCharts;

using (TalkdeskConnection connection = new TalkdeskConnection(
"AccountName=myAccount;Region=US;OAuthClientId=myClientId;OAuthClientSecret=myClientSecret;"))
{
  TalkdeskDataAdapter TalkdeskDataAdapter1 = new TalkdeskDataAdapter("SELECT Id, Name FROM Users WHERE Active = 'true'", connection);
  DataTable table = new DataTable();
  TalkdeskDataAdapter1.Fill(table);
  DevExpress.XtraCharts.Series series = new Series("Series1", ViewType.Bar);
  WebChartControl1.Series.Add(series);
  DataTable table = new DataTable();
  series.ValueDataMembers.AddRange(new string[] { "Name" });
  series.ArgumentScaleType = ScaleType.Qualitative;
  series.ArgumentDataMember = "Id";
  series.ValueScaleType = ScaleType.Numerical;
  ((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}