Creating Custom Widget with Data Analytics in BizTalk360

December 22, 2016

BizTalk360 Version 8.0 was a major milestone release for BizTalk360. It was a complete overhaul of the product and introduced features like widget based dashboards and Analytics capabilities. From an end user standpoint, dashboard is perhaps the biggest feature they got in 8.0 loaded with customizable information and a variety of widgets to choose from. In a nutshell, it almost reminded us of the new Azure Portal. One small but powerful feature offered by Operations Dashboard is the ability to author custom widgets.

BizTalk360 Custom Widget is like a “plain canvas” and its potential is left to the user’s imagination.

With the BizTalk360 custom widget option, users can create widgets that can be integrated with any third party application like SalesForce, etc., as long as you have a working and accessible API.

Senthil Palanisamy, our Technical Lead at BizTalk360 wrote an interesting article on custom widgets, in which he talks about creating a custom widget that monitors the status of SQL jobs using BizTalk360 APIs. He also covers advanced topics like Place Holders and how to leverage BizTalk360 API documentation to create Custom Widgets.

In this article, I will show how to create a BizTalk360 custom widget that can show analytical data in graphical form.

Example Scenario

Let’s take the sales figures of XYZ company for example and see how we can create a BizTalk360 Custom Widget that projects the sales figures in graphical form. You will need an API that returns the number of units sold in a year for each month. I have a sample API hosted in GitHub that returns JSON data which we are going to use here. The first step is to create the custom widget.

How to create custom widget

A custom widget can be created from Operations Dashboard as follows

  1. Add Widget -> Add Custom Widget 

    BizTalk360 Custom Widget

  2. Once you reach the custom widget creation page, you need to provide the following details,
    • Name – A friendly name for your custom widget, say, Sales figures of ACME Corp
    • Description – This is an optional field. You can specify the description for your custom widget.
    • Script – This is where you insert your custom widget recipe/code. It has automatic syntax highlighting to make code more understandable and readable. Custom widget supports:
      • HTML
      • JavaScript
      • CSS

Script for custom widget:

<script>
//URL used to get JSON Data for the Charts
this.URL = 'http://rawgit.com/cyberkingvb/CustomWidgetWithChart/master/sales2016.json';

//Refresh interval in milliseconds 60000 milliseconds = 60 seconds
this.REFRESH_INTERVAL = 60000;

//flag to check if widget should auto Refresh
this.AUTO_REFRESH_ENABLED = true;

//Highcharts Options
this.HIGHCHART_OPTIONS = {
            chart: {
                type: 'line',
                zoomType: 'x'
            },
            exporting: {
                enabled: false
            },
            credits: {
                enabled: false,
                title: '',
                style: {
                    display: 'none'
                }
            },
            title: {
                text: 'Sales of 2016'
            },
            xAxis: {
                type: 'datetime'
            },
            yAxis: {
                min:0,
                title: {
                text: 'Units'
                },
            },
            tooltip: {
                crosshairs: true,
                shared: true,
                valueSuffix: 'Units'
            },
            legend: {
                enabled: false
            },
            series: [{
                name: 'Sales',
                data: []
            }]
        };
	
this.widgetDetails = ko.observable();
this.error = ko.observable(null);
var _this = this;
var getdata = function() 
    {
$.getJSON(_this.URL, function (data) 
    		{
      		    _this.HIGHCHART_OPTIONS.series[0].data = data;
    		    _this.widgetDetails(_this.HIGHCHART_OPTIONS);
		    _this.error(null);
    		}).fail(function(errorObject,error) 
			{
	console.log(errorObject);
	_this.error(errorObject);
});
    }

//loading data for the first time
getdata();
    
//handles auto refresh
if(this.AUTO_REFRESH_ENABLED)
	setInterval(getdata, this.REFRESH_INTERVAL);
	
</script>

<!-- ko if: error() == null -->
<div data-bind="highCharts: widgetDetails()" style="height:380px; width:700px"></div>
<!-- /ko -->

<!-- ko if: error() != null -->
<div class="row">
  <div class="col-md-offset-4 col-md-4 bg-danger">
    <b>
      <p>Error occured while trying to fetch data </p>
        <span>Status : </span><span data-bind="text:error().status"></span><br>
      <span>Status Text : </span><span data-bind="text:error().statusText"></span>
    </b>
</div>
</div>
<!-- /ko -->

For simplicity, the use of knockout has been minimized and most is done using basic JavaScript. If you notice in the beginning of the code, there are 4 configuration variables used.

URL

URL variable lets you configure the API URL from where you fetch the JSON data. Based on the Highcharts options, the formatting for the data may also change. Here in this example, the API returns the data as JSON array, and date-time stamp as a Unix Timestamp.

Example:


[
[1453939200, 1.1],
[1456617600, 1.8],
………………
………………
]

AUTO_REFRESH_ENABLED

This flag determines if your widget should be auto refreshed or not. For instance, if the service call that feeds your chart is very expensive and you don’t want to call that every now and then, then you can probably disable this flag or set the refresh interval to a higher value.

REFRESH_INTERVAL

Refresh interval lets you configure the interval after which the widget data should be refreshed. Note that the interval is in milliseconds so if you want it to refresh every one minute then you should set the refresh interval to 60000. Note that for auto refresh to work, IS AUTO_REFRESH_ENABLED flag must be set to true.

HIGHCHART_OPTIONS

BizTalk360 uses Highcharts for all data analytics. We already have the underlying binding handler framework to apply your chart options, and this makes analytic widget creation a lot easier. To modify the charts, you simply need to update the HIGHCHART_OPTIONS. In this example,

series: [{
            name: 'Sales',
            data: []
}]

the “data” property inside series array (where the data is supposed to be) is left as an empty array intentionally. It will be filled with the data that is retrieved from the URL that you have specified. Highcharts supports a variety of charts and you can follow this link to get the type of chart that you want to bring into your custom widget.

The line chart that we have created here can be converted into an Area chart or a Column chart by simply changing “type” under “charts” options in HIGHCHART_OPTIONS.

BizTalk360 Custom Widget - Area chart

BizTalk360 Custom Widget - Column chart

Basic error handing is also done for you, in case of error in accessing API, error info will be displayed along with return code.

Conclusion

I hope this article helps you to get started with implementing a BizTalk360 custom widget to view analytical data from external applications. You can also leverage BizTalk360 API documentation and create custom widgets with data from BizTalk360 Analytics APIs. The important analytics widgets that you wish to be on the operations dashboard can also be brought in.

Why not try this feature by downloading a Free Trial of BizTalk360? Get started today.

BizTalk360 - Free-Trial-for-Blog

Author: Vishnu Balachandran

Vishnu Balachandran is a Software Engineer at BizTalk360 having 2 years experience in Microsoft Technologies. He is passionate about software and hardware aspects of computing and very enthusiastic about learning new technologies. You can reach him on Twitter at @cyberking_vb.

Get full control of your BizTalk Environments

Over 500 customers across 30+ countries depend on BizTalk360

Start your 14 days Free Trial

Back to Top