Custom Widgets Migration

Updated on 03 May 2021
2 Minutes to read

Print
Share
Dark
Light
PDF

Article Summary

Share feedback

Thanks for sharing your feedback!

In Dashboards, you can add multiple predefined widgets, and also you can create your own custom widgets to pin it in the respective dashboard. If you are migrating BizTalk360 to V10, your custom widgets may break because we have migrated our application from KnockoutJS to Angular. So basically, you need to migrate your custom widget script from KnockoutJS to pure JavaScript which will be rendered by our Angular application.

In this article, we are going to mention some of the common code snippets which will be useful to migrate your KnockoutJS script to pure JavaScript

Use onclick="functionName()" instead of data-bind="click:functionName()"

<button class="btn" data-bind="click:selectAllAlarms">
</button>
                   (can be changed to)
<button type="button" class="btn btn-primary" onclick="selectAllAlarms()">
</button>

You can directly use forEach with the array item rather than using ko.utils.arrayForEach

ko.utils.arrayForEach(
      items,
      function (item) {
           console.log("item");
      }
);

               (can be changed to)

items.forEach((item) => {
     console.log(item);
});

If you want to bind values, get the element using document.getElementById and assign the respective values

<p>First name: <strong data-bind="text: firstName"></strong></p>
<script>
    function AppViewModel() {
        this.firstName = "Bert";
    }
    ko.applyBindings(new AppViewModel());
</script>

(can be changed to)

<p id="name"></p>
<script>
      var firstName = "Bert";
      document.getElementById('name').innerText = 'First name: ' + 
      firstName; 
</script>

To make an API call, you can use XHR to do it in pure JS. But there are a lot of ways to do AJAX calls from JS. You can explore it at this link

const Http = new XMLHttpRequest();
const url='http://yourdomain.com/';
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText)
}

If you want to create tables with different rows, you can refer the below code snippet. You can use all the predefined classes which is available in bootstrap to design the table.

<table class="table table-striped">
  <thead>
  <tr>
    <th scope="col">Country</th>
    <th scope="col">Area</th>
  </tr>
  </thead>
  <tbody id="table-body">
  </tbody>
</table>
<script>
var places = [
{
country: 'India',
Area: 'North',
},
{
country: 'India',
Area: 'South',
}
];
places.forEach((place) => {
    const element = document.getElementById("table-body");
    const tableRowElement = document.createElement('tr');
    Object.keys(place).forEach(key => {
    	const tableDataElement = document.createElement('td');
        tableDataElement.innerHTML = name[key];
  		tableRowElement.appendChild(tableDataElement);
	});
    element.appendChild(tableRowElement);
})
</script>

For toggling the visibility of the elements,

<p id="text">BizTalk360</p>
<button type="button" class="btn btn-primary" onclick="toggleElement()">
Toggle Element
</button>
<script>
function toggleElement(){
const element = document.getElementById("text");
 if(element.style.visibility == "visible"){
   element.style.visibility = "hidden";
   return;
 }
 element.style.visibility = "visible";
}
</script>

The below script covers the following functionalities

It will fetch all the environment details from the API and it will display in a table
This will be auto refreshed every 60 seconds
They can also refresh it manually, using that refresh button

<div class="row mb-2">
    <div class="col-12">
        <button type="button"
                class="btn btn-primary float-right"
                onclick="loadEnvironmentStatisticsData()">
            <i class="fal fa-sync mr-2"></i>Refresh
        </button>
    </div>
</div>
<div class="table-responsive">
    <table class="table table-striped">
        <thead>
            <tr>
                <th scope="col">Environment Name</th>
                <th scope="col">Alarms Count</th>
                <th scope="col">Unmapped Artifacts</th>
                <th scope="col">BizTalk Servers</th>
                <th scope="col">Host Instances</th>
                <th scope="col">Suspended Service Instances</th>
            </tr>
        </thead>
        <tbody id="table-body">
        </tbody>
    </table>
</div>
<script>

    loadEnvironmentStatisticsData();

    setInterval(() => {
        loadEnvironmentStatisticsData();
    }, 60000);

    function loadEnvironmentData(environmentStatisticsData) {
        var xhttp = new XMLHttpRequest();
        xhttp.withCredentials = true;
        xhttp.open('GET', 'http://localhost/Kovai.BizTalk360.Src//Services.REST/AdminService.svc/GetAllConfiguredEnvironments', true);
        xhttp.onload = function () {
            // Begin accessing JSON data here
            var data = JSON.parse(this.response);
            if (data.success) {
                const tableBodyElement = document.getElementById("table-body");
                tableBodyElement.innerHTML = "";
                data.biztalkEnvironments.forEach((environment) => {
                    const selectedEnvironment = environmentStatisticsData?.environmentStatisticsInfoList.find((env) => env.environmentId == environment.id);
                    if (selectedEnvironment) {
                        const tableRowElement = createElement('tr');
                        tableRowElement.appendChild(createTableDataElement(environment.name));
                        tableRowElement.appendChild(createTableDataElement(selectedEnvironment.alarmsStatus.total));
                        tableRowElement.appendChild(createTableDataElement(selectedEnvironment.unmappedArtifactsCount));
                        tableRowElement.appendChild(createTableDataElement(selectedEnvironment.bizTalkServersStatus.total));
                        tableRowElement.appendChild(createTableDataElement(selectedEnvironment.hostInstancesStatus.total));
                        tableRowElement.appendChild(createTableDataElement(selectedEnvironment.suspendedServiceInstancesCount.totalInstances));
                        tableBodyElement.appendChild(tableRowElement);
                    }
                });
            }
        }
        xhttp.send();
    }

    function loadEnvironmentStatisticsData() {
        var dataRequest = new XMLHttpRequest();
        dataRequest.withCredentials = true;
        dataRequest.open('GET', 'http://localhost/Kovai.BizTalk360.Src//Services.REST/AdminService.svc/GetAllEnvironmentStatisticsInfoList', true);
        dataRequest.onload = function () {
            // Begin accessing JSON data here
            var environmentStatisticsData = JSON.parse(this.response);
            if (environmentStatisticsData.success) {
                loadEnvironmentData(environmentStatisticsData);
            }
        }
        dataRequest.send();
    }

    function createElement(element) {
        return document.createElement(element);
    }

    function createTableDataElement(value) {
        const tableDataElement = document.createElement('td');
        tableDataElement.innerHTML = value;
        return tableDataElement;
    }
</script>

Was this article helpful?

What's Next

Applications

Table of contents

Custom Widget Script for Environment Status

Custom Widgets Migration

Custom Widget Script for Environment Status

What's Next