DataBind Adobe Experience Manager Data to the DevExpress Data Grid

The ADO.NET Provider for Adobe Experience Manager 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.

The driver connects to Adobe Experience Manager (AEM) instances that expose the JCR repository over WebDAV. It supports both on-premises AEM and AEM as a Cloud Service deployments.

To establish a connection, set the following properties:

• URL: The WebDAV-enabled JCR server URL.
  • AEM as a Cloud Service: https://author-pXXXXX-eXXXXX.adobeaemcloud.com/crx/server
  • Local development: http://localhost:4502/crx/server
• User: Your AEM username.
• Password: Your AEM password.

Note: Tables are dynamically generated based on the JCR repository structure. Ensure that the configured user has sufficient permissions to access the required content paths in the AEM repository.

Windows Forms Controls

The code below shows how to populate a DevExpress chart with Adobe Experience Manager data. The AdobeExperienceManagerDataAdapter 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 (AdobeExperienceManagerConnection connection = new AdobeExperienceManagerConnection(
"URL=https://author-p12345-e67890.adobeaemcloud.com/crx/server;User=admin;Password=admin;")) {
  AdobeExperienceManagerDataAdapter dataAdapter = new AdobeExperienceManagerDataAdapter(
  "SELECT Id, Name FROM Content WHERE Name = 'example'", 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[] { "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 Controls

The code below shows how to populate a DevExpress Web control with Adobe Experience Manager data. The AdobeExperienceManagerDataAdapter 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 (AdobeExperienceManagerConnection connection = new AdobeExperienceManagerConnection(
"URL=https://author-p12345-e67890.adobeaemcloud.com/crx/server;User=admin;Password=admin;"))
{
  AdobeExperienceManagerDataAdapter AdobeExperienceManagerDataAdapter1 = new AdobeExperienceManagerDataAdapter("SELECT Id, Name FROM Content WHERE Name = 'example'", connection);
  DataTable table = new DataTable();
  AdobeExperienceManagerDataAdapter1.Fill(table);
  DevExpress.XtraCharts.Series series = new Series("Series1", ViewType.Bar);
  WebChartControl1.Series.Add(series);
  series.DataSource = table;
  series.ValueDataMembers.AddRange(new string[] { "Name" });
  series.ArgumentScaleType = ScaleType.Qualitative;
  series.ArgumentDataMember = "Id";
  series.ValueScaleType = ScaleType.Numerical;
  ((DevExpress.XtraCharts.SideBySideBarSeriesView)series.View).ColorEach = true;
}