This sample will illustrate how to write a new dashboard bar chart widget, how to configure it using the Configuration Manager, add the widget in a dashboard designer and then have the widget displaying 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 be also written using Visual Basic .Net.

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

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

Right click References under TestCustomBarChartWidget Project. Click Add Reference…

Reference manager window will open. Click browse button.

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

Add a using statement : cDevWorkflow.cDevDecisoinEngine 

 Let’s start building the class, first implement the interface called: “deBarChartWidget”.  In order to implement the interface, we have to implement the “getData” method. The getData method is going to return clsBarChartWidgetReturn object. clsBarChartWidgetReturn has oSeries property. The oSeries property returns List<deBarChartSeries>.Each deBarchartSeries object in the list indicates series in the barchart. deBarchartSeries has four properties such as label which is used as the series name, color which applies color to the bar corresponding to the series, bars has bars property accepts instance of Bar class which has order property which show the bars in assigned order and finally data property which contains actual data for the series.

Usually bar charts are used for comparing relations of different data groups. We use date in x axis, y axis use count which represent the number of item created and updated.

First we need to create the dictionary of tick labels. In this we specify data of x axis with serial number starting from 0, as for y axis, we put in the value that will be shown in the label, in here we put in the date.

After finished with ticks, we can assign ticks to 

Add the widgetData attribute above the “clsTestItemActivity” class. The attribute accepts four parameters. The first parameter will be the widget name. Second parameter accepts the widget description. Third parameter will be the widget category. Fourth parameter is the widget display name.

Using 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: “TestCustomBarChartWidget.dll”.  Right click on 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” tab.

Click Auto Detect option in the widget Definitions tool bar. A new tab will open, which displays the list of widgets to configure.

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

Go to Manage Dashboards and select the “widgets” tab. Search for “item activity” (widget name) in the text box

Now that the widget is fully configured, let us add the new widget in 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.

Once the new dashboard is created, the dashboard design will open as shown below: 

Drag the “Item Activity” widget from the side toolbar and drop it to the placeholder in the right pane. Click save and preview the dashboard.

Go to the dashboard designer. Right click on widget and click edit. A modal window will open to configure widget user interface.

Change the background and text color for the selected widget. Click save.

Right click on widget and click preview. A modal window will open which previews the widget the configure user interface.

Click save and preview to render the dashboard.

 Rendered dashboard looks as follows: