How to send drilldown tokens in JS?

[astatrial]

Hi,
I have a dashboard with drill down that generate tokens. I am trying to send the tokens into JS, but for some reason i get the message "undefined" (on the console screen).
When i try to use tokens that are not from the drill down it is working, but it canceling the drill down tokens.
I also tried to replace the default token model with submitted but it didn't work.

This is the part of the JS referring to the tokens:

// Get the default model
    var defaultTokenModel = splunkjs.mvc.Components.getInstance("default");
// Get some token from there
    var token_def = defaultTokenModel.get("tempp");
console.log(token_def);

And this is the part of the dashboard with the drill down tokens:

    <drilldown>
      <set token="customm">$row.Custom$</set>
      <set token="tempp">$row.temp$</set>
    </drilldown>

Thanks very much!!

[niketn]

@astatrial in Simple XML JS extensions you have to code event handlers so that the token are captured only when an event happens otherwise they will execute only once as soon as JS is loaded (at that point of time the token will never be set).

You can refer to the following answer and use option 2 to capture change event of the token model to access the new value. Also link to Splunk Dev site for the same: https://answers.splunk.com/answers/612600/how-to-retrieve-the-value-of-a-token-in-javascript.html

Please let us know if you need further assistance.

[astatrial]

Hi, thanks for you help
I added the next lines to my js:

// Access the "default" token model
var defaultTokenModel = mvc.Components.get("default");
defaultTokenModel.on("change:customm", function(newTokenName, customm, options) {
console.log("source---------------->"+customm);
});

But i got the next error:

"Uncaught TypeError: Cannot read property 'get' of undefined"

On the line :
var defaultTokenModel = mvc.Components.get("default");

Also, do i need to use this for multi select tokens too ?

[niketn]

@astatrial you need to include reference 'splunkjs/mvc' like following. See if you get any error just

 require([
      'jquery',
      'splunkjs/mvc',
      'splunkjs/mvc/simplexml/ready!'
  ], function($,mvc){
     console.log("Inside my JS");
     var defaultTokenModel=mvc.Components.get("default");
 });

You can use browser inspector console logs for debugging this. Also you should get Splunk Dashboard Examples App and check out some of the examples to understand CSS and JS Extensions in Splunk. Another good app is Splunk Dev for All and couple of good .Conf sessions from last year!

[astatrial]

Hey,

Update:
I used what you suggested with:

splunkjs.mvc.Components.getInstance("default");
defaultTokenModel.on("change:customm", 
function(newTokenName, customm, options) {
console.log(customm);
});

and it works, but i need to use it in a search outside the function of the ".on".

I read the documentation about the SPLUNK WEB FRAMEWORK but it doesn't include details about that.

I have tried using "return customm" and some other things with no luck.

[niketn]

@astatrial the on change event fires each time the token value changes, which seemed to be your original ask. However, seems like your use case is different.

Can you please add more details as to where is the token coming from? Is this form input token or search token or visualization drilldown token or something else?

Also once the tokens are set in the drilldown why exactly are you trying to use them in JS? Where/which event in JS do you want to use this token?

[astatrial]

I have a button that run "my search":

$(".button1").on("click", function (){
      var ok = confirm("Are you sure?");
      if (ok){
          mysearch.startSearch();
          alert('Done');
      } //else {
          //    alert('user did not click ok!');
      //}
});

I want to use the token that changes inside the query, for example :

var mysearch = new SearchManager({
    id: "mysearch",
    autostart: "false",
    search: '| makeresults | eval x = "' + $customm$ '"'
});

The token is coming from a drill down, when i click on a table row.

[niketn]

@astatrial if you are using token directly in SearchManager's search string, then you can use token directly using $yourTokenName$. It does not need to be passed using JavaScript.

Following is an example of Search Manager which queries Splunk's _internal index with token tokLogLevel

var search1 = new SearchManager({
            "id": "search1",
            "status_buckets": 0,
            "search": "index=_internal sourcetype=splunkd log_level=\"$tokLogLevel$\" |  timechart count by component",
            "earliest_time": "-24h@h",
            "latest_time": "now",
            "sample_ratio": 1,
            "cancelOnUnload": true,
            "app": utils.getCurrentApp(),
            "auto_cancel": 90,
            "preview": true,
            "tokenDependencies": {
            },
            "runWhenTimeIsUndefined": false
        }, {tokens: true, tokenNamespace: "submitted"});

[vnravikumar]

Hi

Try this on change event

<dashboard script="drilldown.js">
  <label>drilldowntoken</label>
  <row>
    <panel>
      <table>
        <search>
          <query>index="_internal" |stats count by source</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">cell</option>
        <drilldown>
          <set token="source">$row.source$</set>
          <set token="count">$row.count$</set>
        </drilldown>
      </table>
    </panel>
  </row>
</dashboard>

js:

require([
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!",
], function(mvc) {
    $(document).ready(function () {
        var defaultTokenModel = mvc.Components.get("default");
        defaultTokenModel.on("change:source", function(newTokenName, source, options) {
            console.log("source---------------->"+source);
        });
    });

});

[astatrial]

Thanks for your help
I didn't understand this part:

$(document).ready(function ()

But i added the next lines:

var defaultTokenModel = mvc.Components.get("default");
defaultTokenModel.on("change:customm", function(newTokenName, customm, options) {
console.log("source---------------->"+customm);
});

and got the next error:

"Uncaught TypeError: Cannot read property 'get' of undefined"

On the line :
var defaultTokenModel = mvc.Components.get("default");

[paramagurukarth]

Make sure you have loaded splunkjs/mvc and to the var mvc (position of the argument and module loading should be same)

require([
     "splunkjs/mvc",
     "splunkjs/mvc/simplexml/ready!",
 ], function(mvc) {