Dashboards & Visualizations

How to use token in javascript file

viandyg
Engager

I have a multiselect panel on my dashboard and js file attached to the dashboard as well. How do i pass the token value from the multiselect into the javascript file?

e.g.:

<dashboard script="xyz.js">
  <label>xyz</label>

<fieldset submitButton="false">
<input type="multiselect" token="filter.abc" searchWhenChanged="true">
  <label>abc</label>
  <fieldForLabel>abc</fieldForLabel>
  <fieldForValue>abc</fieldForValue>
  <search>
    <query>index="index" | stats count by abc</query>
    <earliest>0</earliest>
    <latest></latest>
  </search>
  <choice value="*">All</choice>
  <default>*</default>
</input>


<row>
    <panel>
      <html>
            <div class="bk-root" id="dbdf03be-ce3a-4730-a185-e613c25394f9" data-root-id="1190"/>
        </html>
    </panel>
  </row>
</dashboard>

What do I need to change in the xyz.js so that it would be able to read the $abc$ token?

sandyIscream
Communicator

First you need to set a ID for your multiselect.

for example -

then you need to define the js like the following.

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/utils',
'splunkjs/mvc/tokenutils',
'splunkjs/mvc/simplexml/ready!'], function(_, $, mvc, utils, TokenUtils){
var tokens = mvc.Components.get('default');

var abcvalue = splunkjs.mvc.Components.getInstance("abcselect"); // default value is getting captured here
if (abcvalue != undefined) {
    abcvalue.on("change", function(e){
        console.log("abc changed to "+tokens.get("abc")); //on token change the value gets captured into through tokens.get("abc")
        define your function here
    });
}

});

Also please remember to put the JS file in $SPLUNK_APP$/appserver/static folder

0 Karma

sandyIscream
Communicator

First you need to set a ID for your multiselect.

for example -

then you need to define the js like the following.

require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/utils',
'splunkjs/mvc/tokenutils',
'splunkjs/mvc/simplexml/ready!'], function(_, $, mvc, utils, TokenUtils){
var tokens = mvc.Components.get('default');

var abcvalue = splunkjs.mvc.Components.getInstance("abcselect"); // default value is getting captured here
if (abcvalue != undefined) {
    abcvalue.on("change", function(e){
        console.log("abc changed to "+tokens.get("abc")); //on token change the value gets captured into through tokens.get("abc")
        define your function here
    });
}

});

Also please remember to put the JS file in $SPLUNK_APP$/appserver/static folder

0 Karma
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!

Index This | What travels the world but is also stuck in place?

April 2026 Edition  Hayyy Splunk Education Enthusiasts and the Eternally Curious!   We’re back with this ...

Discover New Use Cases: Unlock Greater Value from Your Existing Splunk Data

Realizing the full potential of your Splunk investment requires more than just understanding current usage; it ...

Continue Your Journey: Join Session 2 of the Data Management and Federation Bootcamp ...

As data volumes continue to grow and environments become more distributed, managing and optimizing data ...