I have created a simple grid widget that has a json string as input and output a string of the selected row. The object that supply the json string and receive the selected row is on a third server.
I have deployed the same OMI app to three servers, GR, SUP, HIS.
The widget deployed on SUP don't bind to attributes while the widget on the other two servers can. Standard graphics work on all three servers.
I have no idea where to look. Port numbers?
All pointers will be most welcome!
app.js:(function (cwidget) {
const headerRow = document.getElementById('headerRow');
const tableBody = document.getElementById('tableBody');
function renderTable(data) {
if (!Array.isArray(data) || data.length === 0) {
console.warn("renderTable: No data to display.");
headerRow.innerHTML = '';
tableBody.innerHTML = '';
return;
}
// Clear existing content
headerRow.innerHTML = '';
tableBody.innerHTML = '';
const headers = Object.keys(data[0]);
// Create headers
headers.forEach(header => {
const th = document.createElement('th');
th.textContent = header;
headerRow.appendChild(th);
});
// Create rows
data.forEach(item => {
const tr = document.createElement('tr');
headers.forEach(key => {
const td = document.createElement('td');
td.textContent = item[key];
tr.appendChild(td);
});
tr.addEventListener('click', () => {
document.querySelectorAll('tr').forEach(row => row.classList.remove('selected'));
tr.classList.add('selected');
const itemString = JSON.stringify(item);
setDataValue(itemString); // Pass the string instead of the object
console.log("Selected Row as String:", itemString);
});
tableBody.appendChild(tr);
});
}
// Listen for dynamic updates
cwidget.on('jsonData', function () {
let newData = cwidget.jsonData;
// Check if it's a string and parse it
if (typeof newData === 'string') {
try {
newData = JSON.parse(newData);
} catch (e) {
console.error("Failed to parse jsonData string:", e);
return;
}
}
// Validate it's an array
if (!Array.isArray(newData)) {
console.error("jsonData is not an array:", newData);
return;
}
console.log("Updated jsonData received:", newData);
renderTable(newData);
});
function setDataValue (value) {
console.log("Set Data:", value);
cwidget.selectedRow = value; // Write Data property
}
// Initial render
renderTable(cwidget.jsonData);
})(window.cwidget || {
jsonData: [{"ID":1,"Section":"5.5ROD","Grade":"WAE1019","SectionGrade":"5.5ROD \/ WAE1019","GapTarget":7.0,"SpeedTarget":9.8,"ThroughputTarget":3.11,"CoilWeightTarget":1996,"CoilWeightMin":1896,"CoilWeightMax":2036,"CoilHeightTarget":0,"CoilHeightMin":850,"CoilHeightMax":1250,"GrossYieldTarget":9.81,"LayingTempMin":910,"LayingTempMax":930}]
});
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles.css" />
<title></title>
</head>
<body>
<!-- Put here HTML body elements -->
<h2>Selectable Data Grid</h2>
<table id="dataGrid">
<thead>
<tr id="headerRow"></tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
<!-- JavaScript section -->
<script src="../resources/apis/proxy.js" cwidget="widget" autoResize="disable"></script>
<!-- Include here any other JS library -->
<script src="app.js"></script>
</body>
</html>
styles.css:
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th {
background-color: #8a8787;
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
tr.selected {
background-color: #d0ebff;
}
tr:hover {
background-color: #f1f1f1;
cursor: pointer;
}
widget.wjson:
{
"version": 0,
"height": 400,
"width": 400,
"properties":
{
"0": {
"name": "jsonData",
"type": "String",
"value": ""
},
"1": {
"name": "refreshRequest",
"type": "Boolean",
"value": "False"
}
"2": {
"name": "selectedRow",
"type": "string",
"value": ""
}
}
}
