topic Re: How can I apply JavaScript on a multiselect dropdown menu? in Dashboards & Visualizations

How can I apply JavaScript on a multiselect dropdown menu?

ajaylowes — Tue, 29 Sep 2020 16:18:57 GMT

We have a multiselect dropdown with options "All, A , b, c , D"

Requirement: Whenever user selects "All" , then user cannot select any other option. If user selects anything else , then he can select multiple things.

My logic : Create a JavaScript which reads the value selected by the user and then if "All" is selected , then convert multiselect drop down to a normal dropdown . If anything else is selected , then let it be a multiselect dropdown .

Things I have tried:
1) Fetching value from dropdown to JavaScript using "splunkjs/mvc/textinputview" (var token_def = defaultTokenModel.get("token_name");)
2) If token_def = "all" , then render the view to normal dropdown . Else it remains to be multiselect dropdown.

Second thing I want to try is by using global flag. Setting it to value 1 when "All" is selected and "0" for others , then passing it to HTML.

Please advise. Please provide me doc related to JavaScript if available since I am new in this.
Thanks in Advance!!!

Re: How can I apply JavaScript on a multiselect dropdown menu?

jeffland — Tue, 17 Oct 2017 10:03:30 GMT

Converting the input doesn't sound like a nice UI to me. I would simply replace the value "All" with a more specific one if the user selects it, and replace any specific selection with "All". See this example:

<form script="multiselectChanges.js">
  <label>_temp js multiselect one value</label>
  <fieldset submitButton="false">
    <input id="multi" type="multiselect" token="multi">
      <label>Multi</label>
      <choice value="All">All</choice>
      <choice value="a">a</choice>
      <choice value="b">b</choice>
      <choice value="c">c</choice>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <search>
          <query>| makeresults | eval info="Your selection: $multi$"</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

Javascript:

define([
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(mvc) {
    // Get multiselect
    var multi = mvc.Components.get("multi");
    // On change, check selection
    multi.on("change", (selectedValues) => {
        // Check if input has more than one value and if "All" is in it
        var indexOfAll = selectedValues.indexOf("All");
        if (selectedValues.length > 1 && selectedValues.includes("All")) {
            // If "All" was selected before current (more specific) selection, remove it from list
            if (indexOfAll == 0) {
                selectedValues.splice(indexOfAll, 1);
                multi.val(selectedValues);
            } else {
                // "All" was selected last, clear input and leave only "All" in it
                multi.val("All");
            }
        }
    });
});

Re: How can I apply JavaScript on a multiselect dropdown menu?

ajaylowes — Thu, 02 Nov 2017 19:16:29 GMT

Tried this but i am afraid that it didn't work.
I am still able to select all the values at a time

Re: How can I apply JavaScript on a multiselect dropdown menu?

jeffland — Mon, 06 Nov 2017 07:24:40 GMT

Of course you can.

Requirement: Whenever user selects "All" , then user cannot select any other option. If user selects anything else , then he can select multiple things.

You're in the "anything else"-branch there. Have you tried selecting "All" after previously selecting a few other items? It removes the other items. And if you select any other item after "All" was selected, "All" disappears again. This basically means you can never select "All" and any other option at the same time, which is a nicer solution than disabling any other selection while "All" is selected (that would require an additional click to first remove "All" from the selection before the user can select a more specific option).

Re: How can I apply JavaScript on a multiselect dropdown menu?

ashish9433 — Thu, 23 Nov 2017 19:18:54 GMT

This can be helpful Splunk Answers

Re: How can I apply JavaScript on a multiselect dropdown menu?

ajaylowes — Fri, 22 Dec 2017 09:18:59 GMT

Hi ,

I was able to resolve this by taking reference from both answers provided above . Here is the script which worked for me:
require([
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function($, mvc){
$('#multi').on("change",function(){
var multi1 = mvc.Components.get("multi");
var tokens = mvc.Components.getInstance("default");
var mytoken = tokens.get("multi")
var indexOfAll = mytoken.indexOf("All");
if (mytoken.length > 1 && mytoken.includes("All"))
{
// If "All" was selected before current (more specific) selection, remove it from list
if (indexOfAll == 0)
{
var temp = mytoken.split(" ")
var temp1 = temp[1]
multi1.val(temp1);
} else
{
// "All" was selected last, clear input and leave only "All" in it
multi1.val("All");
}
}

  }); 
  });

Re: How can I apply JavaScript on a multiselect dropdown menu?

DataOrg — Wed, 29 Jan 2020 12:10:02 GMT

@jeffland
i am using below on the multiselect but its not working for me.

 <input type="multiselect" token="SERVERNAME" id="multi" searchWhenChanged="false">
        <label>Select </label>
        <search>
          <query>| inputlookup | sort Servers</query>
        </search>
         <fieldForLabel>Servers</fieldForLabel>
        <fieldForValue>host</fieldForValue>
        <delimiter>,</delimiter>
        <choice value="All">$VAL$</choice>
      </input>

Re: How can I apply JavaScript on a multiselect dropdown menu?

jeffland — Wed, 29 Jan 2020 18:57:28 GMT

I don't know what you're trying to do and how. Please open a new question, and provide more details there.

Re: How can I apply JavaScript on a multiselect dropdown menu?

biju_babu — Fri, 11 Nov 2022 12:01:33 GMT

Is there a way to add the java script in xml inline. I am using cloud version and don't have rights to add the script in path.