Skip to main content

Customize the Dashboard Data Source Wizard

  • 5 minutes to read

This topic describes how to customize the Dashboard Data Source Wizard. You can change the predefined wizard settings, remove a page, hide data source types and so on.

Wizard Customization Overview

The Dashboard Data Source Wizard implements the functionality of the Reporting’s Data Source Wizard.

To customize the Dashboard Data Source Wizard, handle the DataSourceWizardExtensionOptions.onCustomizeDataSourceWizard event. The event provides arguments that allows you to get access to the Reporting’s Data Source Wizard events.

Refer to the Reporting’s Wizard Customization Overview section for detailed information about events.

Data Source Wizard Pages

The following table lists the Dashboard Data Source Wizard’s pages, their IDs, and the corresponding classes.

Page Name Page ID Class
Select Data Source Type DataSourceWizardPageId.ChooseDataSourceTypePage DashboardChooseDataSourceTypePage

Depending on the selected data source type, the “Select Data Source Type” page provides access to the next pages listed below.


Page Name Page ID Class
Choose Connection (Database) SqlDataSourceWizardPageId.ChooseConnectionPage ChooseSqlConnectionPage
Choose Queries SqlDataSourceWizardPageId.ConfigureQueryPage ConfigureQueryPage
Configure Query Parameters SqlDataSourceWizardPageId.ConfigureParametersPage ConfigureQueryParametersPage
Choose Queries (a multi-query version) SqlDataSourceWizardPageId.MultiQueryConfigurePage MultiQueryConfigurePage
Configure Query Parameters (a multi-query version) SqlDataSourceWizardPageId.MultiQueryConfigureParametersPage MultiQueryConfigureParametersPage


Page Name Page ID Class
Choose Connection (JSON) JsonDataSourceWizardPageId.ChooseConnectionPage ChooseJsonConnectionPage
Choose JSON Source JsonDataSourceWizardPageId.ChooseJsonSourcePage ChooseJsonSourcePage
Select Data Fields JsonDataSourceWizardPageId.ChooseJsonSchemaPage ChooseJsonSchemaPage


Page Name Page ID Class
Choose Connection (OLAP) OlapDataSourceWizardPageId.ChooseConnectionPage DashboardChooseOlapConnectionStringPage

Hide Data Source Types

To hide a data source type from the “Select Data Source Type” page, set one of the corresponding Enable…DataSource properties to false.

Type API
Database ASPxDashboard.EnableSqlDataSource
JSON ASPxDashboard.EnableJsonDataSource
OLAP Data Source ASPxDashboard.EnableOlapDataSource

The following code snippet shows how to hide the JSON and OLAP data source types:

<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">


See the Extensions Overview topic for mode information about extensions.

The resulting “Select Data Source Type” page:

Hide Data Source Types Without Connections

  1. Handle the customizeDataSourceWizard event. Use the event argument’s wizard property to get access to the Reporting’s Data Source Wizard events.

  2. Handle the wizard’s beforePageInitialize event.

  3. Compare the event argument’s pageId property value with the DataSourceWizardPageId.ChooseDataSourceTypePage value to identify the “Choose Data Source Type” page.

  4. Use the target page’s typeItems collection to hide data source types without related data connections.

The following code snippet shows how to hide the data source types that do not have related data connections.

function onCustomizeDataSourceWizard(args) {"beforePageInitialize", (args) => {
        if (args.pageId === DevExpress.Dashboard.Designer.DataSourceWizardPageId.ChooseDataSourceTypePage) {
            var page =;
            if (!page.connectionStrings.sql || !page.connectionStrings.sql() || page.connectionStrings.sql().length == 0)
                page.typeItems = page.typeItems.filter(function(ti) {return ti.type !== DevExpress.Dashboard.Designer.ToDataSourceTypeNumber('Sql');});
            if (!page.connectionStrings.json || !page.connectionStrings.json() || page.connectionStrings.json().length == 0)
                page.typeItems = page.typeItems.filter(function(ti) {return ti.type !== DevExpress.Dashboard.Designer.ToDataSourceTypeNumber('Json');});
            if (!page.connectionStrings.olap || page.connectionStrings.olap.length == 0)
                page.typeItems = page.typeItems.filter(function(ti) {return ti.type !== DevExpress.Dashboard.Designer.ToDataSourceTypeNumber('Olap');});

Remove a Page

  1. Handle the customizeDataSourceWizard event. Use the event argument’s wizard property to get access to the Reporting’s Data Source Wizard events.

  2. Handle the wizard’s afterInitialize event. Use the event argument’s state property to access the dataSourceType object. Call this object’s unregisterMetadata method. Use the ToDataSourceTypeNumber property to pass the corresponding DashboardDataSourceType enumeration numeric value as the parameter. This removes the page’s metadata from the factory and hides the page from the navigation panel.

  3. Use the event argument’s wizard property to access the iterator object and override its getNextPageId method to remove the page from the navigation logic.

  4. (Optional) Handle the wizard’s beforeInitialize event and use the argument’s state property to update the wizard’s global state. This step is required if you want to create a data source with settings that differ from the page’s default settings.

The following code snippet shows how to remove the Select data source page and enable users to create SQL data sources only:

function onCustomizeDataSourceWizard(sender, args) {
    if (args.Type === "DataSourceWizard") {"beforeInitialize", (args) => {
            args.state.dataSourceType = DevExpress.Dashboard.Designer.ToDataSourceTypeNumber('Sql');
        })"afterInitialize", (args) => {
            var defaultGetNextPageId = args.wizard.iterator.getNextPageId;
            args.wizard.iterator.getNextPageId = function (pageId) {
                if (!pageId) {
                    return DevExpress.Analytics.Wizard.SqlDataSourceWizardPageId.ChooseConnectionPage;
                } else {
                    return defaultGetNextPageId.apply(this, [pageId]);

Change Dashboard Data Source Wizard

The Web Dashboard supports two Data Source Wizard types:

The Web Dashboard uses the DataSourceWizardExtension by default. The code snippet below shows how to enable the other wizard:

dashboardControl.registerExtension(new DevExpress.Dashboard.MultiQueryDataSourceWizardExtension(dashboardControl));

After this, the wizard’s layout for the “Configure Query Parameters” and “Choose Queries” pages is switched to a multi-query version.