Hello! My objective is to be able to use JavaScript to overlay buttons onto a Splunk table viz, listen for a click, and then do something upon clicking. I've managed to overlay the buttons but I'm not sure how to listen for a click. If I add buttons to the dashboard via an html tag then it seems that the listener gets added automatically. Below is a run anywhere dashboard + JavaScript containing: An HTML table with two buttons added to the cells in dashboard XML A Splunk table with two buttons added to the cells using JavaScript All buttons have been assigned the class "html_button". The click listener that I associated to the "html_button" class only works with the HTML table. How do I add a listener to the JavaScript overlay buttons? Thank you and best regards, Andrew --------------------------------------- Dashboard <dashboard script="overlayTable.js">
<label>Buttons and Listeners</label>
<row>
<panel>
<title>Buttons added to HTML table</title>
<html>
<table>
<tr>
<th>Button</th>
</tr>
<tr>
<td>
<button type="button" class="html_button">x</button>
</td>
</tr>
<tr>
<td>
<button type="button" class="html_button">x</button>
</td>
</tr>
</table>
</html>
</panel>
<panel>
<title>Buttons added to Splunk table using Javascript overlay</title>
<table id="tableVizualization">
<search id="searchObject">
<query>| makeresults
| eval Button = "x"
| append [| makeresults
| eval Button = "x"]
| table Button</query>
<earliest>0</earliest>
<latest>now</latest>
<sampleRatio>1</sampleRatio>
</search>
<option name="count">20</option>
<option name="dataOverlayMode">none</option>
<option name="drilldown">none</option>
<option name="percentagesRow">false</option>
<option name="refresh.display">progressbar</option>
<option name="rowNumbers">false</option>
<option name="totalsRow">false</option>
<option name="wrap">true</option>
</table>
</panel>
</row>
</dashboard> overlayTable.js require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {
// Add overlay buttons to table
var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
canRender: function(cell) {
return _(["Button"]).contains(cell.field);
},
render: function($td, cell) {
var strCellValue = cell.value;
if (cell.field === "Button") {
var strHtmlInput="<button type='button' class='html_button'>x</button>"
$td.append(strHtmlInput);
}
}
});
// Render table
mvc.Components.get('tableVizualization').getVisualization(function(tableView) {
tableView.addCellRenderer(new CustomRangeRenderer());
});
// Listener for html_button class
$('.html_button').on("click", function (e) {
alert("Button clicked!")
});
});
... View more