416.467.9100 | Dundas Data Visualization | Login
Welcome Guest
This is the support page for the legacy Dundas Dashboard application. For assistance with the current Dundas BI application please click here.

This site makes extensive use of JavaScript.

Please enable JavaScript in your web browser and reload the page before proceeding.

Creating a Dashboard User Control Sample: The Smiley Face Indicator

Hide navigation
Modified on Fri, 20 Aug 2010 04:19 PM Categorized as Add-ons, Samples

The purpose of the Smiley Face Indicator (SFI) sample is to demonstrate how to build a data visualization add-on for Dundas Dashboard. The controls is simplified three-state gauges that show whether a KPI falls into one of its pre-defined states.


Creating a DV control

The steps to create a DV control for Dundas Dashboard are:

  • Creating the Silverlight control
  • Creating the wrapper
  • Installing the DV control

Creating the Silverlight control

The first step in creating a data visualization control for Dundas Dashboard is to create a Silverlight control. To avoid tight coupling, the control should not reference any Dundas Dashboard APIs. It should expose a collection or single value property so the wrapper can pass appropriate data to the control. The SmileyFaceIndicator is using a single point for KPI rendering so it has a Value property exposed:

public double Value { get { return (double)GetValue(ValueProperty); } set { SetValue(ValueProperty, value); } }

Note: The Value property is exposed as a Dependency Property with an OnValueChanged event handler attached to its PropertyChanged event.

The control has three state setting properties:

  • TopIndicator
  • MiddleIndicator
  • BottomIndicator

These properties determine the three KPI states (Happy, OK, Unhappy). These properties are user-defined and will be shown on the property grid of the Dashboard Designer. Whenever the Value property is changed it is being compared to the state property ranges and the appropriate indicator is shown.

Creating the wrapper

Class Inheritance

The Dundas.Controls.DataVisualization.KpiIndicator project contains wrappers for the SmileyFaceIndicator control. The control wrapper needs to inherit from Dundas.Dashboard.DashboardControls.Extensibility.DashboardDataVisualizationControl if it will be using KPI data or from Dundas.Dashboard.DashboardControls.Extensibility.DashboardControl if it is a simple control that does not use data , such as Label or TextBox and does not require KPI binding.

The project refernces two Dundas Dashboard assemblies :

Dundas.Dashboard.Client Dundas.Dashboard.Plugins

Both assmemlies are located in \SDK\lib\Client\ directory.

The DashboardSmileyFaceIndicator class is a wrapper around the Silverlight control. Since it will be using KPIs it inherits from DashboardDataVisualizationControl.


The wrapper class has some attributes. These are the most important ones:

  • [DisplayName("Smiley Face Indicator")] — Name of the control that will be shown in the Designer toolbox.
  • [ToolboxBrowsable(40, 40, "Smiley Face Indicator", "")] — Specifies that the control will be visible in the Designer toolbox. Parameters indicate width, height name and icon image for the toolbox entry.
  • [Adorner(StandardAdorner.KpiInfo)] — Lets the user see information about which KPIs are used by the control.
  • [Adorner(StandardAdorner.Selection)] — Lets the item to be selected in the Designer.
  • [Adorner(StandardAdorner.ControlInfo)] — Lets a user view information about the control when that control is invisible or doesn't show any content.

Various inherited properties can be specified through attributes as well:

  • [DesignerBrowsable("MaxWidth", DesignerBrowsableVisibility.Advanced)] — Indicates that the control will have a MaxWidth property in the toolbox and that the property should be classified as Advanced.
  • [DataContract] (optional) — Tells the Silverlight serializer to only serialize properties marked with the [DataMember] attribute. If [DataContract] is added to the class attributes, all properties on the wrapper which you want to save must have [DataMember]. The attribute can be used to exclude public properties from being serialized. Without this attribute, all properties in the wrapper will be serialized when the dashboard is saved.

DashboardDataVisualizationControl implementation

This property provides access the wrapper's Silverlight control. In this case it is SmileyFaceIndicator.

  • protected override void CreateWrappedElement() — Creates the wrapped property. It is called in the base class constructor. Wrapped element creation and property setup should be done in this method.
  • public override Dictionary<string,Type> GetRegisteredScriptTypes() — Used to register types that can be accessed with DundasScript. It is also possible to register objects for scripting using the public override Dictionary<string, object> GetRegisteredScriptObjects() method.
  • protected override void OnDashboardDataAdded(DashboardToken token, DataVisualizationDataParameters dataVisualizationDataParameters) — Called when dashboard data has been added to the DV. In other words when a KPI is dragged onto the control in the Designer.
  • protected override void OnInvalidateDataResult(DashboardInvalidateDataResultEventArgs invalidateDataResultEventArgs) — Called on data invalidation, such as a parameter change.


The DashboardSmileryFaceIndicator class exposes three properties:

  • BottomIndicator
  • MiddleIndicatorm
  • TopIndicator

The properties have following attributes :

  • [Category("Indicators")] — Incidates what category the property belongs to.
  • [DisplayName("Bottom Indicator")] — Name that will appear in the property grid.
  • [ExpandableObject] — Indicates that the object has sub-properties and will be expandable in the property grid.
  • [Styleable] — Indicates that the property is style-related.
  • [DataMember] — Specifies that the property is serializable. (Since we marked the class as [DataContract]).

Note: Since the Indicators are complex objects themselves a wrapper needs to be created. The property wrapper class must implement the Dundas.Dashboard.DashboardControls.Extensibility.DashboardObject class.

The methods/properties that need to be overriden are:

  • protected new SmileyFaceIndicatorSettings WrappedElement() — Returns the wrapped object.
  • protected override void CreateWrappedElement() — Creates the wrapped element instance.

The properties of the wrapped object need to be exposed as public properties and marked as [DataMemeber] if the wrapper class is marked as [DataContract].


The installation process is two-fold:

  • Add-on Packaging
  • Add-on Installation

When creating a plug-in in package the wrapper (Dundas.Controls.DataVisualization.DashboardSmileyFaceIndicator.dll) and the Silverlight control (SmileyFaceIndicator.dll) assemblies need to be included.

Please refer to the following articles for detailed information :


DundasDVPlugin.zip - Dashboard DV Plugin Visual Studio 2010 Solution

About Dundas | Contact Us Follow us on Twitter! | Privacy Statement | Report Site Issues

Copyright © 2009-2012 Dundas Data Visualization, Inc.