DigiPri Widgets Sales Dashboard – Part 1: Overview

This article is Part 1 of a series of articles and tutorials centered on a sales dashboard application built using Flex and the Adobe Flash Platform. The individual articles in the series are designed to stand on their own, so you can read all of them or just the ones that interest you, in whatever order you like.

• Part 1 introduces the fictitious company DigiPri Widgets, explains the reasons behind selecting Flex, and provides a tour of the dashboard application.
• Part 2 details the server setup.
• Part 3 takes a closer look at the application and its architecture.
• Part 4 explains how to get the DigiPri Widgets Dashboard sample application up and running in Flash Builder 4 and explores some of the underlying code.

DigiPri Widgets is a fictitious reseller for the equally fictitious Widgets Incorporated. The management of DigiPri Widgets needed a way to evaluate the performance of their sales staff. The sales division of DigiPri Widgets is broken down into four regions, each overseen by a regional vice president. Within each region, there are several regional sales managers, who oversee the salespeople in the field. The primary requirement of this application is to enable the management of DigiPri Widgets to quickly review the sales organization's efficiency.

Note: In order to make the most of this tutorial series, a basic knowledge of the following programming languages and technologies is needed: Java, SQL, Flex 4, Flash Builder, and BlazeDS. Expert-level knowledge is not necessary, but a basic understanding of the technologies will enhance the learning experience.

Choosing Flex for rapid application development

DigiPri Widgets chose Adobe Flex to implement their sales dashboard after carefully considering the specific demands of this project. Flex applications run on the Flash Platform, which provides a robust runtime and lends itself to the creation of an expressive graphical user interface. This level of expressiveness is far more difficult to achieve using HTML or AJAX-based applications. Another benefit of the Flash Platform is its ubiquity, as over 98% of all Internet-connected desktops have Flash Player installed. Competing technologies, such as JavaFX and Silverlight, do not share this level of ubiquity and would require additional plug-ins for users to run the application.

One of the primary reasons DigiPri Widgets chose Flex is the out-of-the box functionality provided by the Flex Framework. With the rich class library provided by the Flex SDK, developers laid out the dashboard rapidly using prebuilt classes, which allowed them to focus on the more complex requirements and interactions.

The ability to rapidly prototype applications in Flex enabled quick iterations during the design phase and proved to be a significant advantage for designers, developers, and business stakeholders. Designers and developers could quickly test an idea in a proof of concept, allowing them to quickly determine which application interactions worked well and which didn't. Because stakeholders could interact with semi-functional prototypes instead of flat images, they were far better able to understand and provide feedback on the experience design. Frequent interaction among developers, designers, and stakeholders ensured that the stakeholders understood how the application would function when it was done, and allowed them to sign off on the interactions, resulting in far fewer design changes later in the project's life cycle.

After the visual and interaction designs were finalized, the developers assembled the core of the application with the built-in Flex components, and customized the components through styling, skinning, and subclasses to exactly match the design requirements.

Dashboard tour

The easiest way to get a feel for what the completed dashboard does is to try it out.

At the top of the dashboard are three tabs: Regional Sales, Client Deals, and My Dashboard (see Figure 1). You can click the tabs to change the reports that are shown in the viewing area below them.

The third tab (My Dashboard) allows users to customize their own views by adding reports from a preconfigured list of available report options. For more information on customizing reports, see Part 3 of this tutorial mini-series, Understanding the dashboard application.

Using the reports, executives can review all the relevant information for a particular topic, and find more detailed information by drilling into a specific data point. For example, the user may start by viewing the Regional Sales Forecasts chart (see Figure 2).

To get more details on what is happening in the northwest region, the user clicks the Northwest bar to change that graph to show details on the regional forecast for the northwest region (see Figure 3). Likewise, clicking one of the items on the northwest sales forecast chart will show details of the sales teams in that region. The user can click the back button on the top left of the report to return to a previous view.

The My Dashboard view is customizable. Users can select which reports are shown in that view, rearrange them, and remove them as needed. Each chart has a maximize button, which shows a full screen version. As noted earlier, many of the charts are designed to allow users to drill down to more specific information.

Where to go from here

Now that you have a better idea of what the DigiPri Sales Dashboard can do, you can learn more about how it works. You can proceed to Part 2 for more on setting up the server, skip to Part 3 to learn more about the application and its architecture, or jump to Part 4 to dive into the code using Flash Builder 4.