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?
@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.
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>
@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.
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>
@thisissplunk, please accept the answer if it worked for you. Please let us know if you need further help!
Will this convert into html correctly?
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.
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