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!

Splunk Observability Cloud | Customer Survey!

If you use Splunk Observability Cloud, we invite you to share your valuable insights with us through a brief ...

Happy CX Day, Splunk Community!

Happy CX Day, Splunk Community! CX stands for Customer Experience, and today, October 3rd, is CX Day — a ...

.conf23 | Get Your Cybersecurity Defense Analyst Certification in Vegas

We’re excited to announce a new Splunk certification exam being released at .conf23! If you’re going to Las ...