The product attributes and the boolean attribute "the product is selected" are defined in an entity which the Javascript attempts to process.
So, for example, if I have 2 products, and each product has 4 attributes, then I want a table with 3 columns, and 5 rows (the first column contains the caption for the attributes, and the 2nd and 3rd columns contain the attribute values. There will be 5 rows where the first 4 contain the attributes, and the 5th row contains a checkbox)
I have not been able to work out how to display the clickable checkbox. How can I do this?
Below is a simplified version of the Javascript that I have been trying to create (lines 33 and 34 are where I am stuck)
OraclePolicyAutomation.AddExtension({
customEntityCollect: function(control, interview) {
return {
mount: function(element) {
convertToTable(control, interview)
}
}
}
function convertToTable(control, interview) {
var products = interview._session.config.data[0].instances;
// Create a table which will contain a column for each product
var table = document.createElement('table');
var tableDiv = document.createElement("div");
tableDiv.setAttribute("id", "candidateProductsTableDiv");
if (products !== null || products !== "") {
for (var attributeIndex = 0; attributeIndex < products[0].attributes.length; attributeIndex++) {
var row = table.insertRow(attributeIndex);
// the first column contains the title
var rowCaption = control._source.rows[0][attributeIndex].config.caption;
var titleCell = row.insertCell(0);
titleCell.innerHTML = rowCaption;
// and fill the row with values from the kandidaatproduct
for (var productIndex = 0; productIndex < products.length; productIndex++){
var cell = row.insertCell(productIndex + 1);
var value = products[productIndex].attributes[attributeIndex].value;
if (rowCaption == "the product is selected") {
// TODO add a clickable checkbox here
// How do I do this?
} else {
cell.innerHTML = value;
}
}
}
}
tableDiv.appendChild(table);
// insert the table into the screen
var destinationDiv = getDestinationDiv();
destinationDiv.appendChild(tableDiv);
}
function getDestinationDiv() {
var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
var divClass = divs[i].getAttribute("class");
if (divClass == "opa-container-horizontal") {
return divs[i];
}
}
}
}
});