Dashboards & Visualizations
×

Join the Conversation

Without signing in, you're just watching from the sidelines. Sign in or Register to connect, share, and be part of the Splunk Community.
Ask a Question

Enable clicks on Custom HTML Table using JavaScript

njohnson7
Path Finder
‎02-01-2021 11:03 PM

All, Need some help in the following topic. II have defined a few html tables and I am populating the values of a column from the result token of my base search.  I am trying to write a script which will enable the users to click on the first column values of those html tables and set a couple of other tokens based on the clicked value. 1) A tier_token based on the clicked texts, like Tier1, Tier2 etc. 2) a client_group token id of the table.

If I populate the table values with Static values like 10, 20 etc. . I am able to perform the clicks and set my tokens as I want. But when the values get populated from the result tokens($result.fieldName$) from the base search or let's say any token value get set in the table , the clicks don't work at all.
Could anyone please guide me, what am I doing wrong?

TABLE : 

 

<row>
    <panel>
      <title>PRD</title>
      <html>
  <table id="PRD" class="table">
  <tr>
    <th>Tier</th>
    <th>Points</th>
    </tr>
    <tr>
    <td>Tier1</td>
    <td>$client_group$</td>
  </tr>
   <tr>
    <td>Tier2</td>
    <td>10</td>
  </tr>
   <tr>
    <td>Tier3</td>
    <td>$tier4_points_PRD$</td>
  </tr>
   <tr>
    <td>Tier4</td>
    <td>$tier5_points_PRD$</td>
  </tr>
   <tr>
    <td>Tier5</td>
    <td>$tier6_points_PRD$</td>
  </tr>
   <tr>
    <td>Tier Undefined</td>
    <td>$tier1_points_PRD$</td>
  </tr>
  </table>
      </html>
    </panel>
    <panel>
      <html>
  <table id="HPS" class="table">
  <tr>
    <th>Tier</th>
    <th>Points</th>
    </tr>
    <tr>
    <td>Tier1</td>
    <td>$tier2_points_HPS$</td>
  </tr>
   <tr>
    <td>Tier2</td>
    <td>$tier3_points_HPS$</td>
  </tr>
   <tr>
    <td>Tier3</td>
    <td>$tier4_points_HPS$</td>
  </tr>
   <tr>
    <td>Tier4</td>
    <td>$tier5_points_HPS$</td>
  </tr>
   <tr>
    <td>Tier5</td>
    <td>$tier6_points_HPS$</td>
  </tr>
   <tr>
    <td>Tier Undefined</td>
    <td>$tier1_points_HPS$</td>
  </tr>
  </table>
      </html>
    </panel>
and so on....

 


JS:

 

var components = [
    "splunkjs/ready!",
    "underscore",
    "splunkjs/mvc/simplexml/ready!",
    "jquery"
];
// Require the components
require(components, function(
    mvc,
    _,
    ignored,
    $
) {
    console.log("Inside Custom Html Table Tokens JS");
      setTimeout(function(){ 
      //click only on first child(1st columns tds)
    $("table td:first-child").on("click", function() {
      console.log("Click Performed");
      var submitted_tokens = mvc.Components.get('submitted');
      var default_tokens = mvc.Components.get('default');
      console.log("Tier Token initial:" + default_tokens.get('tier_token') );
      console.log("ID Token initial:" + default_tokens.get('client_group') );
      var texts = $(this).text(); //get text of td which is clicked
      var ids = $(this).closest("table").attr('id');
      //get closest table where click event has taken place using the attribute `id` of table
      if ( ids == "PRD" || ids == "CMT" || ids == "HPS" || ids == "RES" || ids == "FS") {
        if (ids =="HPS") {
          ids = "H&PS";
        }
        console.log("TEXT " + texts + " ID " + ids);
        submitted_tokens.set('tier_token',texts);
        submitted_tokens.set('client_group',ids);
        default_tokens.set('tier_token',texts);
        default_tokens.set('client_group',ids);
        submitted_tokens.set('form.tier_token',texts);
        submitted_tokens.set('form.client_group',ids);
        default_tokens.set('form.tier_token',texts);
        default_tokens.set('form.client_group',ids);
        console.log("Tier Token newly set:" + default_tokens.get('tier_token') );
        console.log("ID Token newly set:" + default_tokens.get('client_group') );
      }
    })
     },100);
});

 

 

Labels (4)
Labels
0 Karma
Reply
Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Mastering Threat Intelligence in ES 8.5, Splunk AI Assistant v2, and More from Splunk ...

Splunk Lantern is Splunk’s customer success center that provides practical guidance from Splunk experts on key ...

Break the Build: Inside the KubeDoom Lounge at .conf26

    You step up to the machine. The pixelated corridors of a certain 1993 FPS load in front of you, EMP Pulse ...

Splunk Auto Ingestion Parallel Pipeline Scaling

Why this feature matters Many Splunk environments experience ingestion pressure long before the host is fully ...