How to: Create an ASP.NET Web Forms Dashboard Designer Application

Aug 01, 2019
3 minutes to read

This example shows how to create a Web Dashboard Designer application and provide data for dashboards.

The project contains a simple dashboard and two available data sources: the XML and OLAP data sources. You can use these data sources to create a new dashboard. To learn how to create a Web Designer application from scratch, see the following topic: Create an ASP.NET Web Forms Designer.

Note that the OLAP data source requires the ADOMD.NET data provider installed on the web server. You can get the latest version of this provider here: https://www.microsoft.com/en-us/download/details.aspx?id=42295.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-create-a-web-dashboard-designer-application-t362490.

using System;
using System.Web.Hosting;
using DevExpress.DashboardCommon;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.ConnectionParameters;
using DevExpress.DataAccess.Sql;

namespace Dashboard_WebDashboard_2010 {
    public partial class WebForm1 : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {
            #region #DashboardStorage
            DashboardFileStorage dashboardFileStorage = new DashboardFileStorage("~/App_Data/Dashboards");
            ASPxDashboard1.SetDashboardStorage(dashboardFileStorage); 
            #endregion #DashboardStorage

            #region #DataSourceStorage
            DashboardSqlDataSource sqlDataSource = new DashboardSqlDataSource("SQL Data Source", "sqlConnection");
            SelectQuery countriesQuery = SelectQueryFluentBuilder
                .AddTable("Countries")
                .SelectColumns("Country", "Latitude", "Longitude", "Year", "EnergyType", "Production", "Import")
                .Build("Countries");
            sqlDataSource.Queries.Add(countriesQuery);

            DashboardOlapDataSource olapDataSource = new DashboardOlapDataSource("OLAP Data Source", "olapConnection");

            DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
            dataSourceStorage.RegisterDataSource("sqlDataSource1", sqlDataSource.SaveToXml());
            dataSourceStorage.RegisterDataSource("olapDataSource1", olapDataSource.SaveToXml());
            ASPxDashboard1.SetDataSourceStorage(dataSourceStorage);
            #endregion #DataSourceStorage
        }

        protected void ASPxDashboard1_ConfigureDataConnection(object sender, ConfigureDataConnectionWebEventArgs e) {
            if (e.ConnectionName == "sqlConnection") {
                string databasePath = HostingEnvironment.MapPath("~/App_Data/DashboardEnergyStatictics.xml");
                e.ConnectionParameters = new XmlFileConnectionParameters(databasePath);
            }
        }
    }
}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" 
         Inherits="Dashboard_WebDashboard_2010.WebForm1" %>

<%@ Register Assembly="DevExpress.Web.v16.2, Version=16.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web" TagPrefix="dx" %>

<%@ Register Assembly="DevExpress.Dashboard.v16.2.Web, Version=16.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <!--region #SwitchWorkingModes-->
    <div style="position: absolute; left: 80px; right: 0; top:0; bottom:30px;">
        <dx:ASPxButton ID="ASPxButton1" runat="server" Text="Switch to Viewer" 
            ClientInstanceName="button"
            AutoPostBack="False">
            <ClientSideEvents Click="function(s, e) {
                var workingMode = webDashboard.GetWorkingMode();
                if (workingMode == 'designer') {
                    webDashboard.SwitchToViewer();
                    button.SetText('Switch to Designer');
                }
                else {
                    webDashboard.SwitchToDesigner();
                    button.SetText('Switch to Viewer');
                }
            }" />
        </dx:ASPxButton>
    </div>
    <div style="position: absolute; left: 0; right: 0; top:30px; bottom:0;">
        <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" Width="100%" Height="100%" 
        ClientInstanceName="webDashboard" 
            onconfiguredataconnection="ASPxDashboard1_ConfigureDataConnection">
        </dx:ASPxDashboard>
    </div>
    <!--endregion #SwitchWorkingModes-->
    </form>
</body>
</html>

<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="WebForm1.aspx.vb" 
         Inherits="Dashboard_WebDashboard_2010.WebForm1" %>

<%@ Register Assembly="DevExpress.Web.v16.2, Version=16.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web" TagPrefix="dx" %>

<%@ Register Assembly="DevExpress.Dashboard.v16.2.Web, Version=16.2.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <!--region #SwitchWorkingModes-->
    <div style="position: absolute; left: 80px; right: 0; top:0; bottom:30px;">
        <dx:ASPxButton ID="ASPxButton1" runat="server" Text="Switch to Viewer" 
            ClientInstanceName="button"
            AutoPostBack="False">
            <ClientSideEvents Click="function(s, e) {
                var workingMode = webDashboard.GetWorkingMode();
                if (workingMode == 'designer') {
                    webDashboard.SwitchToViewer();
                    button.SetText('Switch to Designer');
                }
                else {
                    webDashboard.SwitchToDesigner();
                    button.SetText('Switch to Viewer');
                }
            }" />
        </dx:ASPxButton>
    </div>
    <div style="position: absolute; left: 0; right: 0; top:30px; bottom:0;">
        <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" Width="100%" Height="100%" 
        ClientInstanceName="webDashboard" 
            onconfiguredataconnection="ASPxDashboard1_ConfigureDataConnection">
        </dx:ASPxDashboard>
    </div>
    <!--endregion #SwitchWorkingModes-->
    </form>
</body>
</html>

Imports System
Imports System.Web.Hosting
Imports DevExpress.DashboardCommon
Imports DevExpress.DashboardWeb
Imports DevExpress.DataAccess.ConnectionParameters
Imports DevExpress.DataAccess.Sql

Namespace Dashboard_WebDashboard_2010
    Partial Public Class WebForm1
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
'            #Region "#DashboardStorage"
            Dim dashboardFileStorage As New DashboardFileStorage("~/App_Data/Dashboards")
            ASPxDashboard1.SetDashboardStorage(dashboardFileStorage)
            '            #End Region ' #DashboardStorage

            '            #Region "#DataSourceStorage"
            Dim sqlDataSource As New DashboardSqlDataSource("SQL Data Source", "sqlConnection")
            Dim countriesQuery As SelectQuery = SelectQueryFluentBuilder.
                AddTable("Countries").
                SelectColumns("Country", "Latitude", "Longitude", "Year", "EnergyType", "Production", "Import").
                Build("Countries")
            sqlDataSource.Queries.Add(countriesQuery)

            Dim olapDataSource As New DashboardOlapDataSource("OLAP Data Source", "olapConnection")

            Dim dataSourceStorage As New DataSourceInMemoryStorage()
            dataSourceStorage.RegisterDataSource("sqlDataSource1", sqlDataSource.SaveToXml())
            dataSourceStorage.RegisterDataSource("olapDataSource1", olapDataSource.SaveToXml())
            ASPxDashboard1.SetDataSourceStorage(dataSourceStorage)
'            #End Region ' #DataSourceStorage
        End Sub

        Protected Sub ASPxDashboard1_ConfigureDataConnection(ByVal sender As Object, _
                                                             ByVal e As ConfigureDataConnectionWebEventArgs)
            If e.ConnectionName = "sqlConnection" Then
                Dim databasePath As String = HostingEnvironment.MapPath("~/App_Data/DashboardEnergyStatictics.xml")
                e.ConnectionParameters = New XmlFileConnectionParameters(databasePath)
            End If
        End Sub
    End Class
End Namespace

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode