Dashboards & Visualizations

How to remove if ALL selection is selected in multiselect based on field for label not by Value?

DataOrg
Builder

Remove "All" from multiselect input when other options selected vice versa . i want to reset by field for label not by value"". since the value is not "" and its a dynamic value.

0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@premranjithj

Can you please try below Dashboard example ?

Remove Select ALL on the basis of FieldValue .

XML Code:

<form script="myscript.js">
  <label>Multiselect Remove All</label>
  <fieldset submitButton="false">
    <input type="multiselect" token="multiselect" id="multiselectId">
      <label>Multi Select</label>
      <choice value="*">All</choice>
      <choice value="A">A</choice>
      <choice value="B">B</choice>
    </input>
  </fieldset>
</form>

myscript.js

require([
    'underscore',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'], function (_, mvc) {

var multiselect = splunkjs.mvc.Components.getInstance("multiselectId");
multiselect.on("change", function (value) {

    if (value.length > 1 && ~(value.indexOf("*"))) {
        if (value.indexOf("*") == 0) {
            value.splice(value.indexOf("*"), 1);
            this.val(value);

        } else {
            this.val("*");
        }
        this.render();
    }
})
});

Remove Select ALL on the basis of FieldLabel .

XML:

<form script="myscript.js">
  <label>Multiselect Remove All</label>
  <fieldset submitButton="false">
    <input type="multiselect" token="multiselect" id="multiselectId">
      <label>Multi Select</label>
      <choice value="0">All Shops</choice>
      <choice value="1">A</choice>
      <choice value="2">B</choice>
    </input>
  </fieldset>
</form>

myscript.js

require([
    'underscore',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'], function (_, mvc) {

var multiselect = splunkjs.mvc.Components.getInstance("multiselectId");
multiselect.on("change", function (value) {
    var defaulLabel="All Shops";
    var defaulValue="";

    var lbl = $.map(this.options.choices, function(item,i) {
        if(item.label==defaulLabel) {
            defaulValue = item.value;
            indexofDefaulValue = i;
        }
        if((~value.indexOf(item.value))){
            return item.label;   
        }
    });
    var vls = $.map(this.options.choices, function(item,i) {
        if((~value.indexOf(item.value))){
            return item.value;   
        }
    });

    if (value.length > 1 && ~(value.indexOf(defaulValue))) {
        if (value.indexOf(defaulValue) == 0) {
            vls.splice(vls.indexOf(defaulValue), 1);
            this.val(vls);
        } else {
            this.val(defaulValue);
        }
        this.render();
    }
})
});

Remove Select ALL on the basis of ONLY FieldLabel which doesn't have FieldValue.

XML:

 <form script="myscript.js">
   <label>Multiselect Remove All</label>
   <fieldset submitButton="false">
     <input type="multiselect" token="multiselect" id="multiselectId">
       <label>Multi Select</label>
       <choice>All Shops</choice>
       <choice>A</choice>
       <choice>B</choice>
     </input>
   </fieldset>
 </form>

myscript.js

require([
     'underscore',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'], function (_, mvc) {

 var multiselect = splunkjs.mvc.Components.getInstance("multiselectId");
 multiselect.on("change", function (value) {
     var defaulLabel="All Shops";
     if (value.length > 1 && ~(value.indexOf(defaulLabel))) {
         if (value.indexOf(defaulLabel) == 0) {
             value.splice(value.indexOf(defaulLabel), 1);
             this.val(value);
             console.log("Final ",value);
         } else {
             this.val(defaulLabel);
         }
         this.render();
     }
 })
 });

Remove Select ALL on the basis of FieldValue.
Get all option values in different token when select "All" option

XML

 <form script="myscript.js">
   <label>Multiselect Remove All</label>
   <fieldset submitButton="false">
     <input type="multiselect" token="multiselect" id="multiselectId">
       <label>Multi Select</label>
       <delimiter> ,</delimiter>
       <fieldForLabel>Servers</fieldForLabel>
       <fieldForValue>Servers</fieldForValue>
       <search id="multiselectsearch">
         <query>| makeresults | eval Servers="Server 1" | append [| makeresults | eval Servers="Server 2"]| table Servers</query>
       </search>
       <choice value="*">All Hosts</choice>
     </input>
   </fieldset>
   <row>
     <panel>
       <html>
         <code>multiselectCondition : </code> $multiselectCondition$ &lt;br/&gt;
       </html>
     </panel>
   </row>
 </form>

myscript.js

require([
     'underscore',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'], function (_, mvc) {

     var multiselectsearch = mvc.Components.get("multiselectsearch");
     var submitted_tokens = mvc.Components.getInstance('submitted');
     var default_token_model = mvc.Components.getInstance('default');

     var multiselectsearch_results = multiselectsearch.data("preview");

     var fieldForFilter = "host";
     var AllCondition = ""; 
     multiselectsearch_results.on("data", function () {
         $.each(multiselectsearch_results.data().rows, function (i, value) {
             if(AllCondition!="") {
                 AllCondition+="OR "
             }
             AllCondition = AllCondition + fieldForFilter + '="' + value[0] +'" ';
         });
     });

     var multiselect = splunkjs.mvc.Components.getInstance("multiselectId");
     multiselect.on("change", function (value) {
         var Condition = "";
         $.map(value, function(item,i) {
             if(item!="*") {
                 if(Condition!="") {
                     Condition+="OR "
                 }
                 Condition = Condition + fieldForFilter + '="' + item +'" ';
             }
         });

         if (value.length > 1 && ~(value.indexOf("*"))) {
             if (value.indexOf("*") == 0) {
                 value.splice(value.indexOf("*"), 1);
                 this.val(value);
                 default_token_model.set("multiselectCondition", Condition);
             } else {
                 this.val("*");
                 default_token_model.set("multiselectCondition", AllCondition);    
             }
             this.render();
         } 
         else {
             if(value.indexOf("*") == 0) {
                 default_token_model.set("multiselectCondition", AllCondition);    
             }
             else {
                 if(Condition.length==0) {
                     default_token_model.unset("multiselectCondition");
                 } else {
                     default_token_model.set("multiselectCondition", Condition);
                 }
             }
         }
         submitted_tokens.set(default_token_model.toJSON());
     })
 });

Thanks
** HAPPY SPLUNKING **

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

@premranjithj

Can you please try below Dashboard example ?

Remove Select ALL on the basis of FieldValue .

XML Code:

<form script="myscript.js">
  <label>Multiselect Remove All</label>
  <fieldset submitButton="false">
    <input type="multiselect" token="multiselect" id="multiselectId">
      <label>Multi Select</label>
      <choice value="*">All</choice>
      <choice value="A">A</choice>
      <choice value="B">B</choice>
    </input>
  </fieldset>
</form>

myscript.js

require([
    'underscore',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'], function (_, mvc) {

var multiselect = splunkjs.mvc.Components.getInstance("multiselectId");
multiselect.on("change", function (value) {

    if (value.length > 1 && ~(value.indexOf("*"))) {
        if (value.indexOf("*") == 0) {
            value.splice(value.indexOf("*"), 1);
            this.val(value);

        } else {
            this.val("*");
        }
        this.render();
    }
})
});

Remove Select ALL on the basis of FieldLabel .

XML:

<form script="myscript.js">
  <label>Multiselect Remove All</label>
  <fieldset submitButton="false">
    <input type="multiselect" token="multiselect" id="multiselectId">
      <label>Multi Select</label>
      <choice value="0">All Shops</choice>
      <choice value="1">A</choice>
      <choice value="2">B</choice>
    </input>
  </fieldset>
</form>

myscript.js

