Building, Configuring, and Displaying a Dashboard Pie Chart Widget

This sample illustrates how to create a new dashboard pie chart widget, configure it using the Configuration Manager, add it to a dashboard designer, and display it in the dashboard.

Start Microsoft Visual Studio 2015 and select “New Project”.   Select “C#” as the language and select “Class Library” as the project type.  This example is going to use C# as the development language.  This same example can also be written using Visual Basic .NET.

For the name of the project, provide “TestCustomPieChartWidget”.

Once the project is created, select “Class1.cs” and rename the class to “clsItemByStatus.cs”

Right-click References under TestCustomPieChartWidget Project. Click Add Reference…

Right-click References under TestCustomPieChartWidget Project. Click Add Reference…

The reference manager window will open. Click the browse button.

Add a reference to FlowWright by navigating to the following directory: “C:\inetpub\wwwroot\cDevWorkflow\bin”. Select the file “cDevDecisionEngine.dll”.

Add a using statement : cDevWorkflow. cDevDecisionEngine

Let’s start building the class, first implement the interface called: “dePieChartWidget“. The getData method is going to return a clsPieChartWidgetReturn object. clsPieChartWidgetReturn has a chartData property. The chartData property returns List<dePieChartSeries>. Each dePieChartSeries object in the list indicates a series in the pie chart. dePieChartSeries has three properties: label, which is used as the series name; color, which applies color to the corresponding series; and data, which contains actual data for the corresponding series.

Add the widgetData attribute above the “clsItemByStatus” class. The attribute accepts four parameters. The first parameter will be the widget name. The second parameter agrees with the widget description. The third parameter will be the widget category. The fourth parameter is the widget display name.

Using the widgetData attribute, we could automatically configure the widget in the configuration manager.

Navigate to the directory where the DLL was compiled to and select the DLL: “TestCustomPieChartWidget.dll”. Right-click the file and select “Copy” from the context menu.

Copy the widget dll to the following directory: “C:\inetpub\wwwroot\cDevWorkflow\bin”.

Start the FlowWright Configuration Manager > Manage Dashboards and select the “widgets” menu.

Select the “Utils > Auto Detect” menu item. A new tab will open, which displays the list of widgets to configure.

Select the widget, and select “Manage > Configure” menu item.

Let’s create a new dashboard and place the configured pie chart widget, and go to the dashboard management on the menu:

Select the Action - Create menu option. 

Now that the widget is fully configured, let us add the new widget to a dashboard. Go to Manage Dashboards. Create a new dashboard called “TestCustomWidgetDashboard”. Enter the new dashboard name, select the layout, and click the “Create” button to create the dashboard.

The dashboard designer pane is displayed in the new tab as shown below. 

Drag the “Item by Status” widget from the side toolbar and drop it into the placeholder in the right pane. Click Save and Preview on the dashboard menu.

The custom widget is rendered as shown below.

To change the widget properties, use the context menu on the widget.

Change the heading and body background and text color for the selected widget. Click the Save button.

The dashboard is rendered as shown below.