how to load drilldown from external javascript file?

[sfatnass]

Hi,

i want to load a drilldown from an external file javascript instead of including it on the dashboard.

i tryied to use something like that in my javascript

require([
        'underscore',
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/utils',
        'splunkjs/mvc/tokenutils',
        'splunkjs/mvc/simplexml/urltokenmodel',
        'splunkjs/mvc/simplexml/ready!'
    ], function (_, $, utils, TokenUtils, mvc, UrlTokenModel) {

    $('#mytable').on('click', function (event) {
        event.preventDefault();
        var value1 = event.data['row.fieldname'];

        var url = TokenUtils.replaceTokenNames("{{SPLUNKWEB_URL_PREFIX}}/app/myapp/dbDestination?tokenValue=" + value1, _.extend(submittedTokenModel.toJSON(), event.data), TokenUtils.getEscaper('url'));
        utils.redirect(url, false, "_blank");

    });
});

but how the js can resolve the row.data and how can run the drilldown function
nothing work only the click event.

can someone help me?

[rjthibod · Accepted solution]

You are incorrectly trying to apply the chart selector in order to assign the drilldown.

The code pattern in JS using the SplunkJS framework should look like this instead of using the jquery selector $("#mytable).

mvc.Components.getInstance("mytable").on("click", function(event) {
  event.preventDefault();
  var value1 = event.data['row.fieldname'];

  var url = TokenUtils.replaceTokenNames("{{SPLUNKWEB_URL_PREFIX}}/app/myapp/dbDestination?tokenValue=" + value1, _.extend(submittedTokenModel.toJSON(), event.data), TokenUtils.getEscaper('url'));
  utils.redirect(url, false, "_blank");
});        

[sfatnass]

Oh yes i forget it.
this only work to retreive the row values but can't load the drilldown yet

splunkjs.mvc.Components.getInstance("mytable").on("click", function(event) {
   event.preventDefault();
   var value1 = event.data['row.fieldname'];

   var url = TokenUtils.replaceTokenNames("{{SPLUNKWEB_URL_PREFIX}}/app/myapp/dbDestination?tokenValue=" + value1, _.extend(submittedTokenModel.toJSON(), event.data), TokenUtils.getEscaper('url'));
   utils.redirect(url, false, "_blank");
 }); 

[rjthibod]

I am sorry but I am unclear on what your problem is. Can you clarify what is not working?

[sfatnass]

this not work

  var url = TokenUtils.replaceTokenNames("{{SPLUNKWEB_URL_PREFIX}}/app/myapp/dbDestination?tokenValue=" + value1, _.extend(submittedTokenModel.toJSON(), event.data), TokenUtils.getEscaper('url'));
    utils.redirect(url, false, "_blank");

[sfatnass]

i have this error when i click on table
submittedTokenModel is not defined
and what about {{SPLUNKWEB_URL_PREFIX}} how to resolve it within javascript?

[rjthibod]

Add these lines to your JS.

var submittedTokenModel = mvc.Components.get('submitted');
var defaultTokenModel   = mvc.Components.get('default');

[sfatnass]

i added this and i get this error now
TokenUtils.getEscaper is not a function

[rjthibod]

try changing the line at the top of the file to this

function (_, $, mvc, utils, TokenUtils, UrlTokenModel)

[sfatnass]

yes it work
now he stays to resolve {{SPLUNKWEB_URL_PREFIX}}

[sfatnass]

well no need to resolve
i just replace by

var url = TokenUtils.replaceTokenNames("dbDestination?tokenValue=" + value1, _.extend(submittedTokenModel.toJSON(), event.data), TokenUtils.getEscaper('url'));
     utils.redirect(url, false, "_blank");

thx for your help rjthibod