UI for checkboxgroupInput not updating when token for same is updated in javascript.

[lyndac]

I am creating a form (Simple XML converted to HTML) in Splunk 6.3.1. I am allowing the user to select which fields are returned in the table. To do this, I have a search which pulls values from a kv_store lookup to populate the choices of a checkboxGroup named "reportCriteria". There are no static choices. I also have a second checkboxGroup with one static options to let the user Select/Deselect All choices from the 1st group.

When the user clicks on "Select All", I update the token associated with the reportCriteria to include all of the possible choices. If they then uncheck Select All, I set the token for reportCriteria to an empty string. I know that the token replacement is working because the search that is run has the correct fields returned.

The issue is that the UI does not change when I "select all". I thought that if I updated the token for the checkbox group, it would trigger a change to each of the checkboxes in the group so that they would now appear checked. They do not. Oddly, when I "unselect all", the check marks do clear from all the previously selected items.

Here is the relevant code:

var reportfields = [];
var search2=new SearchManager({
  "id": "search2",
  "search": "|inputlookup ysfields_lu | sort label",
  "cancelOnUnload": true,
  ...}, {tokens:true});

//when the search completes store the results in a variable.
var myResults = search2.data("results);
myResults.on("data", function() {
    reportFields = myResults.data().rows;
});

//checkbox group --one checkbox for each field option
var reportCriteria = new CheckboxGroupInput({
  "id": "reportCriteria",
  "choices":  [],
  "searchWhenChanged": false,
  "valueField": "fieldname",
  "labelField": "label",
  "managerid": "search2",
  "value": "$report_fields_tok$",
  "el": $('reportCriteria')
}, {tokens:true}).render();

reportCriteria.on("change", function(newValue) {
  FormUtils.handleValueChange(reportCriteria);
}

var selectall = new CheckboxGroupInput({
  "id": "selectall",
  "choices": [{"value":"selall", "label": "Select All")],
  "searchWhenChanged": false,
  "el" : $('#selectall')
}, {tokens:true}).render();

selectall.on("change", function() {
  if (selectall.val().length == 0) {
    setToken("report_fields_tok", "");
  } else {
    var str="";
    for (i=0;i< reportfields.length; i++){
        var f = reportfields[i];
        if (i !=0){ str += ",";}
        str += f[2];
    }
    setToken("report_fields_tok", str);
  }
});

How do I make the UI update with the new token values? Or, as an alternative way, I thought about trying to explicitly check each checkbox in the report criteria group, but I can't figure out how to get to them. Does anyone know how to do that?

[lyndac · Accepted solution]

So I feel really stupid, but I found the issue like 5 minutes after posting this message! ugh. I was setting the token as a string, but the token for the checkboxGroupInput is an array of values. So I changed the one method like this:

 selectall.on("change", function() {
   if (selectall.val().length == 0) {
     setToken("report_fields_tok", []);
   } else {
     var str=[];
     for (i=0;i< reportfields.length; i++){
         var f = reportfields[i];
         str.push( f[2]);
     }
     setToken("report_fields_tok", str);
   }
 });

and now things are working correctly. I want to just delete this question, but maybe someday someone will have the same issue...

[martin_mueller]

Have you tried unsetToken(1)?