Solved: How to add a click event to a table? - Page 2

LuiesCui · ‎08-16-2015

Hi guys, I have a problem with drilling down the table and I really need ur help!
I have a simple xml dashboard here:

<row>
    <panel>
      <table id="table">
        <search>
          <query>| inputlookup worklog.csv | table solution remark </query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="drilldown">row</option>
        <option name="dataOverlayMode">none</option>
        <option name="count">10</option>
        <fields>solution</fields>
        <drilldown>
          <set token="remark">$row.remark$</set>
        </drilldown>
      </table>
    </panel>
    <panel id="chart1">
      <html>
        <div>
          <p id="Remark">$remark$</p>
        </div>  
      </html>
    </panel>
  </row>

As u can see, there is a table and a div in the dashboard. What I wanna do is the content of the div will be changed and get the value of some fields of the search when I click any cells in the table. It works well but is not perfect. Before I click the table, the content of div will be "$remark$", which makes the dashboard really weird. In some events the column of "remark" return no result and the content of div will be "null". So I wrote a js to help this.

var deps = [
    "splunkjs/ready!",
    "splunkjs/mvc/searchmanager"
];

var db_boo = true;
var qt_boo = true;

require(deps, function(mvc) {
    var table = document.getElementById("table");
    var remark = document.getElementById("Remark");
    table.on('click:cell', function(properties) {
        if(remark.innerHTML=="null"||remark.innerHTML=="$remark$"){
            remark.innerHTML="";
        }
    });
})

But after I add this js and refresh, the dashboard just keeps "loading" and shows nothing. Is there any way to fix it? And by the way, how can I pass the value of a token, for example "remark" in this case, to the js? The format of js is kind of different from what I know. What kind or type of js is it? Thx in advance!

tom_frotscher · ‎08-17-2015

Hi,

i think your dashboard is not loading, because there is some kind of error in your js. After you opened the dashboard with the js, did you take a look in the browsers console? Is there an Error? (Most Browser have a shortcut on F12 to open the console)

To get and set the values of a token in js you can use this:

var unsubmittedTokens = mvx.Components.getInstance('default');
// get the value of a token called remark
unsubmittedTokens.get("remark");
// set the value of a token called remark to "value"
unsubmittedTokens.set("remark", "value");<code>

To make this work, you must import the mvc lib. Change this part of your code:

var deps = [
     "splunkjs/ready!",
     "splunkjs/mvc/searchmanager"
 ];
 var db_boo = true;
 var qt_boo = true;

  require(deps, function(mvc) {
...

To this:

 var deps = [
 "splunkjs/mvc",
 "splunkjs/mvc/utils",
 "splunkjs/ready!",
 "splunkjs/mvc/searchmanager"
 ];
 var db_boo = true;
 var qt_boo = true;

 require(deps, function(mvc, utils) {
...

Hope this helps,

Greetings

Tom

View solution in original post

How to add a click event to a table?

Join Us for Splunk University and Get Your Bootcamp Game On!

.conf24 | Learning Tracks for Security, Observability, Platform, and Developers!

Announcing Scheduled Export GA for Dashboard Studio