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

WooCommerce 用の CData ADO.NET プロバイダーをDevExpress Windows Forms とWeb コントロールとともに使用し、WooCommerce をチャートに入力します。

加藤龍彦
デジタルマーケティング

最終更新日:2022-01-31

この記事で実現できるWooCommerce 連携のシナリオ

こんにちは!ウェブ担当の加藤です。マーケ関連のデータ分析や整備もやっています。

WooCommerce 用の CData ADO.NET プロバイダーはサードパーティーコントロールで使うことのできる通常のADO.NET データベースアクセスコンポーネントを実装しています。データバインドするための通常のADO.NET プロセスに従うことで、UI コントロールから実データへの双方向アクセスを可能にします。 この記事では、CData を使ってDevExpress Windows Forms とウェブコントロールにデータバインドする方法を説明します。ここでは、最新のデータを表示するチャートにデータバインドします。

WooCommerce は、one-legged OAuth1.0 認証と通常のOAuth2.0 認証をサポートします。

one-legged OAuth 1.0 認証を使って接続する

次のプロパティを指定してください(NOTE:次の資格情報はWooCommerce の設定ページで生成されるもので、WordPress OAuth2.0 プラグインで生成されるものとは異なります)。

  • ConsumerKey
  • ConsumerSecret

WordPress OAuth 2.0 認証を使って接続する

プラグインを設定した後、 次の接続プロパティを指定することでWooCommerce に接続できます。

  • OAuthClientId
  • OAuthClientSecret
  • CallbackURL
  • InitiateOAuth - GETANDREFRESH または REFRESH のどちらかに設定してください

どちらの場合方法でも、Url プロパティをWooCommerce インスタンスのURL に設定する必要があります。

Windows Forms コントロール

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

using (WooCommerceConnection connection = new WooCommerceConnection( "Url=https://example.com/; ConsumerKey=ck_ec52c76185c088ecaa3145287c8acba55a6f59ad; ConsumerSecret=cs_9fde14bf57126156701a7563fc87575713c355e5; ")) { WooCommerceDataAdapter dataAdapter = new WooCommerceDataAdapter( "SELECT ParentId, Total FROM Orders WHERE ParentId = '3'", 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[] { "Total" }); series.ArgumentScaleType = DevExpress.XtraCharts.ScaleType.Qualitative; series.ArgumentDataMember = "ParentId"; 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 コントロール

下のコードではWooCommerce でDevExpress Web を操作するための設定方法を説明します。WooCommerceDataAdapter はチャートのSeries プロパティにバインドします。Diagram プロパティはx 軸とy 軸をカラム名として定義します。 using DevExpress.XtraCharts; using (WooCommerceConnection connection = new WooCommerceConnection( "Url=https://example.com/; ConsumerKey=ck_ec52c76185c088ecaa3145287c8acba55a6f59ad; ConsumerSecret=cs_9fde14bf57126156701a7563fc87575713c355e5; ")) { WooCommerceDataAdapter WooCommerceDataAdapter1 = new WooCommerceDataAdapter("SELECT ParentId, Total FROM Orders WHERE ParentId = '3'", connection); DataTable table = new DataTable(); WooCommerceDataAdapter1.Fill(table); DevExpress.XtraCharts.Series series = new Series("Series1", ViewType.Bar); WebChartControl1.Series.Add(series); DataTable table = new DataTable(); series.ValueDataMembers.AddRange(new string[] { "Total" }); series.ArgumentScaleType = ScaleType.Qualitative; series.ArgumentDataMember = "ParentId"; 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.)

関連コンテンツ

トライアル・お問い合わせ

30日間無償トライアルで、CData のリアルタイムデータ連携をフルにお試しいただけます。記事や製品についてのご質問があればお気軽にお問い合わせください。