How to pass selected checkbox values to drilldown target?

[krdo]

Hi,

I have a dashboard with a checkbox input allowing the user to select multiple values. Now I want to pass the selected values to a drilldown target (so that the checkboxes are automatically selected).

I've created two dashboards (both use the same code, only the name/drilldown target has been changed):

<form>
  <label>Dashboard1</label>
  <fieldset submitButton="false">
    <input type="time" token="timeRange" searchWhenChanged="true">
      <label>Time Range</label>
      <default>
        <earliest>-60m@m</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="checkbox" token="sourcetypes" searchWhenChanged="true">
      <label>Sourcetypes</label>
      <search>
        <query>search index="_internal" component="*" | stats count by sourcetype | fields sourcetype  | eval label=replace(sourcetype, "[^a-zA-Z0-9]+", " ") | rename sourcetype as value</query>
        <earliest>$timeRange.earliest$</earliest>
        <latest>$timeRange.latest$</latest>
      </search>
      <fieldForLabel>label</fieldForLabel>
      <fieldForValue>value</fieldForValue>
      <prefix>(</prefix>
      <suffix>)</suffix>
      <valuePrefix>sourcetype="</valuePrefix>
      <valueSuffix>"</valueSuffix>
      <delimiter> OR </delimiter>
    </input>
  </fieldset>
  <row depends="$sourcetypes$">
    <panel>
      <table>
        <search>
          <query>index="_internal" $sourcetypes$ | stats count by component | sort -count | rename component as Component count as Count</query>
          <earliest>$timeRange.earliest$</earliest>
          <latest>$timeRange.latest$</latest>
        </search>
        <option name="drilldown">row</option>
        <option name="count">10</option>
        <drilldown>
          <link>dashboard2?form.sourcetypes=$form.sourcetypes$</link>
        </drilldown>
        <option name="wrap">true</option>
        <option name="rowNumbers">false</option>
        <option name="dataOverlayMode">none</option>
      </table>
    </panel>
  </row>
</form>

Now when I click on a row in the table, the second dashboard opens but the input values are not selected.
Splunk creates a drilldown URL similar to this:

http://localhost:8000/en-GB/app/search/dashboard1?form.sourcetypes=splunk_web_service%2Csplunkd

Note there is only one query parameter named form.sourcetypes with the decoded value splunk_web_service,splunkd
When I select the values on the dashboard the current URL changes to something like this:

http://localhost:8000/en-GB/app/search/dashboard1?&form.sourcetypes=splunk_web_service&form.sourcetypes=splunkd

As you can see there are two query parameters, one for each value (splunk_web_service and splunkd)

Is there another way to specify the tokens in the drilldown link? Or is it possible to instruct the checkbox input to use the single value version when the dasboard is loaded?

[niketn]

I have documented a workaround to use an independent search to set tokens based on option/s selected in the checkbox. It uses only Simple XML Dashboard, NO JAVASCRIPT CHANGES REQUIRED 🙂

https://answers.splunk.com/answers/681330/can-i-hideunhide-specific-text-boxes-using-a-singl.html?ch...

Please try out and confirm!

[krdo · Accepted solution]

Another way to solve the problem is the following custom JavaScript behavior in the target dashboard (sfatnass's answer shows how to solve the problem in the source dashboard).

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

  function MultiselectBehavior()
  {
    /* Find all multiselect inputs. */
    var components = mvc.Components.getInstances().filter(function(item) { return item.options && (item.options.type=='multiselect' || item.options.type=='checkbox'); });

    /* Get default tokens. */
    var tokens = mvc.Components.get("default");

    _(components).each(function(component)
    {
      // Split single values into multiple values:
      //   'Value1,Value2' => ['Value1', 'Value2']
      var tokenName = 'form.' + component.settings.get('token');
      var tokenValue = tokens.get(tokenName);
      if(typeof tokenValue === 'string')
      {
        tokens.set(tokenName, tokenValue.split(","));
      }

      console.log("Multiselect behavior enabled for '" + component.options.label + "'.");

    });
  }

  MultiselectBehavior();

});

[sfatnass]

i solved it with javascript

var loc=window.location;
var pathName=loc.pathname.substring(0,loc.pathname.lastIndexOf('/')+1);
var params = window.location.search.substring(1).split("?");

