Dashboards & Visualizations

Remove "All" from Multiselect Input in Dashboard

ashish9433
Communicator

Hi Team,

I have multiple "Multiselect" Input on my Dashboard which has search query which populates the result for Multiselect along with a static option of All (*)

Now, i want that whenever anyone selects any one or Multiple values in Multiselect input, "All" should automatically gets removed. Currently the user has to remove "All" and if user doesn't remove "All" then the result is skewed.

The results is getting skewed because we are using OR clause.

For example

When only ALL is selected (default) below search query runs

index=abc | search xzy=* | stats count by xyz

When other values are also selected along with ALL

index=abc | search xzy=* OR xzy=hello OR xzy=hi OR xzy=how | stats count by xyz

Now in the above case since "All" is by default selected, and even person selects other name the results show for all users as xzy=* remains and user has to explicitly remove ALL from the multiselect.

What i am looking for is whenever any user selects anything from the multiselect input, All should automatically be removed/de-selected.

Labels (2)
1 Solution

ashish9433
Communicator

I followed the advice by @jeffland in Link and using the below JS i was able to achieve what i was looking for.

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

                  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

karan2627
New Member

Thanks @ashleyherbert for this. it worked for me but the problem is with this the submit button has stopped working means with this code i have to mark "search on change = true", with search on change = false the above code doesn't work.

So is there any way to to make this code work without "search on change = true". It would be great help.. below is the code

  <label>Connection Id (Only for PF App)</label>
  <choice value="All">All</choice>
  <change>
    <condition>
      <eval token="connection">case(mvcount('connection')=0,"All",mvcount('connection')&gt;1 AND mvfind('connection',"All")&gt;0,"All",mvcount('connection')&gt;1 AND mvfind('connection',"All")=0,mvfilter('connection'!="All"),1==1,'connection')</eval>
      <eval token="connection">if(mvfind('connection',"All")=0,"connectionid=*",connectionid $connection$)</eval>
    </condition>
  </change>
  <fieldForLabel>connectionid</fieldForLabel>
  <fieldForValue>connectionid</fieldForValue>
0 Karma

azulgrana
Path Finder

this works great for me. Thanks @ashleyherbert !

0 Karma

simpkins1958
Contributor

@ashleyherbert - this is working well when using on a dashboard interactively. When have multiple selections working well. But if refresh the page selections go back to "All". If save as a book mark and open from the bookmark the multiple selections are not selected, back to "All".

0 Karma

ashleyherbert
Communicator

Haven't noticed this before, but yes I can see it happening on mine as well. For some reason when the dashboard is refreshing, it's running through the functions and not finding any pre-populated tokens. I'm not sure why this is, I'll do some playing around and see if I can get it working.

0 Karma

ktwombley
Explorer

I've come up with a solution for this.

First, we don't actually need to use 2 tokens. Going back to a single token allows Splunk to override the defaults when the page loads for the first time (or you refresh).

Second, when the page loads the token is null, so mvcount($token$) is null. We can use that by wrapping the evals in a <condition> block. This means when the page loads, the eval statements that clobber the values don't execute. Give it a shot.

 <input type="multiselect" token="env" searchWhenChanged="true">
   <label>Environment</label>
   <search base="lookup">
     <query>dedup environment</query>
   </search>
   <default>All</default>
   <valuePrefix>environment=</valuePrefix>
   <delimiter> OR </delimiter>
   <choice value="All">All</choice>
   <fieldForLabel>environment</fieldForLabel>
   <fieldForValue>environment</fieldForValue>
   <change>
  <condition match=" !isnull(mvcount('form.env') ">
     <eval token="form.env">case(mvcount('form.env')=0,"All",mvcount('form.env')&gt;1 AND mvfind('form.env',"All")&gt;0,"All",mvcount('form.env')&gt;1 AND mvfind('form.env',"All")=0,mvfilter('form.env'!="All"),1==1,'form.env')</eval>
     <eval token="env">if(mvfind('form.env',"All")=0,"environment=*",$env$)</eval>
  </condition>
   </change>
 </input>

alai
Explorer

Works for me too, thank you very much!

0 Karma

Zakary_n
Path Finder

Can confirm, this works. Thank you so much.

0 Karma

jrballesteros05
Communicator

I did it and I'd rather this answer. I worked for me.

0 Karma

phoenix_down
Path Finder

@ashleyherbert, is your code still working for you? I tried (for several hours) to get it to work in Splunk 6.6.1 and was not able to. With your code as shown, the multi-select input doesn't allow me to remove the default "All" choice, nor does it allow me to add any additional choices.

0 Karma

ashish9433
Communicator

looks like easy and innovative way of doing it! Thanks @ashleyherbert

0 Karma

ashish9433
Communicator

I followed the advice by @jeffland in Link and using the below JS i was able to achieve what i was looking for.

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

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


 }); 
 }); 

niketn
Legend

@ashish9433, please accept your own answer listed here to mark this question as answered. Do upvote the comments that helped. (Even on the original post :))

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

tonyca
Explorer

If i have more than one Multi select Input in Dashboard .Is there any generic solution to Remove "All" from all Multi select Input, instead of writing separate JS for all multi select input.

0 Karma

niketn
Legend

@tonyca, you can use jQuery each() selector for iterating through all the multiselect inputs and then place above code: https://api.jquery.com/each/

$(this).on("change",function(){

This is theoretical approach. So let me know if it does not work.

The Table Row Highlight example in Splunk Dashboard Example App uses the same each() approach to color each row based on individual cell content/class.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

tonyca
Explorer

can i have some more elaborative solution.

0 Karma

phoenix_down
Path Finder

tonyca, checkout my answer below. Should do what you want.

DataOrg
Builder

@phoenix_down @niketnilay
I am using below values on multi-select. I am able to select all values including All . My All is not a * value so i want to check if label "All" is selected others should not be selected

 <input type="multiselect" token="NAME" searchWhenChanged="false">
        <label>Select </label>
        <search>
          <query>| inputlookup | sort Servers</query>
        </search>
        <change>
          <set token="NAME1">$row.Name$</set>
          <set token="TYPE">$row.Name3$</set>
          <set token="NAME2">$row.Name2$</set>
        </change>
        <fieldForLabel>Servers</fieldForLabel>
        <fieldForValue>host</fieldForValue>
        <delimiter>,</delimiter>
        <choice value="All">$VAL$</choice>
      </input>
0 Karma

niketn
Legend

@ashish9433, on similar lines refer to an answer by @jeffland

https://answers.splunk.com/answers/583461/how-can-i-apply-javascript-on-a-multiselect-dropdo.html

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

ashish9433
Communicator

Thanks @niketnilay though the answer by @jeffland in the above link didn't worked for me, but it gave me a guidance on how to fix it and i was able to get it resolved.

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