Dashboards & Visualizations

Set multiselect with JavaScript

puet
Explorer

I know how to set Values.

multiselect.val(value_array);

BUT: 
Is there a way to set the labels to a different value (not the actual value)?
For Example: i want to be able to select the country by its name but in the search i use the country code.

Something like:
multiselect.label(lable_array);

or:
multiselect.val(value_array , label_array);

I tried an array with label-value pairs but it did not work.

Labels (1)
Tags (2)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@puet 

You can try below JS code to set multiselect input get selected with some values.

XML (Common for both js)

<form script="a.js" theme="light">
  <label>Abcd</label>
  <fieldset submitButton="false">
    <input type="multiselect" token="tkn_country" id="tkn_country">
      <label>Country</label>
      <fieldForLabel>Country</fieldForLabel>
      <fieldForValue>Code</fieldForValue>
      <search id="tkn_country_search">
        <query>| makeresults | eval _raw="Code    Country
AT    Austria
AU    Australia"| multikv forceheader=1|table Code    Country</query>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </search>
    </input>
  </fieldset>
</form>

 

1) Select by value.

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function($, mvc) {
    var multi = mvc.Components.getInstance("tkn_country"); // your multiselect id here
    var defaultValues = ["AT", "AU"];
    multi.val(defaultValues)
});

 

2) Select by label.

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function($, mvc) {
    var multi = mvc.Components.getInstance("tkn_country");
    var tkn_country_search = mvc.Components.getInstance("tkn_country_search"); // your multiselect id here
    var defaultValues = ["Austria", "Australia"];

    tkn_country_search.on("search:done", function() {
        var myResults = tkn_country_search.data("results"); // get the data from that search

        myResults.on("data", function() {
            resultArray = myResults.data().rows;
            val = [];
            $.each(resultArray, function(index, value) {
                if (jQuery.inArray(value[1], defaultValues) !== -1) {
                    val.push(value[0])
                }
            })
            multi.val(val)
        })
    })
});

 

I hope both example will help you.

Thanks
KV
▄︻̷̿┻̿═━一   😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

@puet 

Can you please share your sample code and use case?

KV

0 Karma

puet
Explorer

I realized I can just use initial  values.

But for more context:
I have a lookup :

Code
Country
AT
Austria
AU
Australia

I need the Country column for display and the Code as value, because our other data uses only the code.

What i wanted to do is setting the multiselect to the 3 countries most relevant to us via JavaScript and i completely forgot i can just set the Initial value in xml

Tags (1)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@puet 

You can try below JS code to set multiselect input get selected with some values.

XML (Common for both js)

<form script="a.js" theme="light">
  <label>Abcd</label>
  <fieldset submitButton="false">
    <input type="multiselect" token="tkn_country" id="tkn_country">
      <label>Country</label>
      <fieldForLabel>Country</fieldForLabel>
      <fieldForValue>Code</fieldForValue>
      <search id="tkn_country_search">
        <query>| makeresults | eval _raw="Code    Country
AT    Austria
AU    Australia"| multikv forceheader=1|table Code    Country</query>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </search>
    </input>
  </fieldset>
</form>

 

1) Select by value.

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function($, mvc) {
    var multi = mvc.Components.getInstance("tkn_country"); // your multiselect id here
    var defaultValues = ["AT", "AU"];
    multi.val(defaultValues)
});

 

2) Select by label.

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function($, mvc) {
    var multi = mvc.Components.getInstance("tkn_country");
    var tkn_country_search = mvc.Components.getInstance("tkn_country_search"); // your multiselect id here
    var defaultValues = ["Austria", "Australia"];

    tkn_country_search.on("search:done", function() {
        var myResults = tkn_country_search.data("results"); // get the data from that search

        myResults.on("data", function() {
            resultArray = myResults.data().rows;
            val = [];
            $.each(resultArray, function(index, value) {
                if (jQuery.inArray(value[1], defaultValues) !== -1) {
                    val.push(value[0])
                }
            })
            multi.val(val)
        })
    })
});

 

I hope both example will help you.

Thanks
KV
▄︻̷̿┻̿═━一   😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

puet
Explorer

Thanks!

I was missing the part where i get the value by its' Label.

 $.each(resultArray, function(index, value) {
                if (jQuery.inArray(value[1], defaultValues) !== -1) {
                    val.push(value[0])
                }
            })

 Works fine now.

0 Karma
Get Updates on the Splunk Community!

How I Instrumented a Rust Application Without Knowing Rust

As a technical writer, I often have to edit or create code snippets for Splunk's distributions of ...

Splunk Community Platform Survey

Hey Splunk Community, Starting today, the community platform may prompt you to participate in a survey. The ...

Observability Highlights | November 2022 Newsletter

 November 2022Observability CloudEnd Of Support Extension for SignalFx Smart AgentSplunk is extending the End ...