How to assign a respective token bases on the see...

AsmaF2025 · ‎09-15-2025

Dear All,

My requirement is to assign a token to enable click on the Text , im currently displaying inside <Html> tag.

If i click over XXX, it should assign the token $XXX$ , which i can use it on my panels to display using panel depends=$XXX$ ,

And i have a set of 5+ images with text in a row. the same is expected , when i click over respective image or TEXT . respective token to be assigned. on a condition that , if click over YYY images, earlier selected , XXX token and other ZZZ tokens should be unset .

kindly help me with a javascript to perform this. i tried with some of the references of earlier splunk answers. didnt work for me

My Dashboard code:
<dashboard script="set_token.js">
<label>SET TOKEN</label>
<row><panel><html>
<div align="center">
<table align="center">
<tr><td rowspan="2">
<img src="/static/app/da_snow_internal/images/XXX.png" style="height:75px;max-width:100px;"/>
</td><td align="center" style="padding-top: 20px;padding-left:3px;">
<g class="single-result-group" style="padding:10px;padding-top:20px;">
<g class="svg-label">
<text class="single-result" x="74.09" style="letter-spacing: -0.02em; font-weight: bold; color: #2a2d64; opacity: 1; font-size: 40px;">XXX</text>
</g></g></td></tr>
<tr><td align="center" style="padding-left:3px;">
<g class="under-label-group">
<g class="svg-label">
<text class="under-label" style="letter-spacing: normal; font-size: 12px; font-weight: normal; fill: rgb(60, 68, 77); opacity: 1;">XXX</text>
</g></g></td></tr>
</table></div></html></panel>
<panel><html><div align="center">
<table align="center"><tr>
<td rowspan="2">
<img src="/static/app/da_snow_internal/images/YYY.svg" style="height:75px;max-width:100px;"/>
</td><td align="center" style="padding-top: 20px;padding-left:3px;">
<g class="single-result-group" style="padding:10px;padding-top:20px;">
<g class="svg-label">
<text class="single-result" x="74.09" style="letter-spacing: -0.02em; font-weight: bold; color: #ff8200; opacity: 1; font-size: 45px;">YYY</text>
</g></g></td></tr>
<tr><td align="center" style="padding-left:3px;">
<g class="under-label-group">
<g class="svg-label">
<text class="under-label" style="letter-spacing: normal; font-size: 11px; font-weight: normal; fill: rgb(60, 68, 77); opacity: 1;">YYY</text>
</g></g></td></tr></table>
</div></html></panel>
<panel><html>
<div align="center">
<table align="center">
<tr><td rowspan="2">
<img src="/static/app/da_snow_internal/images/ZZZ.jpg" style="height:75px;max-width:100px;"/>
</td><td align="center" style="padding-top: 20px;padding-left:3px;">
<g class="single-result-group" style="padding:10px;padding-top:20px;">
<g class="svg-label">
<text class="single-result" x="74.09" style="letter-spacing: -0.02em; font-weight: bold; color: #fff400; opacity: 1; font-size: 45px;">ZZZ</text>
</g></g></td></tr>
<tr><td align="center" style="padding-left:3px;">
<g class="under-label-group">
<g class="svg-label">
<text class="under-label" style="letter-spacing: normal; font-size: 12px; font-weight: normal; fill: rgb(60, 68, 77); opacity: 1;">ZZZ</text>
</g></g></td></tr></table>
</div></html></panel>
<panel><html><div align="center">
<table align="center"><tr><td rowspan="2">
<img src="/static/app/da_snow_internal/images/AAA.svg" style="height:75px;max-width:100px;"/>
</td><td align="center" style="padding-top: 20px;padding-left:3px;">
<g class="single-result-group" style="padding:10px;padding-top:20px;">
<g class="svg-label">
<text class="single-result" x="74.09" style="letter-spacing: -0.02em; font-weight: bold; color: #1d2759; opacity: 1; font-size: 45px;">AAA</text>
</g></g></td></tr>
<tr><td align="center" style="padding-left:3px;">
<g class="under-label-group">
<g class="svg-label">
<text class="under-label" style="letter-spacing: normal; font-size: 12px; font-weight: normal; fill: rgb(60, 68, 77); opacity: 1;">AAA</text>
</g></g></td></tr></table>
</div></html></panel>
<panel><html>
<div align="center">
<table align="center"><tr>
<td rowspan="2">
<img src="/static/app/da_snow_internal/images/BBB.png" style="height:75px;max-width:100px;"/>
</td><td align="center" style="padding-top: 20px;padding-left:3px;">
<g class="single-result-group" style="padding:10px;padding-top:20px;">
<g class="svg-label">
<text class="single-result" x="74.09" style="letter-spacing: -0.02em; font-weight: bold; color: #00a4b4; opacity: 1; font-size: 40px;">BBB</text>
</g></g>
</td></tr>
<tr><td align="center" style="padding-left:3px;">
<g class="under-label-group">
<g class="svg-label">
<text class="under-label" style="letter-spacing: normal; font-size: 12px; font-weight: normal; fill: rgb(60, 68, 77); opacity: 1;">BBB</text>
</g></g>
</td></tr>
</table></div></html>
</panel>
<panel>
<html>
<div align="center">
<table align="center">
<tr>
<td rowspan="2">
<img src="/static/app/da_snow_internal/images/PPP.svg" style="height:75px;max-width:100px;"/>
</td>
<td align="center" style="padding-top: 20px;padding-left:3px;">
<g class="single-result-group" style="padding:10px;padding-top:20px;">
<g class="svg-label">
<text class="single-result" x="74.09" style="letter-spacing: -0.02em; font-weight: bold; color: #008755; opacity: 1; font-size: 45px;">PPP</text>
</g>
</g>
</td>
</tr>
<tr>
<td align="center" style="padding-left:3px;">
<g class="under-label-group">
<g class="svg-label">
<text class="under-label" style="letter-spacing: normal; font-size: 12px; font-weight: normal; fill: rgb(60, 68, 77); opacity: 1;">PPP</text>
</g></g>
</td></tr>
</table></div>
</html></panel>
</row></dashboard>

AsmaF2025 · ‎09-15-2025

The below script helped me to obtain the requirement:

Script Brief:

Listens for clicks on elements with the class .clickable-text (e.g., clickable buttons or words).
When a user clicks one of these elements:
- It reads the clicked word (like "XXX").
- It creates a token name dynamically by appending "token" to the word (e.g., "XXXtoken").
- It sets that token to "true" in both the default and submitted token spaces.
- It collects all such tokens generated from all clickable elements on the page.
- It unsets all other tokens except the one just set, ensuring only one token is active at a time.
- It visually marks the clicked element as active by adding an active CSS class.
  
  $ cat dynamictoken1.js
  require([
  'jquery',
  'splunkjs/mvc',
  'splunkjs/mvc/simplexml/ready!'
  ], function($, mvc) {
  var defaultTokenSpace = mvc.Components.get('default');
  var submittedTokenSpace = mvc.Components.get('submitted');
  $(document).on('click', '.clickable-text', function() {
  var selectedText = $(this).text().trim(); // e.g., "flydubai"
  var selectedToken = selectedText + "token"; // e.g., "flydubaitoken"
  // Dynamically collect all current tokens from clickable buttons
  var allTokens = $('.clickable-text').map(function() {
  return $(this).text().trim() + "token";
  }).get();
  // Set the selected token to "true"
  defaultTokenSpace.set(selectedToken, "true");
  submittedTokenSpace.set(selectedToken, "true");
  // Optional: store clicked name in a generic token
  defaultTokenSpace.set("selected_airline", selectedText);
  submittedTokenSpace.set("selected_airline", selectedText);
  // Unset all other tokens
  allTokens.forEach(function(token) {
  if (token !== selectedToken) {
  defaultTokenSpace.unset(token);
  submittedTokenSpace.unset(token);
  }
  });
  // Highlight the active button
  $('.clickable-text').removeClass('active');
  $(this).addClass('active');
  console.log("Token set: " + selectedToken + " = true");
  });
  });
  
  Corresponding dashabord with required html code
  
  <dashboard script="dynamictoken1.js">
  <label>SET TOKEN</label>
  
  
  <row>
  <panel>
  <html>
  <style>
  .clickable-text {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  user-select: none;
  transition: background-color 0.3s ease;
  }
  .clickable-text:hover {
  background-color: #d9edf7;
  }
  .clickable-text.active {
  background-color: #337ab7;
  color: #fff;
  border-color: #2e6da4;
  }
  </style>
  </html>
  </panel>
  </row>
  <row>
  <panel>
  <html>
  <div align="center">
  
  <table align="center">
  <tr>
  <td rowspan="2">
  <img src="/static/app/da_snow_internal/images/XXX.png" style="height:75px;max-width:100px;"/>
  </td>
  <td align="center" style="padding-top: 20px;padding-left:3px;">
  <g class="single-result-group" style="padding:10px;padding-top:20px;">
  <g class="svg-label">
  <text class="single-result" x="74.09" style="letter-spacing: -0.02em; font-weight: bold; color: #ff8200; opacity: 1; font-size: 45px;">XXX</text>
  </g>
  </g>
  </td>
  </tr>
  <tr>
  <td align="center" style="padding-left:3px;">
  <g class="under-label-group">
  <g class="svg-label">
  <div class="clickable-text">XXX</div>
  </g>
  </g>
  </td>
  </tr>
  </table>
  
  </div>
  </html>
  </panel>
  <panel>
  <html>
  <div align="center">
  
  <table align="center">
  <tr>
  <td rowspan="2">
  <img src="/static/app/da_snow_internal/images/YYY.svg" style="height:75px;max-width:100px;"/>
  </td>
  <td align="center" style="padding-top: 20px;padding-left:3px;">
  <g class="single-result-group" style="padding:10px;padding-top:20px;">
  <g class="svg-label">
  <text class="single-result" x="74.09" style="letter-spacing: -0.02em; font-weight: bold; color: #ff8200; opacity: 1; font-size: 45px;">YYY</text>
  </g>
  </g>
  </td>
  </tr>
  <tr>
  <td align="center" style="padding-left:3px;">
  <g class="under-label-group">
  <g class="svg-label">
  <div class="clickable-text">YYY</div>
  </g>
  </g>
  </td>
  </tr>
  </table>
  
  </div>
  </html>
  </panel>
  <panel>
  <html>
  <div align="center">
  
  <table align="center">
  <tr>
  <td rowspan="2">
  <img src="/static/app/da_snow_internal/images/ZZZ.jpg" style="height:75px;max-width:100px;"/>
  </td>
  <td align="center" style="padding-top: 20px;padding-left:3px;">
  <g class="single-result-group" style="padding:10px;padding-top:20px;">
  <g class="svg-label">
  <text class="single-result" x="74.09" style="letter-spacing: -0.02em; font-weight: bold; color: #fff400; opacity: 1; font-size: 45px;">ZZZ</text>
  </g>
  </g>
  </td>
  </tr>
  <tr>
  <td align="center" style="padding-left:3px;">
  <g class="under-label-group">
  <g class="svg-label">
  <div class="clickable-text">ZZZ</div>
  </g>
  </g>
  </td>
  </tr>
  </table>
  
  </div>
  </html>
  </panel>
  </row>
  <row>
  <panel depends="$XXXtoken$">
  <title>XXX Logs</title>
  <chart>
  <search>
  <query>index=_internal log_level=*
  |stats count by log_level</query>
  <earliest>-4h@m</earliest>
  <latest>now</latest>
  </search>
  <option name="charting.chart">pie</option>
  <option name="refresh.display">progressbar</option>
  </chart>
  </panel>
  </row>
  <row>
  <panel depends="$YYYtoken$">
  <title>YYY Logs</title>
  <table>
  <search>
  <query>index=_internal log_level=YYY</query>
  <earliest>-24h</earliest>
  <latest>now</latest>
  </search>
  </table>
  </panel>
  </row>
  <row>
  <panel depends="$ZZZtoken$">
  <title>ZZZ Logs</title>
  <table>
  <search>
  <query>index=_internal log_level=ZZZ</query>
  <earliest>-24h</earliest>
  <latest>now</latest>
  </search>
  </table>
  </panel>
  </row>
  </dashboard>