require([
    'underscore',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'], function (_, mvc) {

var multiselect = splunkjs.mvc.Components.getInstance("multiselectId");
multiselect.on("change", function (value) {
    var defaulLabel="All Shops";
    var defaulValue="";

    var lbl = $.map(this.options.choices, function(item,i) {
        if(item.label==defaulLabel) {
            defaulValue = item.value;
            indexofDefaulValue = i;
        }
        if((~value.indexOf(item.value))){
            return item.label;   
        }
    });
    var vls = $.map(this.options.choices, function(item,i) {
        if((~value.indexOf(item.value))){
            return item.value;   
        }
    });

    if (value.length > 1 && ~(value.indexOf(defaulValue))) {
        if (value.indexOf(defaulValue) == 0) {
            vls.splice(vls.indexOf(defaulValue), 1);
            this.val(vls);
        } else {
            this.val(defaulValue);
        }
        this.render();
    }
})
});

Remove Select ALL on the basis of ONLY FieldLabel which doesn't have FieldValue.

XML:

 <form script="myscript.js">
   <label>Multiselect Remove All</label>
   <fieldset submitButton="false">
     <input type="multiselect" token="multiselect" id="multiselectId">
       <label>Multi Select</label>
       <choice>All Shops</choice>
       <choice>A</choice>
       <choice>B</choice>
     </input>
   </fieldset>
 </form>

myscript.js

require([
     'underscore',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'], function (_, mvc) {

 var multiselect = splunkjs.mvc.Components.getInstance("multiselectId");
 multiselect.on("change", function (value) {
     var defaulLabel="All Shops";
     if (value.length > 1 && ~(value.indexOf(defaulLabel))) {
         if (value.indexOf(defaulLabel) == 0) {
             value.splice(value.indexOf(defaulLabel), 1);
             this.val(value);
             console.log("Final ",value);
         } else {
             this.val(defaulLabel);
         }
         this.render();
     }
 })
 });

Remove Select ALL on the basis of FieldValue.
Get all option values in different token when select "All" option

XML

 <form script="myscript.js">
   <label>Multiselect Remove All</label>
   <fieldset submitButton="false">
     <input type="multiselect" token="multiselect" id="multiselectId">
       <label>Multi Select</label>
       <delimiter> ,</delimiter>
       <fieldForLabel>Servers</fieldForLabel>
       <fieldForValue>Servers</fieldForValue>
       <search id="multiselectsearch">
         <query>| makeresults | eval Servers="Server 1" | append [| makeresults | eval Servers="Server 2"]| table Servers</query>
       </search>
       <choice value="*">All Hosts</choice>
     </input>
   </fieldset>
   <row>
     <panel>
       <html>
         <code>multiselectCondition : </code> $multiselectCondition$ &lt;br/&gt;
       </html>
     </panel>
   </row>
 </form>

myscript.js

require([
     'underscore',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'], function (_, mvc) {

     var multiselectsearch = mvc.Components.get("multiselectsearch");
     var submitted_tokens = mvc.Components.getInstance('submitted');
     var default_token_model = mvc.Components.getInstance('default');

     var multiselectsearch_results = multiselectsearch.data("preview");

     var fieldForFilter = "host";
     var AllCondition = ""; 
     multiselectsearch_results.on("data", function () {
         $.each(multiselectsearch_results.data().rows, function (i, value) {
             if(AllCondition!="") {
                 AllCondition+="OR "
             }
             AllCondition = AllCondition + fieldForFilter + '="' + value[0] +'" ';
         });
     });

     var multiselect = splunkjs.mvc.Components.getInstance("multiselectId");
     multiselect.on("change", function (value) {
         var Condition = "";
         $.map(value, function(item,i) {
             if(item!="*") {
                 if(Condition!="") {
                     Condition+="OR "
                 }
                 Condition = Condition + fieldForFilter + '="' + item +'" ';
             }
         });

         if (value.length > 1 && ~(value.indexOf("*"))) {
             if (value.indexOf("*") == 0) {
                 value.splice(value.indexOf("*"), 1);
                 this.val(value);
                 default_token_model.set("multiselectCondition", Condition);
             } else {
                 this.val("*");
                 default_token_model.set("multiselectCondition", AllCondition);    
             }
             this.render();
         } 
         else {
             if(value.indexOf("*") == 0) {
                 default_token_model.set("multiselectCondition", AllCondition);    
             }
             else {
                 if(Condition.length==0) {
                     default_token_model.unset("multiselectCondition");
                 } else {
                     default_token_model.set("multiselectCondition", Condition);
                 }
             }
         }
         submitted_tokens.set(default_token_model.toJSON());
     })
 });

