Best Practices to Create Custom Widgets in BizTalk360

by Senthil Kumar Palanisamy | Oct 25, 2018 | BizTalk Community Blogs via Syndication

Introduction

Custom widgets are powerful feature in BizTalk360, that allow the users to bring third-party integrations into BizTalk360.  It will be useful to bring the custom solutions into the BizTalk environment as it allows to view integrated solutions in one single tool.

Custom widgets can be used for various purposes, below list constitute few important scenarios;

• Embed third-party portals like Power BI or internal portals
• Monitor BizTalk Artifact Statuses
• Display query results using Secure SQL Queries

In this article, we can see important best practices while creating Custom widgets.

Best Practices 

1. Hiding confidential information in Custom Widgets with Placeholders

Custom Widgets are created using API’s (e.g.: BizTalk360 or BizTalk Integration API), which might contain confidential information like the credentials of your BizTalk360 Service Account or API Authenticated credentials. Of course, you don’t want this information to be revealed in plain text in your widgets. To hide such confidential information, you can use Placeholders.

Beside using Placeholders to hide confidential information, you can also use them for providing frequently used data to your Custom Widgets. Think of for example the BizTalk360 “EnvironmentId”, which is a value which often needs to be provided to Custom Widgets. By creating a Placeholder for the “EnvironmentId”, you can easily re-use it and you don’t need to search for such values, each time you are creating a Custom Widget which needs such a value.

Read this article to know more about creating the place holders and how it can be used in widget.

2. Knockout JS Functions

Frequently, utility functions are used while binding the data to view. In these situations, the user can utilize the BizTalk360 referenced utility functions.

BizTalk Integration API methods returns its responses in XML format. To represent the data in client script(JavaScript/jQuery),it needs to be in JSON format.

x2js = new X2JS({ attributePrefix: '' });
bizTalkHostsList = function () 
{
  var _this = this;
 _this.getBizTalkHosts(function (data) 
  {
   _this.bizTalkHosts(x2js.xml_str2json(data.queryResult));
  });
};

When a view expects the API method to return the result as an array, occasionally a single record is produced. In this situation,the API result needs to be converted to an array. 

x2js = new X2JS({attributePrefix: '', arrayAccessForm:"property", 
arrayAccessFormPaths : ["root.records.record"]});
bizTalkSendPortsList = function () {
      var _this = this;                 
      _this.getbizTalkSendPorts(function (data) 
{
      var results = x2js.xml_str2json(data.queryResult);
      if (Array.isArray(results.root.records.record))
         _this.bizTalkSendPorts(results.root.records.record);
      else {
         _this.bizTalkSendPorts([results.root.records.record]);
         }
      });
   };

3. BizTalk360 Styles and Icons

 The styles of BizTalk360 can be used in custom widgets by inspecting the element in the BizTalk360 Application.  You can take advantage of the listed styles and controls while creating the custom widgets.

CSS Styles

Utilize BizTalk360 in-built CSS in custom widget creation

• List the data in Table: table table-lists
• Scroll Bar: WidgetScroll

<div id=”WidgetScroll” style=”top:30px;” data-bind=”addScrollBar: WidgetScroll, scrollCallback: ‘false'”> 
  <table class=”table table-lists”>
  </table>
</div>

• Success/Info Tag: Use the Success or Information tag based the data to be presented in the list

 <span data-bind="text: HostType == 1 ? 'InProcess' : 'Isolated', css: HostType == 1 ? 'success-tag' : 'info-tag'">
 </span>

Boot Strap

Boot Strap styles and tags could be used during widget creation. BizTalk360 uses Boot Strap styles to design the base layouts.

• Container Fluid
• row
• col-md-*

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8"></div>
    <div class="col-md-4"></div>
  </div> 
</div>

Font Awesome Icons

Users can represent status or any information in graphical way, you can use Font Awesome Icons.

• Success – fa fa-check-circle
• Error – fa fa-power-off
• Warning – fa fa-times-circle

KendoUI Controls

BizTalk360 uses KendoUI controls, users can utilize those controls in widget script

• Drop Down
• Grid
• Switch Box
• DateTime Picker
• Numeric Text Box
• Calendar

// View
<div class="form-group margin-t"> //Boot Strap Form Group
  <div class="col-md-10"> // Boot Strap Column
    <div class="col-md-offset-2">
      <div class="alert alert-info" role="alert"> //Boot Strap Information
        <b>Note :</b> Choose the environment and enable the servers for Event Log data to be collected.
      </div>
      <div class="form-horizontal">
        <div class="form-group" data-bind="validationElement: selectedEnvironment">
          <label class="col-md-3 control-label">Select Environment</label>
          <div class="cus-select" style="text-align: left;">
            <label>
              <select data-bind="options: configuredEnvironments, optionsText: 'name', value: selectedEnvironment" 
               class="form-control" style="min-width:300px;"></select> // Kendo Dropdown
             </label>
           </div>
         </div>
       </div>               
     </div>
   </div>
</div>    
        
//ViewModel     
 selectedEnvironment.subscribe(onEnvironmentChanges, this); // change event to the environment

4. Embedding Third-Party Scripts

BizTalk360 uses a component called High Charts to represent data in graphical way. Also, some of our customers are using the custom widgets to represent their BizTalk Integration in graphical chart. BizTalk360 supports High Charts (Basic Widgets) with High Chart JS.  To reference the third-party scripts, use the following JavaScript to reference the external libraries.

function injectScript(src) {
    return new Promise((resolve, reject) => {       
                for (var i = 0; i < src.length; i++) {
    var script = document.createElement('script');
    script.src = src[i];
    script.async = false; // This is required for synchronous execution
    document.head.appendChild(script);
  }        
        script.addEventListener('load', resolve);
        script.addEventListener('error', () => reject('Error loading script.'));
        script.addEventListener('abort', () => reject('Script loading aborted.'));
        document.head.appendChild(script);
    });
}
injectScript(['https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/highcharts-more.js','https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.14/js/modules/solid-gauge.js'])

Customer scenarios

Through our support channel, customers are explaining their scenarios which they require in their day to day activities. Here, we pick few common scenarios that will be useful in BizTalk Integration space.

Monitor Artifacts of a BizTalk application

BizTalk360 has the capability to monitor multiple application artifacts in a single alarm configuration. For instance, a specific group of users wants to monitor the status of specific application artifacts. To achieve this requirement, custom widget creation is one of the possible solutions.  Create the custom widget to monitor an application artifacts status and associate the widget to dashboard. You can download the custom widget of monitoring the application artifacts.

Secure SQL Queries

Secure SQL query is an important feature to fetch data based on the user’s business demand. However, it is hard to create all the possible transaction results out of box from predefined widgets. Custom Widgets will help the BizTalk360 users to address this gap in BizTalk360.

Please follow the article how to create custom widgets using Secure SQL Queries.

Represent the data using Cross Domain API and High Charts

A user wants to represent BizTalk Integration Transaction details in the graphical chart. The Integration API is hosted cross domain. To access the cross-domain API Methods through client script, you need to use the XMLHTTPRequest method

function createCORSRequest(method, url) {
var xhr = new XMLHttpRequest();
 if ("withCredentials" in xhr) {
 // XHR for Chrome/Firefox/Opera/Safari.
 xhr.open(method, url, true);
 } else if (typeof XDomainRequest != "undefined") {
 // XDomainRequest for IE.
 xhr = new XDomainRequest();
 xhr.open(method, url);
 } else {
 // CORS not supported
 xhr = null;
 return xhr;
}
//Make the actual CORS request
function makeCorsRequest(url,method) {
var xhr = createCORSRequest(method, url);
if (!xhr) {
 alert('CORS not supported');
return;
 }
// Response handlers
xhr.onload = function() {
var resultData = xhr.responseText;
expectedResults(x2js.xml_str2json( JSON.parse(resultData).MonitorQueryResult).root.records.record);
 }
 xhr.onerror = function() {
 alert('Woops, there was an error making the request.')
}
 xhr.send();
}
makeCorsRequest(‘https://YOURCROSSDOMAIN/SERVICENAME’,'GET');

In this case, the user wants to represent the data in High Charts solid-gauge pattern . For that, you can use the above mentioned suggestion “Embed Third-Party Script”.

Conclusion

Custom widget is a useful feature to bring the customized solution in a dashboard. Hope this article will be helpful to get start the custom widgets creation. Get started with the free 30 days trial. For any queries/feedback please write to us support@biztalk360.com.

Author: Senthil Kumar Palanisamy

Senthil Kumar Palanisamy is the Technical Lead at BizTalk360 having 14 years of experience in Microsoft Technologies. Worked various products across domains like Health Care, Energy and Retail. View all posts by Senthil Kumar Palanisamy