How to assign a respective token bases on the seelction of TEXT OR Image which are captured in <html>

Classic dashboard

javascript

token

The below script helped me to obtain the requirement:

Script Brief:

Listens for clicks on elements with the class .clickable-text (e.g., clickable buttons or words).

When a user clicks one of these elements:

It reads the clicked word (like "XXX").

It creates a token name dynamically by appending "token" to the word (e.g., "XXXtoken").

It sets that token to "true" in both the default and submitted token spaces.

It collects all such tokens generated from all clickable elements on the page.

It unsets all other tokens except the one just set, ensuring only one token is active at a time.

Index This | Why did the turkey cross the road?

Enter the Agentic Era with Splunk AI Assistant for SPL 1.4

Feel the Splunk Love: Real Stories from Real Customers

Are you a member of the Splunk Community?

How to assign a respective token bases on the seelction of TEXT OR Image which are captured in <html>

Classic dashboard

javascript

token

The below script helped me to obtain the requirement:Script Brief:

Listens for clicks on elements with the class .clickable-text (e.g., clickable buttons or words).

When a user clicks one of these elements:

It reads the clicked word (like "XXX").

It creates a token name dynamically by appending "token" to the word (e.g., "XXXtoken").

It sets that token to "true" in both the default and submitted token spaces.

It collects all such tokens generated from all clickable elements on the page.

It unsets all other tokens except the one just set, ensuring only one token is active at a time.

It visually marks the clicked element as active by adding an active CSS class.$ cat dynamictoken1.jsrequire(['jquery','splunkjs/mvc','splunkjs/mvc/simplexml/ready!'], function($, mvc) {var defaultTokenSpace = mvc.Components.get('default');var submittedTokenSpace = mvc.Components.get('submitted');

Index This | Why did the turkey cross the road?

Enter the Agentic Era with Splunk AI Assistant for SPL 1.4

Feel the Splunk Love: Real Stories from Real Customers

The below script helped me to obtain the requirement:

Script Brief: