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

Got questions? Get answers!

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Meet up IRL or virtually!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Get Updates on the Splunk Community!

Announcing Modern Navigation: A New Era of Splunk User Experience

We are excited to introduce the Modern Navigation feature in the Splunk Platform, available to both cloud and ...

Modernize your Splunk Apps – Introducing Python 3.13 in Splunk

We are excited to announce that the upcoming releases of Splunk Enterprise 10.2.x and Splunk Cloud Platform ...

Step into “Hunt the Insider: An Splunk ES Premier Mystery” to catch a cybercriminal ...

After a whole week of being on call, you fell asleep on your keyboard, and you hit a sequence of buttons that ...