Dashboards & Visualizations

How can I apply JavaScript on a multiselect dropdown menu?

ajaylowes
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 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!!!

0 Karma
1 Solution

ajaylowes
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

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

  }); 
  });
0 Karma

jeffland
SplunkTrust
SplunkTrust

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

biju_babu
Explorer

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.

0 Karma

ajaylowes
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

ashish9433
Communicator

This can be helpful Splunk Answers

0 Karma

jeffland
SplunkTrust
SplunkTrust

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

DataOrg
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

jeffland
SplunkTrust
SplunkTrust

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

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...