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 (6)
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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...