- 03 May 2021
- 2 Minutes to read
- Print
- DarkLight
- PDF
Custom Widgets Migration
- Updated on 03 May 2021
- 2 Minutes to read
- Print
- DarkLight
- PDF
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>
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
<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>