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!

New in Observability - Improvements to Custom Metrics SLOs, Log Observer Connect & ...

The latest enhancements to the Splunk observability portfolio deliver improved SLO management accuracy, better ...

Improve Data Pipelines Using Splunk Data Management

  Register Now   This Tech Talk will explore the pipeline management offerings Edge Processor and Ingest ...

3-2-1 Go! How Fast Can You Debug Microservices with Observability Cloud?

Register Join this Tech Talk to learn how unique features like Service Centric Views, Tag Spotlight, and ...