var uri= loc.href.substring(0,loc.href.length -((loc.pathname + loc.search + loc.hash ).length -pathName.length));



$("#nextdash").on('click',function(){
                var link=uri+"dashboard2?"+params;


  window.open(link,"_blank");
                 });


and your xml can be like this now :
 <form script="js_file.js">
   <label>Dashboard1</label>
   <fieldset submitButton="false">
     <input type="time" token="timeRange" searchWhenChanged="true">
       <label>Time Range</label>
       <default>
         <earliest>-60m@m</earliest>
         <latest>now</latest>
       </default>
     </input>
     <input type="checkbox" token="sourcetypes" searchWhenChanged="true">
       <label>Sourcetypes</label>
       <search>
         <query>search index="_internal" component="*" | stats count by sourcetype | fields sourcetype  | eval label=replace(sourcetype, "[^a-zA-Z0-9]+", " ") | rename sourcetype as value</query>
         <earliest>$timeRange.earliest$</earliest>
         <latest>$timeRange.latest$</latest>
       </search>
       <fieldForLabel>label</fieldForLabel>
       <fieldForValue>value</fieldForValue>
       <prefix>(</prefix>
       <suffix>)</suffix>
       <valuePrefix>sourcetype="</valuePrefix>
       <valueSuffix>"</valueSuffix>
       <delimiter> OR </delimiter>
     </input>
   </fieldset>
   <row depends="$sourcetypes$">
     <panel>
       <table id="nextdash">
         <search>
           <query>index="_internal" $sourcetypes$ | stats count by component | sort -count | rename component as Component count as Count</query>
           <earliest>$timeRange.earliest$</earliest>
           <latest>$timeRange.latest$</latest>
         </search>
         <option name="drilldown">row</option>
         <option name="count">10</option>
         <drilldown>
           <condition fields="*"></condition>
         </drilldown>
         <option name="wrap">true</option>
         <option name="rowNumbers">false</option>
         <option name="dataOverlayMode">none</option>
       </table>
     </panel>
   </row>
 </form>

[nickkin]

I downvoted this post because this answer may work, but is more complicated than the one-line (plus a js file) fix farther down this page.

[sfatnass]

hi krdo, have you solved the problem?

[krdo]

No luck so far 😞
I'd wish we'd have some sort of session storage to share configured values...

[nickkin]

FYI the (now) upvoted answer works regardless of source dashboard and automatically splits combined parameters in the target. It is a much more elegant solution and requires nothing but a simple script= reference to automatically take effect for any control in the target dashboard with no need to modify the drilldown logic to pass multi-value parameters through.

[sfatnass]

try this

 <link>

    <![CDATA[dashboard2?form.sourcetypes=$row.sourcetypes$]]>

    </link>

[nickkin]

I downvoted this post because does not solve the problem with splunk expecting every selected value in a multi-value field to be specified in a separate (duplicate name) url parameter

[krdo]

This doesn't work, $row.sourcetypes$ isn't defined and therefore Splunk creates a URL similar to this: http://localhost:8000/en-GB/app/search/dashboard2?form.sourcetypes=%24row.sourcetypes%24 (decoded value is $row.sourcetypes$).

[sfatnass]

when you want to click on table and move on new dashboards :

you want to get sourcetype or component?

if it's component you can try this

<![CDATA[dashboard2?form.sourcetypes=$click.value2$]]>

or

<![CDATA[dashboard2?form.sourcetypes=$row.Component$]]>

[krdo]

I think we are taking about different things here; I don't want to pass a value from the row to the drilldown target. I want to pass the current state of checkbox input (the $form.sourcetypes$ token) to the drilldown target.

[sfatnass]

you want to pass multiple selection from checkbox to the newest dashboards, it is?
i'm testing many function with your code.

[krdo]

Yes exactly. The user selects multiple values by checking the checkboxes. The user then clicks on a row (drilldown). The same checkboxes should be selected on the new dashboard. Currently that doesn't work.

[ruchigupta]

I am also facing same issue. if you got the answer please share it.

[krdo]

I've accepted my own answer (which feels wrong, but nickkin pointed out why) which is what we are using for now. Simply add the script to the target dashboard.