---
title: "Custom Widgets Migration"
slug: "custom-widgets-migration"
updated: 2025-01-01T11:42:08Z
published: 2025-01-01T11:42:08Z
canonical: "docs.biztalk360.com/custom-widgets-migration"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.biztalk360.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Widgets Migration

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 from v9.1 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 that will be useful in migrating your KnockoutJS script to pure JavaScript

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

```markup
<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*

```javascript
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

```markup
<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](https://medium.com/@Sharad35386442/6-different-ways-to-do-ajax-calls-in-javascript-b47200fe7a38#:~:text=%206%20Different%20ways%20to%20do%20Ajax%20calls,the%20browser%20and%20in%20a%20node.js...%20More%20)

```javascript
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](https://getbootstrap.com/docs/4.0/content/tables/) to design the table.

```markup
<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,

```markup
<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>
```

## Custom Widget Script for Environment Status

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

```markup
<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>
```