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

[DataOrg]

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.

[kamlesh_vaghela · Accepted solution]

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

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

[kamlesh_vaghela]

@premranjithj

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

[DataOrg]

@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

[kamlesh_vaghela]

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

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

[kamlesh_vaghela]

@premranjithj

Can you please share your XML?

[DataOrg]

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>

[kamlesh_vaghela]

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

[DataOrg]

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

[kamlesh_vaghela]

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

Use multiselectCondition token as multiselect value in other searches.

[DataOrg]

@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

[DataOrg]

@kamlesh_vaghela , can you please help here

[kamlesh_vaghela]

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

[kamlesh_vaghela]

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

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

[kamlesh_vaghela]

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]

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

[DataOrg]

@kamlesh_vaghela can you help me here?