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!

Developer Spotlight with Mika Borner

From Hackathon Winner to Enterprise Leader    Mika Borner, CEO and Founder of Datapunctum AG, has been ...

Continue Your Federation Journey: Join Session 3 of the Bootcamp Series

To help practitioners build a stronger foundation, we launched the Data Management & Federation ...

Announcing Modern Navigation: A New Era of Splunk User Experience

We are excited to introduce the Modern Navigation feature in the Splunk Platform, available to both cloud and ...