Dashboards & Visualizations

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

andrewtrobec
Builder

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:

  1. An HTML table with two buttons added to the cells in dashboard XML
  2. 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!")
	});

 });

 

 

Labels (3)
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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.

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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.

andrewtrobec
Builder

@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!

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@andrewtrobec 

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

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

 

0 Karma

andrewtrobec
Builder

@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!

0 Karma
Get Updates on the Splunk Community!

Improve Your Security Posture

Watch NowImprove Your Security PostureCustomers are at the center of everything we do at Splunk and security ...

Maximize the Value from Microsoft Defender with Splunk

 Watch NowJoin Splunk and Sens Consulting for this Security Edition Tech TalkWho should attend:  Security ...

This Week's Community Digest - Splunk Community Happenings [6.27.22]

Get the latest news and updates from the Splunk Community here! News From Splunk Answers ✍️ Splunk Answers is ...