Previous answer was a great initial template. I took a try at building upon it to add some functionality to the checkboxes. It depends on what your usecase is, but see below:
var selected = []; // 'selected' is an array that contains the IDs of every checkbox that the user selects.
$(document).on('click', '.customcheck', function() {
if($(this).children("i").css("display") == "none")
{
// Do this if the box is going from unchecked to checked:
$(this).children("i").css("display", "inline");
selected.push($(this).children("i").prop("id"));
} else {
// Do this if the box is going from checked to unchecked:
$(this).children("i").css("display", "none");
var index = selected.indexOf($(this).children("i").prop("id"));
if (index > -1) {
selected.splice(index, 1);
}
}
});
require([
"splunkjs/mvc",
"splunkjs/mvc/utils",
"splunkjs/mvc/tokenutils",
"underscore",
"jquery",
"splunkjs/mvc/simplexml",
"splunkjs/mvc/layoutview",
"splunkjs/mvc/simplexml/dashboardview",
"splunkjs/mvc/simplexml/dashboard/panelref",
"splunkjs/mvc/simplexml/element/chart",
"splunkjs/mvc/simplexml/element/event",
"splunkjs/mvc/simplexml/element/html",
"splunkjs/mvc/simplexml/element/list",
"splunkjs/mvc/simplexml/element/map",
"splunkjs/mvc/simplexml/element/single",
"splunkjs/mvc/simplexml/element/table",
"splunkjs/mvc/simplexml/element/visualization",
"splunkjs/mvc/simpleform/formutils",
"splunkjs/mvc/simplexml/eventhandler",
"splunkjs/mvc/simplexml/searcheventhandler",
"splunkjs/mvc/simpleform/input/dropdown",
"splunkjs/mvc/simpleform/input/radiogroup",
"splunkjs/mvc/simpleform/input/linklist",
"splunkjs/mvc/simpleform/input/multiselect",
"splunkjs/mvc/simpleform/input/checkboxgroup",
"splunkjs/mvc/simpleform/input/text",
"splunkjs/mvc/simpleform/input/timerange",
"splunkjs/mvc/simpleform/input/submit",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/savedsearchmanager",
"splunkjs/mvc/postprocessmanager",
"splunkjs/mvc/simplexml/urltokenmodel",
"splunkjs/mvc/tableview"
],
function(
mvc,
utils,
TokenUtils,
_,
$,
DashboardController,
LayoutView,
Dashboard,
PanelRef,
ChartElement,
EventElement,
HtmlElement,
ListElement,
MapElement,
SingleElement,
TableElement,
VisualizationElement,
FormUtils,
EventHandler,
SearchEventHandler,
DropdownInput,
RadioGroupInput,
LinkListInput,
MultiSelectInput,
CheckboxGroupInput,
TextInput,
TimeRangeInput,
SubmitButton,
SearchManager,
SavedSearchManager,
PostProcessManager,
UrlTokenModel,
TableView
) {
var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
// Only use the cell renderer for the Select field
return (cell.field === 'Select');
},
render: function($td, cell) {
if(cell.field === 'Select')
{
//console.log("cellData: ", cell);
var cellvalue = cell.value;
// This is to handle page changes. If the user selects a box, goes to next table page, then goes back, it rechecks that box to maintain history.
if(selected.includes(cellvalue))
{
$td.html('<label class="checkbox"><a href="#" data-name="splunk_web_service" class="btn customcheck"><i id="'+cellvalue+'" class="icon-check" style="display: inline;"></i></a></label>');
} else {
$td.html('<label class="checkbox"><a href="#" data-name="splunk_web_service" class="btn customcheck"><i id="'+cellvalue+'" class="icon-check" style="display: none;"></i></a></label>');
}
}
}
});
mvc.Components.get('tableid').getVisualization(function(tableView){
// Register custom cell renderer
tableView.table.addCellRenderer(new RangeMapIconRenderer());
// Force the table to re-render
tableView.table.render();
});
}
);
In our case, the next step would be to add a submit button that would trigger something to happen based on the values stored in the 'selected' array.
... View more