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!

Your Feedback. Our Roadmap. Visit the PX Feedback Booth at .conf26

You use Splunk every day, come and help shape what's next.  Save Your Seat: Product-Focused Sessions at ...

Agentic SOC Triage: Investigating Splunk ES Notables with MCP Server and a Local LLM

The Problem: Too Many Alerts, Too Little Context Security operations teams running Splunk Enterprise Security ...

Painting a Clearer Picture: Creating Cross-Domain Visibility with AI Canvas

Watch Now Painting a Clearer Picture: Creating Cross-Domain Visibility with AI Canvas     Do you ever feel ...