As per your requirement and with the same approach I suggested in below answer, I have designed sample code for you.
Note:
1) Here I have used sample_data lookup for having sample data in table. You have to change search query as per your need.
2) For making running this dashboard you need to create file based lookup.
- Create a sample_data.csv file in lookups folder.
- Add below stanza in transforms.conf
[sample_data]
filename = sample_data.csv
- Do debug refersh
http://splunkhost:8000/en-US/debug/refresh
- Populate lookup using below search
| makeresults count=10 | eval Number=1 | accum Number | eval SomeFields="This is sample data", Ack="" | table Number SomeFields Ack | outputlookup sample_data
3) I have create on more search which will update the lookup on click on "Ack Selected rows" button and start search for main search.
4) For implementing this solution, You need to change column name in search and in JS as well.
5) You can enhance JS and XML as per your requirements.
Sample Code:
multiselect_table_submit.xml
<dashboard script="multiselect_table_submit.js" stylesheet="multiselect_table.css">
<label>Multi-Select Table Rows Example</label>
<search id="mysearch">
<query> |inputlookup sample_data | where Number IN ($mytoken$) | eval Ack=now() | append [|inputlookup sample_data | where not Number IN ($mytoken$) ] | sort Number | outputlookup sample_data</query>
<earliest>-15m</earliest>
<latest>now</latest>
</search>
<row>
<panel>
<html>
<div>
<input type="button" id="mybutton" value="Ack Selected Rows"/>
</div>
</html>
</panel>
</row>
<row>
<panel>
<table id="myTable">
<title>Panel A</title>
<search id="mainSearch">
<query>|inputlookup sample_data | eval "Select Number"=Number."|".Ack | table "Select Number" Number SomeFields Ack | eval Ack=strftime(Ack,"%c") | sort Number</query>
</search>
<option name="count">10</option>
<option name="drilldown">row</option>
<drilldown>
<condition field="*"></condition>
</drilldown>
</table>
</panel>
</row>
</dashboard>
multiselect_table_submit.js
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView) {
var tokens = mvc.Components.get("default");
var selected_values_array = [];
var submittedTokens = mvc.Components.get('submitted');
console.log("This is Multi-select table JS");
var CustomRenderer = TableView.BaseCellRenderer.extend({
canRender: function (cell) {
return _(['Select Number']).contains(cell.field);
},
render: function ($td, cell) {
var cell_value = cell.value.split("|")[0];
var ack_value = cell.value.split("|")[1];
var ack_flag = ack_value !== "";
console.log(cell.value,ack_flag,ack_value);
var div = (ack_flag ? $('<div>') :$('<div>').attr({
"id": "chk-number" + cell_value,
"value": cell_value
}).addClass('checkbox').click(function () {
if ($(this).attr('class') === "checkbox") {
selected_values_array.push($(this).attr('value'));
$(this).removeClass();
$(this).addClass("checkbox checked");
} else {
$(this).removeClass();
$(this).addClass("checkbox");
var i = selected_values_array.indexOf($(this).attr('value'));
if (i != -1) {
selected_values_array.splice(i, 1);
}
}
}))
var b = (ack_flag ? $td.addClass('range-cell').addClass('range-acked') : $td.addClass('range-cell').addClass('range-not-acked'));
div.appendTo($td);
}
});
var sh = mvc.Components.get("myTable");
if (typeof(sh) != "undefined") {
sh.getVisualization(function (tableView) {
tableView.on('rendered', function() {
console.log("Kamlesh 1");
tableView.$el.find('td.range-cell').each(function() {
console.log("Kamlesh 2");
$(this).parents('tr').addClass(this.className);
console.log(this.className);
});
console.log("Kamlesh 3");
});
tableView.table.addCellRenderer(new CustomRenderer());
tableView.table.render();
});
}
var mysearch = mvc.Components.get('mysearch');
var mainSearch = mvc.Components.get('mainSearch');
mysearch.on('search:start', function (properties) {
$("#mybutton").attr('disabled', true);
});
mysearch.on('search:done', function (properties) {
$("#mybutton").attr('disabled', false);
mainSearch.startSearch();
});
$(document).ready(function () {
$("#mybutton").on("click", function (e) {
e.preventDefault();
tokens.set("mytoken", selected_values_array.join());
submittedTokens.set(tokens.toJSON());
$("#mybutton").attr('disabled', true);
});
});
});
multiselect_table.css
.checkbox {
width:20px;
height:20px;
border: 1px solid #000;
display: inline-block;
}
.checkbox.checked:after {
content: '';
display: block;
width: 4px;
height: 7px;
position:relative;
top:4px;
left:7px;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
#myTable tr.range-acked td {
background-color: #08f540 !important;
}
#myTable tr.range-not-acked td {
background-color: #f00d18 !important;
}
Please check and acknowledge 😛
Thanks