Thanks
** HAPPY SPLUNKING **

DataOrg
Builder

@kamlesh_vaghela My value is not * in my multiselect so instead of * i want to check field for label which is "All Shops". the value for "All shops" is dynamic so i want to check for display value then the field value. Please help to figure it out

"All Shops"

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@premranjithj

I have updated my answer. Please check section Remove Select ALL on the basis of FieldLabel .

0 Karma

DataOrg
Builder

@kamlesh_vaghela its working for the static value which we are configuring on the multiselect.
if the fieldvalue is not configured and if its generated from search. how to map it to fieldlabel generated during search in the multiselect

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@premranjithj

Can you please try this code and confirm it?

XML:

<form script="myscript.js">
  <label>Multiselect Remove All</label>
  <fieldset submitButton="false">
    <input type="multiselect" token="multiselect" id="multiselectId">
      <label>Multi Select</label>
      <choice>All Shops</choice>
      <choice>A</choice>
      <choice>B</choice>
    </input>
  </fieldset>
</form>

myscript.js

require([
    'underscore',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'], function (_, mvc) {

var multiselect = splunkjs.mvc.Components.getInstance("multiselectId");
multiselect.on("change", function (value) {
    var defaulLabel="All Shops";
    if (value.length > 1 && ~(value.indexOf(defaulLabel))) {
        if (value.indexOf(defaulLabel) == 0) {
            value.splice(value.indexOf(defaulLabel), 1);
            this.val(value);
            console.log("Final ",value);
        } else {
            this.val(defaulLabel);
        }
        this.render();
    }
})
});

DataOrg
Builder

@kamlesh_vaghela "All Shops" values is not a static configured value. it will be search result value fieldlabel.

the All Shops value will be coming from results .

   <label>Multiselect Remove All</label>
   <fieldset submitButton="false">
     <input type="multiselect" token="multiselect" id="multiselectId">
       <label>Multi Select</label>
       <query>|inputlookup  <query>
     </input>
   </fieldset>
 </form>
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@premranjithj

Can you please share your XML?

0 Karma

DataOrg
Builder

the SPL in multiselect wil return 3 values.
1. host1
2. host2
3. All hosts(host1,host2)

ALL option is not configured in Static values. the above JS not working if value is not configured in static
So if all host is selected other 2 selection should be removed from selection .

        <label>Select </label>
        <search>
          <query>| inputlookup new.csv|top 2</query>
        </search>
        <fieldForLabel>Servers</fieldForLabel>
        <fieldForValue>host</fieldForValue>
        <delimiter>,</delimiter>
              </input>
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@premranjithj

Few questions:
1) Is it your full XML?
2) Does | inputlookup new.csv includes All hosts as server and host1,host2 as values? Can you please share more detail about that?
3) What should be your expected output/token value if any select host1 OR host1 & host2 OR All hosts ?

0 Karma

DataOrg
Builder

@kamlesh_vaghela

1.its a XML dashboard
1. no, lookupsheet doesnt have "All hosts". it will be populated in search
3.if indiviual host is selected it will be single value
.host1="ABC"
host2="BBC"
All hosts=("ABC","BBC")

SPL:

