DevExpress Reporting & BI Dashboard — Early Access Preview (v24.1)

Our next major update (v24.1) is set for release in early June. This post details DevExpress Reports and BI Dashboard-related features we expect to ship in June and describes what’s included in our early access preview (EAP) build. For additional information on what we plan to ship in June, please refer to our v24.1 roadmap.

DevExpress Reports

Native Angular Report Viewer — Toolbar Customization API and OnPush Change Detection Strategy Support

With v24.1, our new Angular Report Viewer will give you the ability to customize its toolbar. The following code snippet demonstrates how to hide a toolbar item using the CustomizeMenuActions event handler:

CustomizeMenuActions(event) {
    var actionSearch = event.args.GetById(ActionId.Search);
    if (actionSearch)
        actionSearch.visible = false;

    var highlightEditingFieldsAction = e.GetById(DevExpress.Reporting.Viewer.ActionId.HighlightEditingFields);
    if (highlightEditingFieldsAction)
        highlightEditingFieldsAction.visible = false;
}

The code snippet below adds a custom export option to the toolbar using the same event handler:

function CustomizeMenuActions(event) {
    const actionExportTo = event.args.GetById(ActionId.ExportTo);
    const newFormat = {
        format: 'NewFormat',
        text: 'New Format'
    };
    if (actionExportTo) {
        actionExportTo.events.on('propertyChanged', (args) =>
        {
            const formats = actionExportTo.items[0].items;
            if (args.propertyName === 'items' && formats.indexOf(newFormat) === -1)
                formats.push(newFormat);
        });
    }
}

The second Angular-related enhancement introduces OnPush Change Detection Strategy support. Angular's OnPush change detection strategy improves overall performance by reducing unnecessary rendering cycles and only triggers change detection when input references change. With v24.1, you can change the detection strategy used from default to ChangeDetectionStrategy.OnPush by adding the changeDetection property to the @Component decorator as follows:

import {
    Component,
    ViewEncapsulation
} from '@angular/core';
import {
    CommonModule
} from '@angular/common';
import {
    RouterOutlet
} from '@angular/router';
import {
    DxReportViewerModule
} from 'devexpress-reporting-angular';

@Component({
    selector: 'app-root',
    changeDetection: ChangeDetectionStrategy.OnPush,
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [
        CommonModule,
        RouterOutlet,
        DxReportViewerModule)
	],
	templateUrl: './app.component.html',
	styleUrls: [...]
})

export class AppComponent {
    title = 'DXReportViewerSample';
    reportUrl: string = 'TestReport';
    hostUrl: string = 'https://localhost:5001/';
    invokeAction: string = '/DXXRDV';
}

Microsoft Azure and Amazon Web Services App Deployment Tutorials

We have created and published a set of help topics for those who expect to deploy DevExpress Reports-powered web apps to Microsoft Azure and AWS. The tutorials include:

Microsoft Azure

• The deployment of an ASP.NET Core Reporting app via Visual Studio to Azure App Service (Linux)
• The deployment of a dockerized ASP.NET Core Reporting app via Visual Studio/CLI to Azure App Service (Linux)
• The deployment of an Azure Functions App (Linux-based) with Reporting capabilities
• The use of Azure Storage Cache to store report documents

Amazon Web Services (AWS)

• The deployment of a dockerized ASP.NET Core Reporting app (Linux-based) to AWS Elastic Container Service using AWS Fargate
• The deployment of an AWS Lambda function app with Reporting capabilities using the Lambda Annotations Framework
• The creation and deployment of a REST API application with Reporting capabilities to AWS Lambda

I encourage you to review these new help topics and submit your feedback if you see a room for enhancement: DevExpress Reporting — Cloud Integration.

New Standalone Parameters Panel Component for Modern Web Platforms (ASP.NET Core, Blazor, Angular)

v24.1 will include a new standalone Report Parameters Panel component. The purpose of this component is to automatically generate a layout for report parameter editors, (including grouping) based on a report instance supplied from the backend.

This component will be particularly useful to those who must create a report programmatically and then export it or send it by mail, without displaying its print preview to the end-user. Use of this component will help reduce the memory footprint, since it eliminates the need to generate report images in the background and send them to the client app. 

Our implementation is based on the DevExpress Report Viewer component's Parameters Panel. It offers access to nearly the same set of the component public properties and events (report parameter related). Here's a sample component definition for the Angular platform:

<dx-report-parameters-panel class="parametersPanel" [reportUrl]="yourReportName" height="560px" width="400px">
	<dxrpp-request-options [invokeAction]="invokeAction" host="http://yourhostname:port/"></dxrpp-request-options>
	<dxrpp-callbacks (BeforeRender)="onBeforeRender($event)"></dxrpp-callbacks>
</dx-report-parameters-panel>

The panel allows you to create custom submit buttons and handle associated click events. As you would expect, you can serialize input parameter values, send them to the backend app, and then apply them to an instance of the XtraReport class before print or export operations:

onBeforeRender(event) {
    this.sender = event.sender;
    const panel = this.sender.GetParametersModel();
    panel.buttons.push({
        text: 'Export',
        onClick: async () => {
            const data = this.sender.SerializeParametersState();
            const formData = new FormData();
            formData.append('serializedParameters', data);
            formData.append('reportUrl', this.reportUrl);
            const result = await fetch(`${this.host}/ExportWithParameters`, {
                method: 'POST',
                body: formData
            }).then(response => response.json());
            alert(result.message);
        }
    }, {
        text: 'Send Email',
        onClick: () =>; {
            alert('Email sent');
        }
    });
    panel.showButtons = true;
}
    

The following code snippet illustrates how to apply parameter values to the backend:

public async Task <IActionResult> ExportWithParameters(
   [FromServices] IReportParametersSerializer reportParametersSerializer,
   [FromForm] string serializedParameters,
   [FromForm] string reportUrl) {
   var report = await reportParametersSerializer.ApplyParametersStateAsync(reportUrl, serializedParameters);
   report.ExportToPdf("yourFilePath");
   return Ok(new {
      Message = "A report has been successfully exported"
   });
}

Skia-Based Graphics Engine (non-Windows Environment) Performance Enhancements

We refactored our cross-platform drawing engine and added font caching and optimized dynamic memory allocation. Internal tests suggest significant improvement when generating a 1500 page report:

• The time needed to create a 1500 page report decreased by approximately 20% (9 sec vs. 11 sec).
• The time needed to export a 1500 page report to PDF decreased by approximately 16% (7.25 sec vs. 8.7 sec).
• The time needed to export a 1500 page report to an image decreased by approximately 10% (5.2 sec vs. 5.7 sec).

Overall CPU usage also decreased by approximately 8-10%.

Note: Performance benefits will be most pronounced when generating large report documents.

DevExpress BI Dashboard

Cascading Parameters

You can now set up cascading parameters to filter the data source or items in a dashboard. This update allows the list of options in a dependent parameter to refresh automatically when you alter the value of the parent parameter. To utilize this feature, you'll need to modify the data source of the dependent parameter (i.e., using the Query Builder for SQL-based data sources) and incorporate filtering based on the value of the parent parameter.

Web Dashboard — Cache Management API

This update gives you the ability to control our BI Dashboard's built-in caching mechanism.

You can now use the ASPxDashboard.DataSourceCacheEnabled property for Web Forms (or the DashboardConfigurator.DataSourceCacheEnabled for other web platforms) to disable caching entirely. This forces the dashboard to load the most relevant data whenever a user accesses/views a dashboard.

By default, whenever a dashboard parameter value changes, a new data source instance is created and stored in the cache. This behavior impacts memory usage, especially when a parameter does not affect data source filtering. As such, we've added a ASPxDashboard.DataSourceCacheKeyCreated event to prevent creating new cache records based on parameters values/available event arguments. Consider the following code...

DashboardConfigurator.Default.DataSourceCacheKeyCreated += (s, e) => {
    if(e.Key.DashboardId == "MyDashboard")
        e.Key.Parameters.Clear();
};

In this scenario, altering a parameter value updates dashboard item data, while reusing the existing data source from the cache without additional fill requests.

Furthermore, you can utilize this event to update a specific data source when dashboard interactions takes place:

DashboardConfigurator.Default.DataSourceCacheKeyCreated += (s, e) => {
    if(e.Key.DataSourceId == "dsSales") 
        e.InvalidateCacheRecord();
};

Another use case involves increasing the cache key granularly by including groups of users or the users themselves in the cache key. You can utilize the new Dictionary<string,string> CustomData property for this purpose. The primary advantage of this strategy is that the key is only used for creating/retrieving records from the cache and is never exposed on the client side, improving security-related aspects of the implementation:

 DashboardConfigurator.Default.DataSourceCacheKeyCreated += (s, e) => {
    e.Key.CustomData.Add("UserId", CurrentUser.UserId);
};

Common Enhancements

SqlDataSource Wizard — Trust Level Certificate and Encryption Options

We enhanced the user experience in our Data Source Wizard when binding a report/dashboard to an instance of MS SQL Server. The data source connection screen now features two new options highlighted in the following screenshot:

These new options allow you to avoid the "The certificate chain was issued by an authority that is not trusted" error when binding a report to MS SQL Server database.  Learn more about this error and its underlying cause in the following Microsoft documentation topic: The certificate chain was issued by an authority that isn't trusted - SQL Server | Microsoft Learn.

SqlDataSource — Postgres Data Driver v7.0 Support

Initially, we hoped to bind reports and dashboards to Postgres Stored Procedures but discovered that they're of most use when executing update/delete database operations. Because the SqlDataSource component works in readonly mode, we ultimately chose to abandon our initial plans.

Accordingly, we modified our Postgres Database connection implementation so you can bind DevExpress Reports and BI Dashboards to Postgres Functions when using database driver v7.0 and higher.

JsonDataSource — The Use of The System.Text.Json NuGet Package

With v24.1, DevExpress Reports and BI Dashboard will utilize functionality from the System.Text.Json assembly/NuGet package by default. Our decision was influenced by security considerations (linked to third-party libraries) and improved performance offered by Microsoft's library. This package is part of .NET, and this change only pertains to the .NET product line; .NET Framework-based products remain untouched and will continue to use functionality from the Newtonsoft.Json package.

If, for any reason, you are unable to utilize the System.Text.Json functionality in your .NET-based application, you can set the DevExpress.DataAccess.Native.Json.JsonLoaderHelper.JsonProcessingLibrary property to NewtonsoftJson if you'd like to continue using the Newtonsoft.Json library. Please note that we provide this property for backward compatibility purposes. We expect to remove the option in future release cycles once our migration is complete.  

Breaking Change Description: System.Text.Json is used to process the JsonDataSource (DashboardJsonDataSource) component instead of the Newtonsoft.Json library

Your Feedback Matters

As always, we welcome your feedback on these new features. Should you encounter an issue while using this Early Access Preview build (v24.1), please submit a support ticket via the DevExpress Support Center. We will be happy to follow up.

Free DevExpress Products - Get Your Copy Today