Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question

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

AsmaF2025
Explorer
a week ago

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>Dashboard to assign token .png

 

Labels (3)
0 Karma
Reply

AsmaF2025
Explorer
a week ago

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>
      <!-- Warning Panel -->
      <!-- Info Panel -->
      <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">
      <!-- <a href="/app/da_snow_internal/partners_incident_details_v233?filter=$filter$%20u_user_type%3D%22OAL%22&amp;title=OAL&amp;tok_earliest=$tok_earliest$&amp;tok_latest=$tok_latest$" target="_blank">-->
      <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>
      <!-- </a>-->
      </div>
      </html>
      </panel>
      <panel>
      <html>
      <div align="center">
      <!-- <a href="/app/da_snow_internal/partners_incident_details_v233?filter=$filter$%20u_user_type%3D%22flydubai%22&amp;title=flydubai&amp;tok_earliest=$tok_earliest$&amp;tok_latest=$tok_latest$" target="_blank">-->
      <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>
      <!-- </a>-->
      </div>
      </html>
      </panel>
      <panel>
      <html>
      <div align="center">
      <!-- <a href="/app/da_snow_internal/partners_incident_details_v233?filter=$filter$%20u_user_type%3D%22DANS%22&amp;title=DANS&amp;tok_earliest=$tok_earliest$&amp;tok_latest=$tok_latest$" target="_blank">-->
      <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>
      <!--</a>-->
      </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>

       

0 Karma
Reply
Get Updates on the Splunk Community!

Tech Talk Recap | Mastering Threat Hunting

Mastering Threat HuntingDive into the world of threat hunting, exploring the key differences between ...

Observability for AI Applications: Troubleshooting Latency

If you’re working with proprietary company data, you’re probably going to have a locally hosted LLM or many ...

Splunk AI Assistant for SPL vs. ChatGPT: Which One is Better?

In the age of AI, every tool promises to make our lives easier. From summarizing content to writing code, ...