Dashboards & Visualizations

How to pass or set token when click on image in html panel ?

abhishekkalokhe
Explorer

I want to set or pass value to the token , after clicking on image in HTML panel

Here is my panel code:

 

<form script="my.js">
<row>
<panel>
<html>
<a id="mydivId">
<img src="/static/app/My_app/bck_city.png"/>
</a>
</html>
</panel>
</row>
</form>

 

And after clicking on the image of above panel the below token should set with value
(I want to set token="mytoken", with some value after clicking on the image above)

 

<row>

<panel>
<title>mypanel</title>
<event>
<search>
<query>|makeresults
|eval result=$mytoken$
|table result</query>
<earliest>-15m</earliest>
<latest>now</latest>
</search>
<option name="list.drilldown">none</option>
<option name="refresh.display">progressbar</option>
</event>
</panel>

</row>

 

 I also tried setting token value by .js

 

require(['underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/utils',
'splunkjs/mvc/tokenutils',
'splunkjs/mvc/simplexml/ready!'], function ($) {
    var utils = require("splunkjs/mvc/utils");
    $(document).ready(function () {
        $("#mydivId").on("click", function (){
	var tokens = mvc.Components.get("default");
  	var tokenValue = tokens.get("mytoken");
	tokens.set("mytoken", "cheese");
        });
    });
});

 

 

 

image.png

Labels (5)
0 Karma
1 Solution

nnilay_splunk
Splunk Employee
Splunk Employee

@abhishekkalokhe Please try the following Simple XML code and JS File

Screen Shot 2020-06-13 at 11.27.58 PM.png

Dashboard Code modified to demo the use case. Use image from internet (replace with actual image static file)

<dashboard script="my.js">
  <label>Click on image to set token</label>
  <row>
    <panel>
      <html>
        <a id="mydivId">
          <img style="height:80px !important" src="https://cdn2.iconfinder.com/data/icons/font-awesome/1792/fort-awesome-512.png"/>
        </a>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>mypanel - $mytoken$</title>
      <table>
        <search>
          <query>|makeresults
|eval result="$mytoken$"
|table result</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

my.js JavaScript file:

require(['jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'], function ($,mvc) {
    var defaultTokenModel = mvc.Components.get("default");
    var submittedTokenModel = mvc.Components.get("submitted");
    $(document).on("click","#mydivId",function (){
        defaultTokenModel.set("mytoken", "cheese");
        submittedTokenModel.set("mytoken", "cheese");
    });
});

 Please try out and confirm!

View solution in original post

0 Karma

nnilay_splunk
Splunk Employee
Splunk Employee

@abhishekkalokhe Please try the following Simple XML code and JS File

Screen Shot 2020-06-13 at 11.27.58 PM.png

Dashboard Code modified to demo the use case. Use image from internet (replace with actual image static file)

<dashboard script="my.js">
  <label>Click on image to set token</label>
  <row>
    <panel>
      <html>
        <a id="mydivId">
          <img style="height:80px !important" src="https://cdn2.iconfinder.com/data/icons/font-awesome/1792/fort-awesome-512.png"/>
        </a>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <title>mypanel - $mytoken$</title>
      <table>
        <search>
          <query>|makeresults
|eval result="$mytoken$"
|table result</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

my.js JavaScript file:

require(['jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'], function ($,mvc) {
    var defaultTokenModel = mvc.Components.get("default");
    var submittedTokenModel = mvc.Components.get("submitted");
    $(document).on("click","#mydivId",function (){
        defaultTokenModel.set("mytoken", "cheese");
        submittedTokenModel.set("mytoken", "cheese");
    });
});

 Please try out and confirm!

0 Karma
Get Updates on the Splunk Community!

Why You Can't Miss .conf25: Unleashing the Power of Agentic AI with Splunk & Cisco

The Defining Technology Movement of Our Lifetime The advent of agentic AI is arguably the defining technology ...

Deep Dive into Federated Analytics: Unlocking the Full Power of Your Security Data

In today’s complex digital landscape, security teams face increasing pressure to protect sprawling data across ...

Your summer travels continue with new course releases

Summer in the Northern hemisphere is in full swing, and is often a time to travel and explore. If your summer ...