Dashboards & Visualizations
Highlighted

How can I apply JavaScript on a multiselect dropdown menu?

Path Finder

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 tokendef = defaultTokenModel.get("tokenname");)
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!!!

0 Karma
Highlighted

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

Champion

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");
            }
        }
    });
});
Highlighted

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

Path Finder

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

0 Karma
Highlighted

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

Champion

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).

0 Karma
Highlighted

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

Builder

@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>
0 Karma
Highlighted

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

Champion

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

0 Karma
Highlighted

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

Communicator

This can be helpful Splunk Answers

0 Karma
Highlighted

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

Path Finder

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");
}
}

  }); 
  });

View solution in original post

0 Karma