Hi,
Is it possible to create buttons on 'Data Table from Instance Definition' widget such as below.
The idea is if we click on 'Start' on one record, where state is not in 'On' should change the VM's state to 'On'
Any help is appreciated.
TIA
You could try manipulating the DOM like this. It is a bit hacky, but I've had some success with it. Basically you're appending a button column to each row that will reference the sys_id of each row.
Add this to your Link Function area of the Widget:
function link(scope, element, attrs, controller) {
var widgetId = '.v5001b062d7101200b0b044580e6103eb';
var onActionUrl = '/process/on?sys_id=';
var offActionUrl = '/process/off?sys_id=';
// Get the existing template being used
var newTemplate = jQuery(scope.data.dataTableWidget.template);
// Get the row to create a new row template that has a sys_id attribute that you can use on your button
var row = jQuery("div.panel-body table tbody tr", newTemplate);
row.attr("my-attribute-sys-id", "{{item.sys_id}}");
// Update all rows with your new row template
jQuery("div.panel-body table tbody tr", newTemplate).replaceWith(row);
// Replace the existing template for the widget
scope.data.dataTableWidget.template = newTemplate.html();
// We can't hook into angular dataable onload so just check for it to exist every 50 milliseconds
// There is some sort of race condition here that hasn't completely been worked out
var interval = setInterval(function() {
// Wait for the datatable to be loaded
if(jQuery(widgetId + " table tbody tr").length > 0){
jQuery(widgetId + " table thead tr").append('<th></th>');
// Append a button column to each row
jQuery(widgetId + " table tbody tr").each(function() {
var sysId = jQuery(this).attr('my-attribute-sys-id');
clearInterval(interval);
jQuery(this).append("<td><a class='btn btn-primary' href='" + onActionUrl + sysId + "'>On</a> | <a class='btn btn-primary' href='" + offActionUrl + sysId + "'>Off</a></td>");
});
}
}, 50);
}
Below, you can see that they buttons now have the sys_id related to each record:
