Dashboards & Visualizations

How do I populate a multiselect input box with drilldowns in HTML dashboard?

thisissplunk
Builder

My table will have a list of items. I want my user's to be able to click on any value in one certain column and have those start filling in a MultiSelectInput form above.

How can I achieve this in HTML dashboards?

0 Karma
1 Solution

niketn
Legend

@thisissplunk, Ideally you should use Splunk JS stack/JavaScript to populate Multiselect value the way you expect. Following is one of the options in Simple XML where you use Table Clicks to create a temporary Comma Separated Value. If the same value is clicked twice then it gets removed from the list.

The list is formatted and fed to a text box. PS: The text box is temporary placeholder and can be hidden using depends Simple XML attribute. The Text boxes <change> event creates a multivalue token from Comma Separated field and assigns the same to Multi Select input.

alt text

Please find below a run anywhere example for the dashboard in the attached image:

<form>
  <label>Table row to  Multiselect</label>
  <init>
    <set token="tokTmpTable"></set>
  </init>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="multiselect" token="tokMulti" searchWhenChanged="true">
        <label>Multiselect Input</label>
      </input>
      <input type="text" token="tokText" searchWhenChanged="true">
        <label>Temporary Text Input to populate Multielect</label>
        <change>
          <eval token="tokMulti">split($value$,",")</eval>
          <eval token="form.tokMulti">split($value$,",")</eval>
        </change>
      </input>
      <table>
        <search>
          <query>| makeresults
| eval data="INFO,ERROR,WARN,FATAL"
| makemv data delim="," 
| mvexpand data
| fields - _time</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="tokTableClick">$row.data$</set>
          <eval token="tokTmpTable">case(match(tokTmpTable,$row.data$),replace(tokTmpTable,",".$row.data$,""),true(),tokTmpTable.",".$row.data$)</eval>
          <eval token="tokText">ltrim(tokTmpTable,",")</eval>
          <eval token="form.tokText">ltrim(tokTmpTable,",")</eval>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <code>Click same data value twice to remove from Multivalue selection </code>
      </html>
    </panel>
    </row>
    <row>
    <panel>
      <html>
        <code>Table Clicked Value</code>: $tokTableClick$
      </html>
    </panel>
    <panel>
      <html>
        <code>Comma Separated Selected Values for temporary Text Box</code>: $tokTmpTable$        
      </html>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

niketn
Legend

@thisissplunk, Ideally you should use Splunk JS stack/JavaScript to populate Multiselect value the way you expect. Following is one of the options in Simple XML where you use Table Clicks to create a temporary Comma Separated Value. If the same value is clicked twice then it gets removed from the list.

The list is formatted and fed to a text box. PS: The text box is temporary placeholder and can be hidden using depends Simple XML attribute. The Text boxes <change> event creates a multivalue token from Comma Separated field and assigns the same to Multi Select input.

alt text

Please find below a run anywhere example for the dashboard in the attached image:

<form>
  <label>Table row to  Multiselect</label>
  <init>
    <set token="tokTmpTable"></set>
  </init>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input type="multiselect" token="tokMulti" searchWhenChanged="true">
        <label>Multiselect Input</label>
      </input>
      <input type="text" token="tokText" searchWhenChanged="true">
        <label>Temporary Text Input to populate Multielect</label>
        <change>
          <eval token="tokMulti">split($value$,",")</eval>
          <eval token="form.tokMulti">split($value$,",")</eval>
        </change>
      </input>
      <table>
        <search>
          <query>| makeresults
| eval data="INFO,ERROR,WARN,FATAL"
| makemv data delim="," 
| mvexpand data
| fields - _time</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="tokTableClick">$row.data$</set>
          <eval token="tokTmpTable">case(match(tokTmpTable,$row.data$),replace(tokTmpTable,",".$row.data$,""),true(),tokTmpTable.",".$row.data$)</eval>
          <eval token="tokText">ltrim(tokTmpTable,",")</eval>
          <eval token="form.tokText">ltrim(tokTmpTable,",")</eval>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <code>Click same data value twice to remove from Multivalue selection </code>
      </html>
    </panel>
    </row>
    <row>
    <panel>
      <html>
        <code>Table Clicked Value</code>: $tokTableClick$
      </html>
    </panel>
    <panel>
      <html>
        <code>Comma Separated Selected Values for temporary Text Box</code>: $tokTmpTable$        
      </html>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

niketn
Legend

@thisissplunk, please accept the answer if it worked for you. Please let us know if you need further help!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

thisissplunk
Builder

Will this convert into html correctly?

0 Karma

niketn
Legend

I dont think <init> section is available in HTML Dashboard. Once you convert to HTML you will have to Initialize the token using JavaScript instead.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Hi thisissplunk,

You can make it by using javascript. Just set a token which populates multi-select dropdown.

Refer below link for javascript & Set Token implementation.

http://dev.splunk.com/view/javascript-sdk/SP-CAAAEDD

http://dev.splunk.com/view/webframework-developapps/SP-CAAAEW3

Let me know for any help in javascript.

Thanks

Get Updates on the Splunk Community!

Stay Connected: Your Guide to May Tech Talks, Office Hours, and Webinars!

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars this month. This ...

They're back! Join the SplunkTrust and MVP at .conf24

With our highly anticipated annual conference, .conf, comes the fez-wearers you can trust! The SplunkTrust, as ...

Enterprise Security Content Update (ESCU) | New Releases

Last month, the Splunk Threat Research Team had two releases of new security content via the Enterprise ...