Discover how a bimodal integration strategy can address the major data management challenges facing your organization today.
Get the Report →DataBind Adobe Commerce Data to the DevExpress Data Grid
Use the CData ADO.NET Provider for Adobe Commerce with the DevExpress Windows Forms and Web controls to provide Adobe Commerce data to a chart.
The ADO.NET Provider for Adobe Commerce by CData incorporates conventional ADO.NET data access components compatible with third-party controls. You can adhere to the standard ADO.NET data binding procedures to establish two-way access to real-time data through UI controls. This article will demonstrate the utilization of CData components for data binding with DevExpress UI Controls (Windows Forms and Web controls), specifically binding to a chart that visualizes live data.
Adobe Commerce uses the OAuth 1 authentication standard. To connect to the Adobe Commerce REST API, you will need to obtain values for the OAuthClientId, OAuthClientSecret, and CallbackURL connection properties by registering an app with your Adobe Commerce system. See the "Getting Started" section in the help documentation for a guide to obtaining the OAuth values and connecting.
You will also need to provide the URL to your Adobe Commerce system. The URL depends on whether you are using the Adobe Commerce REST API as a customer or administrator.
Customer: To use Adobe Commerce as a customer, make sure you have created a customer account in the Adobe Commerce homepage. To do so, click Account -> Register. You can then set the URL connection property to the endpoint of your Adobe Commerce system.
Administrator: To access Adobe Commerce as an administrator, set CustomAdminPath instead. This value can be obtained in the Advanced settings in the Admin menu, which can be accessed by selecting System -> Configuration -> Advanced -> Admin -> Admin Base URL.
If the Use Custom Admin Path setting on this page is set to YES, the value is inside the Custom Admin Path text box; otherwise, set the CustomAdminPath connection property to the default value, which is "admin".
Windows Forms Controls
The code below shows how to populate a DevExpress chart with Adobe Commerce data. The Adobe CommerceDataAdapter binds to the Series property of the chart control. The Diagram property of the control defines the x- and y-axes as the column names.
using (Adobe CommerceConnection connection = new Adobe CommerceConnection(
"OAuthClientId=MyConsumerKey;OAuthClientSecret=MyConsumerSecret;CallbackURL=http://127.0.0.1:33333;Url=https://myAdobe Commercehost.com;InitiateOAuth=GETANDREFRESH")) {
Adobe CommerceDataAdapter dataAdapter = new Adobe CommerceDataAdapter(
"SELECT Name, Price FROM Products", connection);
DataTable table = new DataTable();
dataAdapter.Fill(table);
DevExpress.XtraCharts.Series series = new DevExpress.XtraCharts.Series();
chartControl1.Series.Add(series);
series.DataSource = table;
series.ValueDataMembers.AddRange(new string[] { "Price" });
series.ArgumentScaleType = DevExpress.XtraCharts.ScaleType.Qualitative;
series.ArgumentDataMember = "Name";
series.ValueScaleType = DevExpress.XtraCharts.ScaleType.Numerical;
chartControl1.Legend.Visibility = DevExpress.Utils.DefaultBoolean.False;
((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}
Web Controls
The code below shows how to populate a DevExpress Web control with Adobe Commerce data. The Adobe CommerceDataAdapter binds to the Series property of the chart; the Diagram property defines the x- and y-axes as the column names.
using DevExpress.XtraCharts;
using (Adobe CommerceConnection connection = new Adobe CommerceConnection(
"OAuthClientId=MyConsumerKey;OAuthClientSecret=MyConsumerSecret;CallbackURL=http://127.0.0.1:33333;Url=https://myAdobe Commercehost.com;InitiateOAuth=GETANDREFRESH"))
{
Adobe CommerceDataAdapter Adobe CommerceDataAdapter1 = new Adobe CommerceDataAdapter("SELECT Name, Price FROM Products", connection);
DataTable table = new DataTable();
Adobe CommerceDataAdapter1.Fill(table);
DevExpress.XtraCharts.Series series = new Series("Series1", ViewType.Bar);
WebChartControl1.Series.Add(series);
series.DataSource = table;
series.ValueDataMembers.AddRange(new string[] { "Price" });
series.ArgumentScaleType = ScaleType.Qualitative;
series.ArgumentDataMember = "Name";
series.ValueScaleType = ScaleType.Numerical;
((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}