Fill into multiselect input by clicking a table element (drill down)

[BMacher]

Hi folks,

I have tried to create a table drill down to insert elements into a multiselect input, that are already selected.

The workflow is: User searches something by using a keyword. He then selects tokens, which are then added to the multiselect input. The mutliselect input however is used as a filter for a new search.

Is there a simple way, to add selected elements to a multiselect input by a drill down. Or do I have to use java script in stead.

I've already created a dashboard, which has a drilldown on a multivalue field.

<form>
  <label>My test Dashboard</label>
  <fieldset submitButton="false">
    <input type="multiselect" token="sel_tokens">
      <label>Selected Tokens</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <title>$Token$</title>
        <search>
          <query>| makeresults 
| eval _raw="2017-10-15 | INFO | NOTES=\"My app has ID APP-01234 and yours APP-56789\". The dedicated host is Test0815.de."
| rex field=_raw max_match=5 "(?P<appid>APP-\d{5})"
| rex field=_raw max_match=5 "(?P<host>Test0815.de)"
| eval Tokens=mvappend(appid, host)
| table _time, _raw, Tokens</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <set token="Token">$click.value2$</set>
        </drilldown>
      </table>
    </panel>
  </row>
</form>

[kamlesh_vaghela · Accepted solution]

Hi @BMacher,

Can you please try below XML and Javascript??

splunk/etc/apps/search/appserver/static/my.js

require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) {
    var defaultTokens = mvc.Components.getInstance('default');
    var sel_tokens_id = mvc.Components.get("sel_tokens_id");
    var sel_tokens_list = [];
    defaultTokens.on("change:TokenValue", function (e) {
        var myClickedVal = {label:e.attributes.TokenValue, value: e.attributes.TokenLabel}
        sel_tokens_list.push(myClickedVal);
        sel_tokens_id.settings.set("choices",sel_tokens_list);
        sel_tokens_id.render();
    });
});

Dashboard XML:

<form script="my.js">
   <label>My test Dashboard</label>
   <fieldset submitButton="false">
     <input type="multiselect" token="sel_tokens" id="sel_tokens_id">
       <label>Selected Tokens</label>
     </input>
   </fieldset>
   <row>
     <panel>
       <table>
         <title>$TokenValue$ $TokenLabel$</title>
         <search>
           <query>
             index=_internal | stats count by source sourcetype | table source sourcetype
           </query>
           <earliest>@h</earliest>
           <latest>now</latest>
           <sampleRatio>1</sampleRatio>
         </search>
         <option name="count">20</option>
         <option name="dataOverlayMode">none</option>
         <option name="drilldown">row</option>
         <option name="percentagesRow">false</option>
         <option name="rowNumbers">false</option>
         <option name="totalsRow">false</option>
         <option name="wrap">true</option>
         <drilldown>
           <set token="TokenValue">$row.source$</set>
           <set token="TokenLabel">$row.sourcetype$</set>
         </drilldown>
       </table>
     </panel>
   </row>
 </form>

I hope above example will help you.

Thanks

[niketn]

@BMacher, You should try to use your own JavaScript to handle multivalues for Multiselect input. However, you can try the following workaround in Simple XML as well.

PS:
1) I have introduced a Text Box to convert Single Value Comma Separated field (as far as your query/table has this instead of actual multivalue, you can get rid of text box.)
2) You can add depends attribute to always hide the text box in case you are sticking to text box i.e. depends="$alwaysHideTextBox$"

<form>
  <label>Multiselect from Table</label>
  <fieldset submitButton="false">
    <input type="multiselect" token="sel_tokens" searchWhenChanged="true">
      <label>Selected Tokens</label>
      <delimiter> </delimiter>
    </input>
    <input type="text" token="tokText" searchWhenChanged="true">
      <label>Intermediate Text</label>
      <change>
         <eval token="sel_tokens">split($value$,",")</eval>
         <eval token="form.sel_tokens">split($value$,",")</eval>
      </change>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <search>
          <query>| makeresults 
 | eval _raw="2017-10-15 | INFO | NOTES=\"My app has ID APP-01234 and yours APP-56789\". The dedicated host is Test0815.de."
 | rex field=_raw max_match=5 "(?P<appid>APP-\d{5})"
 | rex field=_raw max_match=5 "(?P<host>Test0815.de)"
 | eval Tokens=mvappend(appid, host)
 | table _time, _raw, Tokens</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <set token="tokText">$row.Tokens$</set>
          <set token="form.tokText">$row.Tokens$</set>
        </drilldown>
      </table>
    </panel>
  </row>
</form>

[rjthibod]

I think the issue is your are not properly addressing the name of the multi-select input from the drilldown.

You current have this: <set token="Token">$click.value2$</set>

If the name of your multi-select is "Token", then you need to use this instead: <set token="form.Token">$click.value2$</set>

This applies to pretty much all SimpleXML-defined inputs. To properly set those inputs via a token, you almost always want to use the token name with the form. prefix.

Last note, you should probably give your multi-select input a unique name - "Token" is not really clear.

[BMacher]

Thank you for answering my question. You're right, my naming should be better, but it's just a test dashboard. The form prefix does not really meet my needs. Because I want to insert more than one element into the mutliselect input, which is not possible with the form prefix, because it only inserts the currently selected token.