Question about simple-xml importing javascripts

[crt89]

Hi good day all,

I have been using this app:Splunk 6 Dashboard Examples

I'm currently doing this Multi Select example available in the app. The simple xml code imports 2 javascripts (multi_select.js and multi_value_token.js). I have edited this scripts in order to populate the dropdown with the values I want. Works fine, so what I did was I need to create another xml with the same dropdown but different values to populate it. What I did was I have copied the 2 javascript files, rename it (multi_select_new.js and multi_value_token_new.js) and edit it again to display what values I want. I also edit my new xml importing the 2 new javascripts I needed, I did a restart of the service so that splunk will know I have put 2 new files. The problem is it won't show the Multi Select dropdown. I don't know much about javascripts so I don't know if I broke the code of the examples or where to troubleshoot my problem. I did check the source if the xml loaded the javascript (by checking in my browser then right click > view page source).

Here's the code for the 1st set of javascripts on my 1st xml.

multi_select.js

require(['jquery','underscore','splunkjs/mvc','splunkjs/mvc/simplexml/ready!'], function($, _, mvc, SimpleSplunkView){

        //Instantiate our multi select view
        multiSelect = new MultiSelectView({
            "id": "multi_value_input",
            "value": "$submitted:multiToken$",
            "el": $('#multi_value_input'),
            "labelField": "sourcetype",
            "valueField": "sourcetype",
            "managerid": "multiSearch"
        }, {tokens: true}).render();
        //Run the search the multi select is looking for
        var multiSearch = new SearchManager({
            "id": "multiSearch",
            "earliest_time": "-15m",
            "status_buckets": 0,
            "search": "index=_internal | stats count by sourcetype",
            "cancelOnUnload": true,
            "latest_time": "now",
            "auto_cancel": 90,
            "preview": true
        }, {tokens: true});
    }
);

multi_value_token.js

require(['jquery','underscore','splunkjs/mvc','splunkjs/mvc/simplexml/ready!'], function($, _, mvc, SimpleSplunkView){

    //Grab the instance of the token model for submitted tokens
    var submitted = mvc.Components.get('submitted');

    //When the token bound to the multi value input changes recompute the query
    submitted.on('change:multiToken',function(submitted, value) {
        setMultiTokenQuery(value);
    },this);


    var setMultiTokenQuery = function(value){
        //Handle the default cases, if we aren't passed a value, search everything
        value = value || [];
        if (value.length === 0) {
            value.unshift("");
        }

        //Produce the search query and set the token
        var multiTokenQuery = value.join(' OR BSCNAME=');
        submitted.set('multiTokenQuery', multiTokenQuery);
    };
    
    //Set the initial value for the query.
    setMultiTokenQuery(submitted.get('multiToken'));
});

2nd set of javascripts

multi_select_new.js

require(['jquery',
    'underscore',
    'splunkjs/mvc',
    'splunkjs/mvc/multiselectview',
    'splunkjs/mvc/searchmanager',
    'splunkjs/mvc/simplexml/ready!'], 
    function($, _, mvc, MultiSelectView,SearchManager){

        //Instantiate our multi select view
        multiSelect2 = new MultiSelectView({
            "id": "multi_value_input",
            "value": "$submitted:multiToken$",
            "el": $('#multi_value_input'),
            "labelField": "Site_ID",
            "valueField": "Site_ID",
            "managerid": "multiSearch"
        }, {tokens: true}).render();

        //Run the search the multi select is looking for
        var multiSearch2 = new SearchManager({
            "id": "multiSearch",
            "earliest_time": "-15m",
            "status_buckets": 0,
            "search": "| inputlookup new_TAMIT.csv | dedup Site_ID | fields BSCNAME, Site_ID | addcoltotals labelfield=BSCNAME label=None | eval Site_ID=if(BSCNAME="None","None",Site_ID)",
            "cancelOnUnload": true,
            "latest_time": "now",
            "auto_cancel": 90,
            "preview": true
        }, {tokens: true});
    }
);

multi_value_token_new.js

