topic How do I add a listener to an HTML button that was added to a Splunk table viz using JavaScript? in Dashboards & Visualizations

How do I add a listener to an HTML button that was added to a Splunk table viz using JavaScript?

andrewtrobec — Mon, 08 Nov 2021 07:53:59 GMT

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!") }); });

Re: How do I add a listener to an HTML button that was added to a Splunk table viz using JavaScript?

kamlesh_vaghela — Mon, 08 Nov 2021 08:43:20 GMT

@andrewtrobec

Can you please try this?

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).on("click", function(e) { callLogincOnButtonClick() }); } } }); // Render table mvc.Components.get('tableVizualization').getVisualization(function(tableView) { tableView.addCellRenderer(new CustomRangeRenderer()); }); // Listener for html_button class $(document).ready(function() { $('.html_button').on("click", function(e) { callLogincOnButtonClick() }); }) function callLogincOnButtonClick() { console.log("Button clicked!") } });

I hope this will help you.

Thanks
KV
▄︻̷̿┻̿═━一 😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

Re: How do I add a listener to an HTML button that was added to a Splunk table viz using JavaScript?

andrewtrobec — Mon, 08 Nov 2021 12:16:12 GMT

@kamlesh_vaghela Thank you for your reply. I tried as suggested but this does not solve the issue. The HTML buttons continue to work, but the JavaScript buttons do not. Did this code work for you? Do you have any other suggestions? Thanks!

Re: How do I add a listener to an HTML button that was added to a Splunk table viz using JavaScript?

kamlesh_vaghela — Mon, 08 Nov 2021 13:55:36 GMT

@andrewtrobec

Yes.. It is working for me. Try this.

function callLogincOnButtonClick() { alert("Button clicked!") }

Re: How do I add a listener to an HTML button that was added to a Splunk table viz using JavaScript?

andrewtrobec — Wed, 10 Nov 2021 07:33:38 GMT

@kamlesh_vaghela Just to be sure I recopied your original post and it works! I must have done it incorrectly, sorry for the false negative 😞 Thank you so much for your support, I really appreciate i!