Design Dashboard

The DevExpress Dashboard Components

DevExpress provides us with two separate components that deal with the dashboard. First, there is the Dashboard Designer, which is the focus of this article. Second, there is the Dashboard Viewer, which is part of the Inquiry menu in the Acclamare desktop client. As the names imply, the Dashboard Designer is the tool you will use to create or modify a dashboard and the Dashboard Viewer is the tool that is used by the end-user to view the data.

The Dashboard Elements

There are several elements that make up a dashboard. All of them are used in conjunction to comprise the overall dashboard itself. The elements can be broken into two categories: data and presentation.

• Data Elements
  • Connection (see the next section)
  • Data Source
    • Think of this as a query
    • Has a name
      • The name is a visual confirmation of which query is being used by the selected element
      • The name is important to Acclamare (discussed later)
• Presentation Elements
  • Visual
    • Pivot
    • Grid
    • Chart
    • Pie
    • Gauge
    • Card
  • Non-Visual
    • Filter
    • Drill Down

How the Designer Uses Connections and Data Sources

The designer is a widget that is provided to us by DevExpress. Aside from the charts, grids, and other visual elements that make up a dashboard, you need to be aware of the how the data is supplied and how Acclamare implements the viewer.

The dashboard designer and viewer are actually designed by DevExpress to be a two-tiered system. That is, both widgets are supposed to talk directly to the database. Acclamare, however, is designed to be n-tiered; the client never talks to the database, nor does it even know where it exists.

When working with a new dashboard, the fist thing the designer will ask you for is a connection to the database. You will need to provide the typical settings so that the designer knows where the database is and how to connect to it. Once the connection is established, the designer will ask you to give your data source a name.

The data source name is important and will be discussed soon in another section. For now, know that the name is important and that the name will be used in the designer are your visual confirmation of where the data is coming from for the particular dashboard element that is currently selected.

How the Viewer Uses Data Sources

DevExpress does provide a way for the programmer to intervene in the data retrieval process for the viewer. It does this by telling the programmer the name of the data source that is seeking data. This allows me to write the system so that the dashboard viewer can function like the rest of Acclamare and be a true n-tiered solution. This is also the key to how you will name and use data sources within the designer. Since we aren't allowing the viewer to run in a two-tiered fashion, we must know the names of the data sources ahead of time. That means that you are limited to the predefined data sources that Acclamare is already coded to handle. Were you to use a data source name that isn't handled, the dashboard element using that data source simply won't be displayed.

Data Sources and Stored Procedures

To allow for easy customization of data (within reason), I chose to make all of the available dashboard queries into stored procedures. These procedures can be modified to meet your needs in the same way that search (pFindxxx) stored procedures can be modified.

To make this as easy as possible, for both me and you, I implemented a simple naming convention. Every data source must be named according to the stored procedure that it is requesting data from. All procedures are prefixed with pDashboard. All data source names should be the same as the corresponding procedure, less the prefix.

Where to Begin

Starting From Scratch

1. Start by clicking 'New'.
2. The designer will then ask you for a name for your data source. Follow the convention detailed above.
3. Click 'Next'.
4. Specify a database connection. The name here isn't important, it's only used in the designer.
5. Click 'Next'.
6. Check 'Open Query Designer after closing the wizard'.
7. Click 'Finish'.
8. Switch to the 'SQL View' tab and type "exec pDashboardxxx" where xxx is the actual name of the query you want to run.
9. Click 'OK'.
10. Click on any of the visual dashboard elements (listed above) and begin laying out the presentation of that element.
11. When you're finished, save the file. Don't forget to upload it in Dashboard Maintenance.

Modifying an Acclamare Default Dashboard

1. Before you begin in the designer, locate the file you wish to modify and open it in a text editor such as Notepad. In the first few lines of the file, you will find a line that specifies which database is being used. The line will read: <Parameter Name="database" Value="RedShoe" />. Modify the 'Value' within the quotes to be the name of the database you actually want to use.
2. Save your changes and return to the designer.
3. Click 'Open'.
4. The designer will then ask you to open the file you wish to modify. Navigate to the file you just changed and click 'Open'.
5. Select the visual element you wish to modify and make your changes.
6. When you're finished, I highly recommend using the 'Save As' feature. That way, you won't overwrite any of the default design and your changes won't get overwritten should we make updates to the default dashboards. Don't forget to upload your file in Dashboard Maintenance.

Tutorials

As for the designer itself, DevExpress has a great set of tutorials. You can find these videos on their website, or go directly to this YouTube channel.

When You Finish

Don't forget that you've only created/modified a file. The system won't be aware of it until you return to Dashboard Maintenance and upload your file.