We are a couple of months away from our next major update. As such we wanted to share some of the features/capabilities you can expect in our v23.1 release and give you the opportunity to test our implementation before we wrap up our current development cycle.
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.
Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and other important data before installing Early Access and CTP builds.
This EAP may not include all features/products we expect to ship in our v23.1 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months.
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.
We have also reduced the value of the throttle to 150ms. Throttle is a function that limits the frequency of another function’s execution. Changing the throttle value reduces lag when scrolling through the report (due to getPage requests being sent to the server more often).
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)
In general, you need to pass your custom control type (or an array of types to register multiple custom controls) to the CustomControlsproperty. Navigate to the appropriate code snippet to register a custom control based on the Web platform you are using for app development:
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
Once you register the control, you can see the default icon (the question mark) in the Toolbox. You can now drop the control onto report bands and specify appropriate settings in the Custom Properties section of the Properties Panel.
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
If you’ve done everything correctly, you will see your custom icon in the Web Report Designer Toolbox:
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 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.
We also integrated a search bar to locate a required data source:
The next wizard page now contains connection settings specific to the selected data connection type:
The following Data Source Wizard Customization API members define the new wizard page when targeting WinForms and WPF platforms:
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).
Use the following properties to specify symbols (or set of symbols) in barcode text (symbols will be replaced with FNC(1-4) functional characters when you create a Code 128 barcode):
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:
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.
Free DevExpress Products - Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We'll be happy to follow-up.