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!

Routing logs with Splunk OTel Collector for Kubernetes

The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Elevating Digital Service Excellence: The Synergy of Real User Monitoring and Application Performance ...