Reporting — Early Access Preview (v23.1) — Optimized Page Loading for Web Apps, Font Fallback during PDF Export, Barcode Enhancements and More

Before I begin – a quick reminder: If you are an active Universal or DXperience subscriber and want to review/test upcoming v23.1-related features before official release, please download our Early Access Preview build via the DevExpress Download Manager. If you do decide to try our EAP, please let us know whether the capabilities outlined in this post address your business requirements. To provide feedback, please create a DevExpress Support Center ticket. We will be happy to follow-up.

Web Document Viewer — Streamlined First Page Load Time

v23.1 optimizes page load performance for our Web Document Viewer component. Our report document generation process now starts automatically on the server without a startBuild request from the client. This change allows us to display the first page of a report almost instantaneously.

• In single-page mode, the Document Viewer (by default) tries to preload the first 15 pages of a report (allowing users to seamlessly browse through the first set of pages while remaining pages are generated). You can modify the number of pages to preload by using our PreloadedPagesOffset setting.

• In multi-page mode, the Document Viewer now displays pages immediately - using a lower resolution (instead of displaying a loading indicator). This eliminates the need to wait for pages to load in full resolution and allows a user to quickly navigate to a specific report page.

Web Report Designer — Simplified Backend-only Registration of Custom Report Controls

DevExpress Reports offers a myriad of customization options and allows application developers to extend built-in functionality as needs dictate (from the user interface to custom report controls and expression functions).

In v23.1 we reduced the number of steps required to incorporate custom report controls in web apps with reporting capabilities. We eliminated the need to implement the presentation of a report control and register it on the client. With this update, you simply need to pass an instance of a custom report control to the DevExpress Web Report Designer at runtime. The component will then gather and transfer the required metadata to the client automatically. Our report document generation engine is able to resolve the custom report control and the Web Report Designer displays all control properties within the properties panel.

Try it out

Let’s create a custom control that extends an existing class and register it in a web application. The following code snippet demonstrates a custom MyControl class that inherits from the standard XRLabel control. In this example, we have overridden the PutStateToBrickmethod to display text in the control container (within the Report Designer):

using DevExpress.Utils.Serializing;
using DevExpress.XtraPrinting;
using DevExpress.XtraReports.UI;
using System.ComponentModel;
using System.Drawing;

public enum MyEnum { One, Two, Three }

public class MyControl : XRLabel {
    public static readonly SizeF InitSizeF = new SizeF(200, 50);

    [XtraSerializableProperty,
    DefaultValue(true)]
    public bool BoolProp { get; set; }

    [XtraSerializableProperty,
    DefaultValue(MyEnum.One)]
    public MyEnum EnumProp { get; set; }

    [XtraSerializableProperty]
    public Item[] ArrayProp { get; set; }

    protected override void PutStateToBrick(VisualBrick brick, PrintingSystemBase ps) {
        base.PutStateToBrick(brick, ps);
        brick.Text = EnumProp.ToString();
    }

    public class Item {
        [XtraSerializableProperty]
        public int PropA { get; set; }
    }
}

Our custom control includes the following properties:

• BoolProp - a boolean property
• EnumProp - an enumeration-typed property
• ArrayProp- an array-typed property (that actually is an array of integers)

ASP.NET Core

@{
    var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
        .Height("100%")
        .CustomControls(typeof(MyControl))
        .Bind("TestReport");
    @designerRender.RenderHtml()
}

ASP.NET MVC

@Html.DevExpress().ReportDesigner(settings => {
    settings.Name = "ReportDesigner1";
    settings.CustomControls.Add(typeof(MyControl)); 
}).BindToUrl("TestReport").GetHtml()

Angular

To register a custom control in an Angular application, modify the ReportDesignerController implementation: replace the IReportDesignerClientSideModelGenerator method calls with the IReportDesignerModelBuilder. The latter interface implements support to register custom controls.

The following code snippet is a modified implementation of the ReportDesignerController from our sample application created using the ASP.NET Core Angular Reporting template:

public CustomReportDesignerController(IReportDesignerMvcControllerService controllerService) 
          : base(controllerService) {
        }
        [HttpPost("[action]")]
        public IActionResult GetDesignerModel([FromForm] string reportUrl, 
            [FromForm] ReportDesignerSettingsBase designerModelSettings,
            [FromServices] IReportDesignerModelBuilder modelBuilder) {
            var dataSources = new Dictionary<string, object>();
            var ds = new SqlDataSource("NWindConnectionString");
            // Create a SQL query to access the Products data table.          
			SelectQuery query = SelectQueryFluentBuilder.AddTable("Products")
                .SelectAllColumnsFromTable().Build("Products");
            ds.Queries.Add(query);
            ds.RebuildResultSchema();
            dataSources.Add("Northwind", ds);
            var modelJsonScript = modelBuilder              
                .Report(reportUrl)
                .DataSources(dataSources)
                .CustomControls(typeof(MyControl))
                .BuildJsonModel();
            return Content(modelJsonScript, "application/json");
        }
    }

Blazor

@page "/reportdesigner"

@code{
List<Type> customControls = new List<Type> { typeof(MyControl) };
}

<DxReportDesigner ReportName="TestReport" Height="calc(100vh - 130px)" Width="100%" AllowMDI="true" 
CustomControls="customControls">
<DxReportDesignerWizardSettings UseFullscreenWizard="true" /></DxReportDesigner>

Result

To modify the default icon, create a template similar to the following on your page:

<script type="text/html" id="dxrd-svg-toolbox-mycontrol">
        <svg viewBox="-2 -4 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g id="Layer_1" transform="translate(-2, -4)" style="enable-background:new 0 0 32 32">
        <g id="Window">
          <path d="M30, 10L30, 5C30, 4.5 29.5, 4 29, 4L3, 4C2.5, 4 2, 4.5 2, 5L2, 10L30, 10z" fill="#1177D7" class="Blue" />
        </g>
      </g>
      <g id="Layer_1" transform="translate(-2, -4.00000095367432)" style="enable-background:new 0 0 32 32">
        <g id="Window">
          <path d="M28, 10L28, 26L4, 26L4, 10L2, 10L2, 27C2, 27.5 2.5, 28 3, 28L29, 28C29.5, 28 30, 27.5 30, 27L30, 10L28, 10z" fill="#727272" class="Black" />
        </g>
      </g>
    </svg>
</script>

The template id should start with the dxrd-svg-toolbox prefix and followed by the fully qualified type name of your control written in snake case. For example, for a DevExpress.XtraReports.CustomControls.SwissQRBill.XRSwissQRBill control type, the id will be the following: dxrd-svg-toolbox-devexpress_xtrareports_customcontrols_swissqrbill_xrswissqrbill

Your Feedback Counts

Please tell us what you think of this feature and how we can better address your requirements in the future:

Reporting for ASP.NET Core — Improved Content Security Policy Support

As you may already know, a Content Security Policy (CSP) is an additional layer of security that allows the browser to recognize and mitigate certain types of risks. In our previous major release (v22.2), we modified our source code to refuse script execution on the client, so you no longer need to specify the script-src 'unsafe-eval' CSP directive. The remaining exceptions are to specify the unsafe-inline keyword for script-src and style-src directives for our components to work correctly.

In our major upcoming release v23.1, we implemented a nonce-based approach for ASP.NET Core applications. This will allow you to disable styles inlining and execution of inline scripts (i.e., to remove the unsafe-inline keyword for the script-src and style-src directives). With this approach, we generate a cryptographic nonce (“number used once”), include it in our CSP, and add the nonce value in the nonce attribute in every script/style tag. The browser will only execute inline code that includes the correct nonce value. Once implemented, a threat actor cannot include/run a malicious script, because they can’t guess the nonce value. The nonce value regenerates each time you reload the page.

To disable inline styles and execution of inline scripts, use the new Nonce method at our Reporting components level. You need to assign the cryptographic value to this property and bind it to the view. Refer to the following GitHub example to learn how to implement a nonce-based CSP in your ASP.NET Core Application with DevExpress Reports:

• Reporting for ASP.NET Core - Content Security Policy (CSP)

Reporting for Desktop — Merged Data Source Wizard Page

We merged the two first pages of the Data Source Wizard (used in DevExpress Report Designers). Pages previously used to select data source type and database provider have been replaced with a single page that displays a flat list of all supported data sources.

• ChooseDataProviderPageEx<TModel>
• ChooseDataProviderPageViewEx

We also added the UseMergedProviderList property for backward compatibility. Set UseMergedProviderList to false to use our previous wizard design.

Barcode Enhancements

Functional Control (FNC) Symbols Support

In this major update, we added support for several FNC symbol types within our XRBarCodereport control. FNC (Functional Control) symbols provide additional information to the scanner (how the scanner must interpret and process data).

• FNC1Substitute
• FNC2Substitute
• FNC3Substitute
• FNC4Substitute

GS1 QR Code Support

v23.1 also includes a new type of bar code — GS1 QR Code. GS1 QR Code is a variant of the QR Code symbology that conforms to GS1 specifications. The GS1 standard is widely used across various industries such as retail, healthcare, and logistics

Create a GS1 QR Code

In the Report Designer, drag the XRBarCode item from the toolbox and drop it onto the report area:

Set the Symbology property of the control to GS1 QR Code and specify the barcode’s properties. The GS1 QR Code barcode is now ready to use:

Chart Localization

We are happy to announce that the following chart properties are now localizable (v23.1) and available in the Localization Editor:

• Titles
  • Legend
  • Pane
  • Series
  • Constant Line
• Small Chart Text
• Empty Chart Text
• Text Annotations
• Legend Text
  • Strip
  • Constant Line
  • Indicator
• Series Legend Text Pattern
• Strip Axis Label Text
• Custom Legend Item Text

In WinForms, click the Property column header to modify a filter and select chart properties:

Grid rows are arranged in the same order as XRChart controls: from top to bottom and from left to right.

Font Substitution for PDF Export Engine

v23.1 adds font substitution support to our PDF export engine. If a font used in a report does not contain a glyph for a character, the graphics library / PDF export engine will use a glyph from a fallback font (to display the character in the exported PDF file). The engine first looks for fonts specifically designed to be used as fallbacks. If fallback fonts are not available, the engine looks for fonts that are similar to the source font. As you would expect, end users will not lose text data when exporting reports to PDF, even when a font is not installed on the target machine.

The choice of a fallback font is entirely up to the drawing engine. Its internal algorithm selects a fallback font from fonts available in the system.

Your Feedback Matters

We realize beta-testing is a time-consuming process and we are grateful to those who invest time with our EAP builds. Find the current implementation lacking flexibility? Feel we’ve overlooked a valuable usage scenario? Does our current implementation fail to address your business requirements?

Please post your thoughts in our roadmap survey (if you have not yet voted) OR create a Support Center ticket. We will happily follow up and do what we can to address shortcomings.