dashboard-401330-web-dashboard-ui-elements-and-customization-dialogs-and-wizards-dashboard-data-source-wizard-customize-the-dashboard-data-source-wizard.md
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.
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.
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.
Database
| 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 |
JSON
| Page Name | Page ID | Class |
|---|---|---|
| Choose Connection (JSON) | JsonDataSourceWizardPageId.ChooseConnectionPage | ChooseJsonConnectionPage |
| Choose JSON Source | JsonDataSourceWizardPageId.ChooseJsonSourcePage | ChooseJsonSourcePage |
| Select Data Fields | JsonDataSourceWizardPageId.ChooseJsonSchemaPage | ChooseJsonSchemaPage |
OLAP
| Page Name | Page ID | Class |
|---|---|---|
| Choose Connection (OLAP) | OlapDataSourceWizardPageId.ChooseConnectionPage | DashboardChooseOlapConnectionStringPage |
To hide a data source type from the “Select Data Source Type” page, set one of the corresponding Enable…DataSource properties to false.
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;">
@(Html.DevExpress().Dashboard("dashboardControl1")
.Width("100%")
.Height("100%")
.UseNeutralFilterMode(true)
.OnBeforeRender("onBeforeRender")
.Extensions(ext=>ext.DataSourceWizard(wiz=>wiz.WizardSettings(set=>set.EnableJsonDataSource(false).EnableOlapDataSource(false))))
)
</div>
@Html.DevExpress().Dashboard(settings => {
settings.Name = "Dashboard";
settings.Width = Unit.Percentage(100);
settings.Height = Unit.Percentage(100);
settings.UseNeutralFilterMode = true;
settings.ClientSideEvents.BeforeRender = "onBeforeRender";
settings.EnableJsonDataSource = false;
settings.EnableOlapDataSource = false;
}).GetHtml()
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server" Width="100%" Height="100%"
UseNeutralFilterMode="true" ondataloading="DataLoading"
EnableJsonDataSource="false" EnableOlapDataSource="false">
<ClientSideEvents BeforeRender="onBeforeRender" />
</dx:ASPxDashboard>
//...
extensions: {
'data-source-wizard': {
wizardSettings: {
enableOlapDataSource: false,
enableJsonDataSource: false
}
}
}
//...
Tip
See the Extensions Overview topic for mode information about extensions.
The resulting “Select Data Source Type” page:
Handle the customizeDataSourceWizard event. Use the event argument’s wizard property to get access to the Reporting’s Data Source Wizard events.
Handle the wizard’s beforePageInitialize event.
Compare the event argument’s pageId property value with the DataSourceWizardPageId.ChooseDataSourceTypePage value to identify the “Choose Data Source Type” page.
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) {
args.wizard.events.addHandler("beforePageInitialize", (args) => {
if (args.pageId === DevExpress.Dashboard.Designer.DataSourceWizardPageId.ChooseDataSourceTypePage) {
var page = args.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');});
return;
}
});
}
Handle the customizeDataSourceWizard event. Use the event argument’s wizard property to get access to the Reporting’s Data Source Wizard events.
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.
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.
(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") {
args.Wizard.events.addHandler("beforeInitialize", (args) => {
args.state.dataSourceType = DevExpress.Dashboard.Designer.ToDataSourceTypeNumber('Sql');
})
args.Wizard.events.addHandler("afterInitialize", (args) => {
args.wizard.pageFactory.unregisterMetadata(DevExpress.Dashboard.Designer.DataSourceWizardPageId.ChooseDataSourceTypePage);
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]);
}
}
})
}
}
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.unregisterExtension('dataSourceWizard');
dashboardControl.registerExtension(new DevExpress.Dashboard.MultiQueryDataSourceWizardExtension(dashboardControl));
Tip
See also : How to work with client-side API
After this, the wizard’s layout for the “Configure Query Parameters” and “Choose Queries” pages is switched to a multi-query version.