DevExpress Dashboard - Early Access Preview (v20.1)

Our next major update (v20.1) is a couple of months away. As such, we wanted to preview the features we expect to ship this Spring and invite all active DevExpress Universal subscribers to download our Early Access Preview (EAP). Your feedback will help us refine the features described below and allow us to ship the best possible royalty-free Dashboard platform in the marketplace.

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 v20.1 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months.

Active Universal Subscribers: Download the EAP Today

Extending DevExpress Dashboard's Lifecycle API

Earlier this year, we published our 2020 Roadmap and detailed our primary objective: To evolve DevExpress Dashboard and give you (and your end-users) the ability to effectively customize the Dashboard throughout its entire lifecycle.

Our Early Access Preview includes the following lifecycle-related API enhancements:

  1. Web Dashboard – Custom Properties for Dashboard Item, Custom Properties for Dashboard Data Item Containers (Chart Series, Grid Columns, Cards, Maps), Custom Properties For Dashboard
  2. Web Dashboard – Options Panel customization (based on DevExtreme Form API)
  3. Web Dashboard – event subscription with multiple handlers
  4. Web Dashboard – new event itemWidgetOptionsPrepared (which can be used as a replacement for a pair of events itemWidgetCreated / itemWidgetCreated)
  5. Web Dashboard – extended context for the existing events
  6. .NET Dashboard Model – Custom Properties for Dashboard Items, Custom Properties for Dashboard Data Item Containers and Custom Properties for Dashboard
  7. WinForms – simplified Ribbon Menu Customization based on Selected Dashboard Item Type (DashboardBarItemCategory and more).
  8. WinForms Dashboard Designer – new events (DashboardOptionsChanged, DashboardCustomPropertyChanged, DashboardItemSelected)
  9. WinForms Dashboard Designer & Viewer - extended context for event handlers. Extended context includes the Model of processed Dashboard Items (with Custom Properties)
  10. WPF Dashboard Viewer - extended context for event handlers
  11. Export Customization API.

Sample

I'll now demonstrate the value of our new API and illustrate how you can extend existing designer functionality with ease.

Let's assume you want to allow your end users to configure our Dashboard Chart Item. The goal is to change the drawing style used for the Chart's Line Series.

To begin, you'll need to set up your Web Dashboard Control. You'll need to declare and register the metadata for your custom property – the property that will store a user's selection in a custom LineTypeProperty XML element.

const lineTypeProperty = {
    ownerType: Model.SimpleSeries,
    propertyName: "LineTypeProperty",
    defaultValue: "solid",
    valueType: "string"
};
    
Model.registerCustomProperty(lineTypeProperty);

Next, you'll set up the Editors that are going to be displayed to end users:

_onCustomizeSections = function(args) {
…
    args.addSection({
        title: "Line Options (Custom)",
        items: [
            {
                dataField: lineTypeProperty.propertyName,
                editorType: "dxSelectBox",
                label: {
                    text: "Line style"
                },
                editorOptions: {
                    items: [
                        { value: "dash", displayValue: "Dashes" },
                        { value: "dot", displayValue: "Dots" },
                        { value: "longDash", displayValue: "Long Dashes" },
                        { value: "solid", displayValue: "Solid Line" },
                        { value: "dashdot", displayValue: "Dash-Dot" }
                    ]
…
                }
            }
        ]
});

You then subscribe to the new itemWidgetOptionsPrepared event to customize the widget based on user selection.

viewerApiExtension.on("itemWidgetOptionsPrepared", _onItemWidgetOptionsPrepared);
…
_onItemWidgetOptionsPrepared = function(args) {
    if (args.dashboardItem instanceof Model.ChartItem) {
        var seriesOptionArray = args.options["series"] || [];
        seriesOptionArray.forEach(function(seriesOption) {
            if (seriesOption.type === "line") {
                var series = args.chartContext.getDashboardChartSeries(seriesOption);
                if (series) {
                    var lineType = series.customProperties.getValue(lineTypeProperty.propertyName);
                    seriesOption.dashStyle = lineType;
                }
            }
        });
    }
};

That's all you'll need for the Web portion....

DevExpress Dashboard Web Custom Properties


If targeting desktops, you'll want to customize your WinForms Designer & Viewer to read and write the same metadata from the same XML Dashboard file.

If you want to add similar settings to WinForms Dashboard Designer, use the simplified Ribbon API:

var page = ribbon.GetDashboardRibbonPage(DashboardBarItemCategory.ChartTools, DashboardRibbonPage.Design);
RibbonPageGroup group = page.GetGroupByName("Custom Properties");
if(group == null) {
    group = new RibbonPageGroup("Custom Properties") { Name = "Custom Properties" };
    page.Groups.Add(group);
}

Next, you'll need to create a custom XtraForm and display it to your users:

DevExpress Dashboard Designer WinForms Custom Properties Ribbon Editor

For the last step, you'll need to subscribe to the DashboardItemControlUpdated event and use its extended context to read custom properties and configure your Chart accordingly.

void Designer_DashboardItemControlUpdated(object sender, DashboardItemControlEventArgs e) {
    if(e.ChartControl != null) {
        var chartItem = designer.Dashboard.Items[e.DashboardItemName] as ChartDashboardItem;
        var context = e.ChartContext;            

        var dashboardSeries = chartItem.GetRelatedSeries("LineTypeProperty");
        foreach(var series in dashboardSeries) {
            SeriesLineStyle seriesLineStyle = SeriesLineStyle.GetStyle(series.CustomProperties.GetValue("LineTypeProperty"));
            if(seriesLineStyle != null) {
                Series chartSeries = context.GetChartSeries(series).FirstOrDefault(x => x.Name.Contains(seriesLineStyle.SeriesName));
                if(chartSeries != null) {
                    LineSeriesView view = chartSeries.View as LineSeriesView;
                    if(view != null) {
                        view.LineStyle.DashStyle = seriesLineStyle.Style;
                    }
                }
            }
        }
    }
}

As you can see below, your dashboard will utilize the same data within the WinForms Designer & Viewer.

DevExpress Dashboard WinForms Custom Properties

This is just a simple example. You can apply the same customization within the WPF Dashboard Viewer control. You can also utilize it during export operations via our new Export Customization API. We will share additional examples in the ooming weeks and make them available in our GitHub Examples repo. Please stay tuned!

Note: This demo is available for both the Web and WinForms version of DevExpress Dashboard (EAP installation is required to open the link).

Measure Filter

You can now set up a Filter expression for a single Measure bound to your Dashboard Item (i.e. you can filter a single Measure to be calculated only for a specific time period or for a single Product Category, etc).

DevExpress Dashboard Filter to the Measure

This feature was not planned, but we needed it internally for the better Parallel Period support. We decided to publish it because it addresses use cases that you've shared with us in the past.

Tab Item – Performance Optimization Mode

We added new options for WinForms and WPF platforms so you can configure how Dashboard Items within Inactive Tabs are loaded during the first data load – always or on demand. Please note the documented restrictions on the Dashboard Items load order. We must always load data for Master Filter Item, even when it's placed on the Inactive Tab.

Export Customization API

v20.1 includes our new Export Customization API. Now, you can maintain maximum customization of XRControls. For our upcoming release, we chose to extend support for our most popular UI controls - Charts and Gauges. One of the entry points to the new API is the GetPrintableControl method. We updated the CustomerSupport demo to demonstrate this new approach. You can find it in the Dashboard Demo Center.

Viewer.CustomExport += OnCustomExport;
...

void OnCustomExport(object sender, CustomExportEventArgs e) {
    ChartDashboardItem chartItem = Dashboard.Items[e.ItemComponentName] as ChartDashboardItem;
    if(chartItem != null) {
        XRChart chartControl = (XRChart)e.GetPrintableControl(e.ItemComponentName);
        foreach(Series chartSeries in chartControl.Series) {
            LineSeriesView view = chartSeries.View as LineSeriesView;
            if(view != null)
                view.LineStyle.DashStyle = DashStyle.Dot;
        }
    }
}

JSON Data Source - Parameters Support

You can now bind your Dashboard Parameters to JSON Path Parameters and Query Parameters (for both the WinForms and Web version of DevExpress Dashboard).

DevExpress Web Dashboard JSON DataSource Wizard Parameters Support

Visual Warning in Expression Editor

We added a visual indicator – a warning icon – to our WinForms Expression Editor. In our EAP release, this indicator warns users that wish to execute [int] / [int] division – an action that can produce unexpected results. Some users may expect Excel-like behavior [int] / [int] = [double] (i.e. 10 / 4 = 2.5) in this scenario. As you may know, we historically stick to the .NET C# [int] / [int] = [int] approach in this situation (i.e. 10 / 4 = 2). This difference can obviously lead to data loss and as such, we decided to add a warning when [int] to [int] division is created in an Expression.

DevExpress WinForms Dashboard Expression Editor Warning

Comments in Calculated Fields

In case you missed it – with v19.2.5 and higher, you and your users can add Comments to your Calculated Fields. This feature should help improve readability for complex expressions (together with Line Breaks and Spaces in Calculated Fields which was introduced in our v19.2.3 release).

Rich Text Editor for TextBox Item in Web

DevExpress Web Dashboard Rich Text Editor

We recently mentioned the availability of Rich Text Editor for TextBox Dashboard Items (available as a CTP in our v19.2.6 release). Rich Text Editor will be officially released in our v20.1 release cycle.

In the Works

Card Item Conditional Formatting

While we decided to not include this feature in the Early Access Preview release, the progress of this feature is moving along nicely.

We have already created and mostly finalized the Model for CardConditional Formatting Rules. Our data engine is can already calculate the required rules and pass results to WinForms, Web and WPF user interfaces. The only missing piece is the Designer portion of Web / WinForms Dashboard Designers.

As we promised, you will be able to create conditional formatting based on the Measure (Actual or Target Values), Series Dimension AND you will be able to set up a highlighting rule based on the delta between Actual / Target.

You will be able use Formatting Styles similar to those used for Grid / Pivot Grid conditional formatting. You will be able to change selected Card element Font, add an Icon or apply the background color to the entire Card.

We expect this feature to be available in our v20.1 Beta (v20.1.2) in early April.

Parallel Periods

We plan to incorporate additional enhancements for parallel periods in our v20.1 release.

We are working on this feature and already shared intermediate results with you (see Measure Filter above). We prepared a demo that shows how you can utilize Measure Filter to compare data between Parallel Periods (in Charts, Grids, in Delta columns). The demo is available online and in our WinForms Demo Center (Early Access Preview should be installed).

We are presently reconsidering UI/UX options for this feature.

Year-Week Group Interval

This feature is still on target for our v20.1 release.

Your Feedback Matters

As always, we welcome your feedback. Please post your comments below or create a new support ticket if you've beta tested our Early Access Preview.

What’s New in v20.1

To explore the scope, breadth and capabilities of our new products/features, please visit: https://www.devexpress.com/Subscriptions/New-2020-1.xml.
8 comment(s)
Jonatas Hudler
Jonatas Hudler

Thank you for the Export/Printing customization API!

We were already applying some customizations at design/view mode, but these would not appear in exports.

This will help us a lot, since for our costumers the Dashboard suite has also become a report generator.


6 March 2020
Pietro Allegretti
Pietro Allegretti

Hi Andrey,

I see you 've implemented Parallel Periods through measure filters. Exciting implementation and much more flexible. I think this way we'll be able to use the filter even for non-date/time dimension. What about the "Missing Values" feature you talked about in Dashboards 2020 Roadmap?

6 March 2020
Andrey (DevExpress)
Andrey (DevExpress)
@Jonatas Hudler
I'm happy to hear that you like this new feature :)
 
 
@Pietro Allegretti
Thank you.
We are reconsidering our UI/UX options at the moment, and this concerns the Missing Values feature.
10 March 2020
Marcel Scherpenisse
Marcel Scherpenisse
Will the "Rich Text Editor for TexBox Item" in Web become available as stand alone control or just as part of the Dashboard functionality?
12 March 2020
Aleksandr S.
Aleksandr S.

Hello, 

do i understand correct, that "Tab Item - Performance Optimization Mode" is not yet available for MVC in this Early Access Preview?


We've been waiting for this feature.. Will it be available to test prior the official release?

16 March 2020
Andrey (DevExpress)
Andrey (DevExpress)

@Marcel Scherpenisse
Rich Text Editor is available for both classical ASP
.NET platforms (Web Forms and MVC) and ASP.NET Core.

@Aleksandr S.
We expect to include some results of our performance optimization in the Beta release, prior to the official release of v20.1.

26 March 2020
Daniel Hall 5
Impulze
The ability to add custom properties to the already awesome DX widgets is a godsend!  I've written over 75 custom widgets for the dashboards including widgets for twitter, custom HTML, blockchain, and even TradingView charts.  These custom properties can sometimes be the difference between writing a completely new widget or just making small customizations.  Please see the following thread where I show you how to use the dxPopup for displaying the help instead of tooltips.  Version 20.1 is a huge game change Dashboard Team.  Thank you for listening, much appreciated!
4 May 2020
Daniel Hall 5
Impulze
Here's the link to the dxPopup version of  DashboardDescriptionExtension.  The same can be applied for the ItemDescriptionExtension.  https://supportcenter.devexpress.com/ticket/details/t885928/web-dashboard-how-to-display-dashboard-descriptions-in-a-dxpopup-using-custom-properties
4 May 2020

Please login or register to post comments.