| inputlookup lookupsheet.csv| search Name IN ($Name$) | dedup Servers | table Servers | sort Servers | append[| inputlookup lookupsheet.csv| | search Name IN ($NAME$) | dedup Servers | table Servers | eval host="\"".Servers."\"" | stats delim="," values(host) AS host | mvcombine host] | eval host=if(host!="*",host,Servers) | fillnull value="ALL Servers" | sort Servers

<fieldForLabel>Servers</fieldForLabel>
        <fieldForValue>host</fieldForValue>
        <delimiter>,</delimiter>

output:

fieldforLabel            fieldforValue
ABC                              ABC
BBC                              BBC
All Sites                        "ABC","BBC"   
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@premranjithj

As with your custom requirement, I suggest you to go with custom approach. Here you need to set separate token for the condition which will gives you required string of condition.

Like.
If you select Server 1 then condition will be host="Server 1".

If you select Server 2 then condition will be host="Server 2".

If you select Server 1 & Server 2 then condition will be host="Server 1" OR host="Server 2".

If you select All Server then condition will be host="Server 1" OR host="Server 2" OR ... ... so on.

Note: Here host is condition field name which you can change as per your requirement.

Another point, I have changed dropdown search and removed `All Server' and temporarily plotted in XML ( After we can set in search if below code works for you) . So change changes your search accordingly.

| inputlookup lookupsheet.csv | search Name IN ($Name$) | dedup Servers | table Servers | sort Servers

JavaScript Code:

require([
    'underscore',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'], function (_, mvc) {

    var multiselectsearch = mvc.Components.get("multiselectsearch");
    var submitted_tokens = mvc.Components.getInstance('submitted');
    var default_token_model = mvc.Components.getInstance('default');

    var multiselectsearch_results = multiselectsearch.data("preview");

    var fieldForFilter = "host";
    var AllCondition = ""; 
    multiselectsearch_results.on("data", function () {
        $.each(multiselectsearch_results.data().rows, function (i, value) {
            if(AllCondition!="") {
                AllCondition+="OR "
            }
            AllCondition = AllCondition + fieldForFilter + '="' + value[0] +'" ';
        });
    });

    var multiselect = splunkjs.mvc.Components.getInstance("multiselectId");
    multiselect.on("change", function (value) {
        var Condition = "";
        $.map(value, function(item,i) {
            if(item!="*") {
                if(Condition!="") {
                    Condition+="OR "
                }
                Condition = Condition + fieldForFilter + '="' + item +'" ';
            }
        });
        console.log(Condition);

        if (value.length > 1 && ~(value.indexOf("*"))) {
            if (value.indexOf("*") == 0) {
                value.splice(value.indexOf("*"), 1);
                this.val(value);
                default_token_model.set("multiselectCondition", Condition);
            } else {
                this.val("*");
                default_token_model.set("multiselectCondition", AllCondition);    
            }
            this.render();
        } else if(value.length == 0) {
            default_token_model.unset("multiselectCondition");
        }
        else {
            default_token_model.set("multiselectCondition", AllCondition);
        }
        submitted_tokens.set(default_token_model.toJSON());
    })
});

XML Code:

<form script="myscript.js">
  <label>Multiselect Remove All</label>
  <fieldset submitButton="false">
    <input type="multiselect" token="multiselect" id="multiselectId">
      <label>Multi Select</label>
      <delimiter> ,</delimiter>
      <fieldForLabel>Servers</fieldForLabel>
      <fieldForValue>Servers</fieldForValue>
      <search id="multiselectsearch">
        <query>| makeresults | eval Servers="Server 1" | append [| makeresults | eval Servers="Server 2"]| table Servers</query>
      </search>
      <choice value="*">All Hosts</choice>
    </input>
  </fieldset>
  <row>
    <panel>
      <html>
        <code>multiselectCondition : </code> $multiselectCondition$ &lt;br/&gt;
      </html>
    </panel>
  </row>
</form>

Just create new dashboard with above code execute it. I'm sure your will get the trick behind it.

Note: we will check ordering of dropdown search. 🙂

kamlesh_vaghela
SplunkTrust
SplunkTrust

Use multiselectCondition token as multiselect value in other searches.

0 Karma

DataOrg
Builder

@kamlesh_vaghela
sometimes the token values are not refreshing , it shows all the server even if one is selected. check on the image.
token was not refreshing properly and sometimes randomly works properly

output1 is on the link : https://imgur.com/rykvF55
selected Server2 on the multiselect
multiselectCondition : host="Server 1" OR host="Server 2"

instead of one output i am getting two servers

output2: works correctly on selecting server1
link: https://imgur.com/RF3AeJh

0 Karma

DataOrg
Builder

@kamlesh_vaghela , can you please help here

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@premranjithj I'm debugging it. I'll update JS and will share with you.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@premranjithj

Can you please try this JS?

require([
    'underscore',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'], function (_, mvc) {

    var multiselectsearch = mvc.Components.get("multiselectsearch");
    var submitted_tokens = mvc.Components.getInstance('submitted');
    var default_token_model = mvc.Components.getInstance('default');

    var multiselectsearch_results = multiselectsearch.data("preview");

    var fieldForFilter = "host";
    var AllCondition = ""; 
    multiselectsearch_results.on("data", function () {
        $.each(multiselectsearch_results.data().rows, function (i, value) {
            if(AllCondition!="") {
                AllCondition+="OR "
            }
            AllCondition = AllCondition + fieldForFilter + '="' + value[0] +'" ';
        });
    });

    var multiselect = splunkjs.mvc.Components.getInstance("multiselectId");
    multiselect.on("change", function (value) {
        var Condition = "";
        $.map(value, function(item,i) {
            if(item!="*") {
                if(Condition!="") {
                    Condition+="OR "
                }
                Condition = Condition + fieldForFilter + '="' + item +'" ';
            }
        });

        if (value.length > 1 && ~(value.indexOf("*"))) {
            if (value.indexOf("*") == 0) {
                value.splice(value.indexOf("*"), 1);
                this.val(value);
                default_token_model.set("multiselectCondition", Condition);
            } else {
                this.val("*");
                default_token_model.set("multiselectCondition", AllCondition);    
            }
            this.render();
        } 
        else {
            if(value.indexOf("*") == 0) {
                default_token_model.set("multiselectCondition", AllCondition);    
            }
            else {
                if(Condition.length==0) {
                    default_token_model.unset("multiselectCondition");
                } else {
                    default_token_model.set("multiselectCondition", Condition);
                }
            }
        }
        submitted_tokens.set(default_token_model.toJSON());
    })
});

DataOrg
Builder

@kamlesh_vaghela thanks much for your effort, its working awesome . could you please change your comment into answer. i will accept it

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Great @premranjithj. You can upvote & accept the answer. I will consolidate all the comments and update the answer. So other Splunker also check that. You can also upvote those comments, which you think are adding value in knowledge base.

Happy Splunking
:)

DataOrg
Builder

@kamlesh_vaghela , if i want to unset the values of multiselect2 which has the token value "$multiselectCondition$". how to do it?

below set is not working when the value is passed from JS.

<multiselect1>
    <change>
    <unset token="form.multiselectCondition"> </unset>
    </change>
    </multiselect1>
0 Karma

DataOrg
Builder

@kamlesh_vaghela can you help me here?

0 Karma
Get Updates on the Splunk Community!

Set Up More Secure Configurations in Splunk Enterprise With Config Assist

This blog post is part 3 of 4 of a series on Splunk Assist. Click the links below to see the other ...

Observability Highlights | November 2022 Newsletter

 November 2022Observability CloudEnd Of Support Extension for SignalFx Smart AgentSplunk is extending the End ...

Enterprise Security Content Update (ESCU) v3.54.0

The Splunk Threat Research Team (STRT) recently released Enterprise Security Content Update (ESCU) v3.54.0 and ...