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

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

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
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
Get Updates on the Splunk Community!

Splunk Forwarders and Forced Time Based Load Balancing

Splunk customers use universal forwarders to collect and send data to Splunk. A universal forwarder can send ...

NEW! Log Views in Splunk Observability Dashboards Gives Context From a Single Page

Today, Splunk Observability releases log views, a new feature for users to add their logs data from Splunk Log ...

Last Chance to Submit Your Paper For BSides Splunk - Deadline is August 12th!

Hello everyone! Don't wait to submit - The deadline is August 12th! We have truly missed the community so ...