require(['jquery','underscore','splunkjs/mvc','splunkjs/mvc/simplexml/ready!'], function($, _, mvc, SimpleSplunkView){

    //Grab the instance of the token model for submitted tokens
    var submitted = mvc.Components.get('submitted');

    //When the token bound to the multi value input changes recompute the query
    submitted.on('change:multiToken',function(submitted, value) {
        setMultiTokenQuery(value);
    },this);


    var setMultiTokenQuery = function(value){
        //Handle the default cases, if we aren't passed a value, search everything
        value = value || [];
        if (value.length === 0) {
            value.unshift("");
        }

        //Produce the search query and set the token
        var multiTokenQuery = value.join(' OR Site_ID=');
        submitted.set('multiTokenQuery', multiTokenQuery);
    };
    
    //Set the initial value for the query.
    setMultiTokenQuery(submitted.get('multiToken'));
});

my 1st xml code

<dashboard script="multi_select.js, multi_value_token.js">
  <label>BSC Manager</label>
  <!-- Leverage row grouping to put the input in the panel -->
  <row grouping="2">
    <!-- Use an html panel to have a place for multi_select.js to put the multi select -->
    <html>
      <label>Filter by BSCNAME:</label>
      <div id="multi_value_input"/>
    </html>
    <!-- multi_value_token.js will produce the $multiTokenQuery$ token -->
    <table>
      <title>Current Selected BSC</title>
      <searchTemplate>| inputlookup BSC_SITE_ID_LIST.csv | dedup BSCNAME | fields BSCNAME</searchTemplate>
      <drilldown>off</drilldown>
    </table>
  </row>
  <row>
    <table>
      <title>Selected Values</title>
      <searchTemplate>| inputlookup new_TAMIT.csv | dedup BSCNAME | search BSCNAME=$multiTokenQuery$ | fields BSCNAME | lookup new_TAMIT BSCNAME OUTPUT Site_ID | mvexpand Site_ID | dedup Site_ID | outputlookup BSC_SITE_ID_LIST.csv | fields Site_ID</searchTemplate>
      <drilldown>off</drilldown>
    </table>
  </row>
</dashboard>

2nd xml code

<dashboard script="multi_select_new.js, multi_value_token_new.js">
  <label>Sites Manager</label>
  <!-- Leverage row grouping to put the input in the panel -->
  <row grouping="2">
    <!-- Use an html panel to have a place for multi_select.js to put the multi select -->
    <html>
      <label>Filter by Site ID:</label>
      <div id="multi_value_input" />
    </html>
    <!-- multi_value_token.js will produce the $multiTokenQuery$ token -->
    <table>
      <title>Current Selected Site ID(s)</title>
      <searchTemplate>| inputlookup BSC_SITE_ID_LIST.csv | dedup Site_ID | fields Site_ID</searchTemplate>
      <drilldown>off</drilldown>
    </table>
  </row>
  <row>
    <table>
      <title>Selected Values</title>
      <searchTemplate>| inputlookup new_TAMIT.csv | dedup Site_ID | search Site_ID=$multiTokenQuery$ | fields Site_ID</searchTemplate>
      <drilldown>off</drilldown>
    </table>
  </row>
</dashboard>

Hope you can help me with it.

Thanks,


-crt

[vikas_gopal]

@crt89

Hi I am facing the same issue nothing is appearing in the box, as you said it seems js is not picking up my search could you please guide where to put single quote in my query.

require(['jquery',
'underscore',
'splunkjs/mvc',
'splunkjs/mvc/multiselectview',
'splunkjs/mvc/searchmanager',
'splunkjs/mvc/simplexml/ready!'],
function($, _, mvc, MultiSelectView,SearchManager){

    //Instantiate our multi select view
    multiSelect = new MultiSelectView({
        "id": "multi_value_input",
        "value": "$submitted:multiToken$",
        "el": $('#multi_value_input'),
        "labelField": "sourcetype",
        "valueField": "sourcetype",
        "managerid": "multiSearch"
    }, {tokens: true}).render();

    //Run the search the multi select is looking for
    var multiSearch = new SearchManager({
        "id": "multiSearch",
        "earliest_time": "-15m",
        "status_buckets": 0,

"search": '| dbquery "Finance Database" "select period_name from fa_deprn_periods"',
"cancelOnUnload": true,
"latest_time": "now",
"auto_cancel": 90,
"preview": true
}, {tokens: true});
}
);

[crt89]

FOUND IT !!! since I have commas on my search strings in my new javascript, enclosing it with double quotes doesn't output my search that's why the dropdown won't show up. Fixed it by enclosing my search string with a single quote.

[crt89]

no one interested on answering ?