- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Re: How can I show and hide panels based on a chec...
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I'm trying to use a checkbox to show and hide panels. I'm using the depends attribute of a panel for visibility, setting and unsetting the tokens for those in the change events of the checkbox. Unfortunately, it doesn't seem to work the way I would expect it to. See the following dashboard:
<form>
<label>_temp checkbox change events</label>
<fieldset submitButton="false">
<input type="checkbox" token="unused">
<label>Checkbox</label>
<choice value="show_a">Show a</choice>
<choice value="show_b">Show b</choice>
<default>show_b,show_a</default>
<change>
<condition value="show_a">
<set token="show_a">1</set>
<unset token="show_b"></unset>
<set token="conditionChecker">show a condition</set>
</condition>
<condition value="show_b">
<unset token="show_a"></unset>
<set token="show_b">1</set>
<set token="conditionChecker">show b condition</set>
</condition>
<condition value="*">
<set token="show_a">1</set>
<set token="show_b">1</set>
<set token="conditionChecker">* condition</set>
</condition>
</change>
</input>
</fieldset>
<row>
<panel>
<html>
<p>unused: $unused$</p>
<p>show_a: $show_a$</p>
<p>show_b: $show_b$</p>
<p>conditionChecker: $conditionChecker$</p>
</html>
</panel>
</row>
<row>
<panel depends="$show_a$">
<table>
<title>a</title>
<search>
<query>| makeresults</query>
<earliest>-15m</earliest>
<latest>now</latest>
</search>
</table>
</panel>
<panel depends="$show_b$">
<table>
<title>b</title>
<search>
<query>| makeresults</query>
<earliest>-15m</earliest>
<latest>now</latest>
</search>
</table>
</panel>
</row>
</form>
As you can see, the value of unused is "show_a" or "show_b" if only one box is checked, and this should be the value passed to the condition. The condition only seems to trigger on value="*" however. I've read the documentation and nowhere does it say that you can't use change and condition with checkbox inputs, I've also gotten feedback from the docs team that the code should work (which obviously it doesn't).
This has also come up before, and I remember someone suggesting using multiple checkbox inputs. I've also done it before with radio inputs, where the conditions work as expected (with two checkboxes, that would require three radio inputs for the three possible combinations; it gets worse with more options). I don't want to resort to those methods, can anyone help me with a proper solution?
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@jeffland , the solution you've provided requires entering ever possible pattern match. For example if you start to click on it in reverse, it may not work.
when you get a chance take a look at the solution below. you won't have to provide all possible with exact order, this one is a bit simpler
<form>
<label>_temp checkbox panel</label>
<fieldset submitButton="false">
<input type="checkbox" token="check" searchWhenChanged="true">
<label>$check$</label>
<choice value="a">a</choice>
<choice value="b">b</choice>
<choice value="c">c</choice>
<change>
<condition match="match($check$,"a") AND match($check$,"b") AND match($check$,"c")">
<set token="show_1">1</set>
<set token="show_2">1</set>
<set token="show_3">1</set>
</condition>
<condition match="match($check$,"a") AND match($check$,"b")">
<set token="show_1">1</set>
<set token="show_2">1</set>
<unset token="show_3"></unset>
</condition>
<condition match="match($check$,"a") AND match($check$,"c")">
<set token="show_1">1</set>
<set token="show_3">1</set>
<unset token="show_2"></unset>
</condition>
<condition match="match($check$,"b") AND match($check$,"c")">
<set token="show_2">1</set>
<set token="show_3">1</set>
<unset token="show_1"></unset>
</condition>
<condition match="$check$ = "a b"">
<set token="show_1">1</set>
<set token="show_2">1</set>
<unset token="show_3"></unset>
</condition>
<condition match="$check$ = "b"">
<unset token="show_1"></unset>
<set token="show_2">1</set>
<unset token="show_3"></unset>
</condition>
<condition match="$check$ = "c"">
<unset token="show_1"></unset>
<unset token="show_2"></unset>
<set token="show_3">1</set>
</condition>
<condition>
<unset token="show_1"></unset>
<unset token="show_2"></unset>
<unset token="show_3"></unset>
</condition>
</change>
<delimiter> </delimiter>
</input>
</fieldset>
<row>
<panel>
<title>Check: $check$ --- 1:$show_1$ /2:$show_2$ /3:$show_3$</title>
</panel>
<panel depends="$show_1$">
<title>Show 1</title>
</panel>
<panel depends="$show_2$">
<title>Show 2</title>
</panel>
<panel depends="$show_3$">
<title>Show 3</title>
</panel>
</row>
</form>- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@jeffland , the solution you've provided requires entering ever possible pattern match. For example if you start to click on it in reverse, it may not work.
when you get a chance take a look at the solution below. you won't have to provide all possible with exact order, this one is a bit simpler
<form>
<label>_temp checkbox panel</label>
<fieldset submitButton="false">
<input type="checkbox" token="check" searchWhenChanged="true">
<label>$check$</label>
<choice value="a">a</choice>
<choice value="b">b</choice>
<choice value="c">c</choice>
<change>
<condition match="match($check$,"a") AND match($check$,"b") AND match($check$,"c")">
<set token="show_1">1</set>
<set token="show_2">1</set>
<set token="show_3">1</set>
</condition>
<condition match="match($check$,"a") AND match($check$,"b")">
<set token="show_1">1</set>
<set token="show_2">1</set>
<unset token="show_3"></unset>
</condition>
<condition match="match($check$,"a") AND match($check$,"c")">
<set token="show_1">1</set>
<set token="show_3">1</set>
<unset token="show_2"></unset>
</condition>
<condition match="match($check$,"b") AND match($check$,"c")">
<set token="show_2">1</set>
<set token="show_3">1</set>
<unset token="show_1"></unset>
</condition>
<condition match="$check$ = "a b"">
<set token="show_1">1</set>
<set token="show_2">1</set>
<unset token="show_3"></unset>
</condition>
<condition match="$check$ = "b"">
<unset token="show_1"></unset>
<set token="show_2">1</set>
<unset token="show_3"></unset>
</condition>
<condition match="$check$ = "c"">
<unset token="show_1"></unset>
<unset token="show_2"></unset>
<set token="show_3">1</set>
</condition>
<condition>
<unset token="show_1"></unset>
<unset token="show_2"></unset>
<unset token="show_3"></unset>
</condition>
</change>
<delimiter> </delimiter>
</input>
</fieldset>
<row>
<panel>
<title>Check: $check$ --- 1:$show_1$ /2:$show_2$ /3:$show_3$</title>
</panel>
<panel depends="$show_1$">
<title>Show 1</title>
</panel>
<panel depends="$show_2$">
<title>Show 2</title>
</panel>
<panel depends="$show_3$">
<title>Show 3</title>
</panel>
</row>
</form>- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Of course, this is much nicer. It's still only a workaround, but still an obviously much better one - thanks!
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@jeffland You’re right. BTW thanks for accepting this answer. Greatly appreciated
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
The simple workaround is to use the inputs token instead of $value$ during the change event:
<form>
<label>_temp checkbox panel</label>
<fieldset submitButton="false">
<input type="checkbox" token="check">
<label>checkbox</label>
<choice value="a">a</choice>
<choice value="b">b</choice>
<choice value="c">c</choice>
<change>
<condition match="$check$ = "a"">
<set token="show_1">1</set>
<unset token="show_2"></unset>
<unset token="show_3"></unset>
</condition>
<condition match="$check$ = "a b"">
<set token="show_1">1</set>
<set token="show_2">1</set>
<unset token="show_3"></unset>
</condition>
<condition match="$check$ = "a c"">
<set token="show_1">1</set>
<unset token="show_2"></unset>
<set token="show_3">1</set>
</condition>
<condition match="$check$ = "a b c"">
<set token="show_1">1</set>
<set token="show_2">1</set>
<set token="show_3">1</set>
</condition>
<condition match="$check$ = "b"">
<unset token="show_1"></unset>
<set token="show_2">1</set>
<unset token="show_3"></unset>
</condition>
<condition match="$check$ = "b c"">
<unset token="show_1"></unset>
<set token="show_2">1</set>
<set token="show_3">1</set>
</condition>
<condition match="$check$ = "c"">
<unset token="show_1"></unset>
<unset token="show_2"></unset>
<set token="show_3">1</set>
</condition>
</change>
</input>
</fieldset>
<row>
<panel depends="$show_1$">
<table>
<title>table 1</title>
<search>
<query>| makeresults</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
<panel depends="$show_2$">
<table>
<title>table 2</title>
<search>
<query>| makeresults</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
<panel depends="$show_3$">
<table>
<title>table 3</title>
<search>
<query>| makeresults</query>
<earliest>-24h@h</earliest>
<latest>now</latest>
</search>
<option name="drilldown">none</option>
</table>
</panel>
</row>
</form>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@jeffland @frobinson_splunk I have documented a workaround to use an independent search to set tokens based on option/s selected in the checkbox. https://answers.splunk.com/answers/681330/can-i-hideunhide-specific-text-boxes-using-a-singl.html?ch...
Until there is a fix to the issue, the workaround can be used. It also has a reference to another Answer by @krdo to use Simple XML JS Extension to overcome the issue of Change Event Handler for checkbox with multiple options.
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Cool idea! Thanks for coming back with that.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@jeffland, for the row containing the two panels a and b, you can add depends to be associated with the check box input so that it gets hidden when both options are unselected:
<row depends="$unused$">
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
That doesn't change the problem with the change and condition statements though.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello,
I've filed a bug to get our engineering team to investigate this issue further. I'll post an update when I have more information.
Hope this helps!
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Definitely a bug--a fix is underway, so please stay tuned!
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
@frobinson_splunk Appreciate your effort. Any news?
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I am running into this exact issue as well. Any updates?
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
is there any update on this bug fix?
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Here is the option with single check box... Like @rjthibod mentioned, change event handler is not available for Checkbox or Multiselect control since both handle multi-values, even though the Splunk documentation mentions that change event is available for checkbox (http://docs.splunk.com/Documentation/Splunk/latest/Viz/EventHandlerReference).
I have submitted a feedback for the broken functionality for Checkbox change event as listed out in the following Splunk Documentation. I am not sure of how to create an Enhancement request, until then you can try the following option to run a dummy search to set the token you need (it will be more expensive than previous approach I mentioned in comments).
<fieldset submitButton="false">
<input type="checkbox" token="showPanel">
<label>Show/Hide Panels</label>
<choice value="Panel1">Panel1</choice>
<choice value="Panel2">Panel2</choice>
<default>Panel1,Panel2</default>
<initialValue>Panel1,Panel2</initialValue>
<delimiter> </delimiter>
</input>
</fieldset>
<search id="myDummySearch">
<query>| makeresults
| eval checkBoxSelection="$showPanel$"
| eval Panel1=case(like(checkBoxSelection, "%Panel1%"),"true")
| eval Panel2=case(like(checkBoxSelection, "%Panel2%"),"true")
| eval flag=case(Panel1=="true" AND Panel2=="true",1,Panel1=="true",2,Panel2="true",3,1==1,4)
| table Panel1 Panel2 flag </query>
<earliest>-1m</earliest>
<latest>now</latest>
<preview>
<condition match="$result.flag$=="1"">
<set token="showPanel1">true</set>
<set token="showPanel2">true</set>
</condition>
<condition match="$result.flag$=="2"">
<set token="showPanel1">true</set>
<unset token="showPanel2"></unset>
</condition>
<condition match="$result.flag$=="3"">
<set token="showPanel2">true</set>
<unset token="showPanel1"></unset>
</condition>
<condition>
<unset token="showPanel1"></unset>
<unset token="showPanel2"></unset>
</condition>
</preview>
</search>
However, you need to define two depends tokens both for checkbox and also one set through above search. Token from checkbox will handle the scenario to hide both panels where both check boxes are unchecked.
For example
<table depends="$showPanel1$,$showPanel$">
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Yea, there is definitely something not working as we all expect in 6.5.2 regarding this item.
Even you just tell Splunk to set a token to the current $value$ in the condition block, Splunk sets the token to the first value in the array $form.unused$ no matter what you check/uncheck after that. For example, I am talking about just doing the following with no other conditions and watching the value stored in $show_c$.
<change>
<condition value="*">
<set token="show_c">$value$</set>
</condition>
</change>
At this point, it looks like you would have to parse the token in some other place (e.g., another form/search) or write some JS.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
You can create two independent Check Boxes one for each Panel/visualization. Then you do not need to code change event handler as the checkbox token is unset when checkbox is unchecked.
<input type="checkbox" token="showPanel1">
<label>Show/Hide Panels</label>
<choice value="Panel1">Panel1</choice>
<default>Panel1</default>
<initialValue>Panel1</initialValue>
<delimiter> </delimiter>
</input>
<input type="checkbox" token="showPanel2">
<label></label>
<choice value="Panel2">Panel2</choice>
<default>ShowPanel2,Panel2</default>
<initialValue>ShowPanel2,Panel2</initialValue>
<delimiter> </delimiter>
</input>
</fieldset>
<row>
Then you can associate each of the panel with corresponding token through depends
<panel id="panel1" depends="$showPanel1$">
...
<panel id="panel2" depends="$showPanel2$">
| makeresults | eval message= "Happy Splunking!!!"
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
This is specifically what I didn't ask for. I've come across that solution, I don't want it. There has to be a better way.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
here's a minor change to your solution that makes it simpler
<form>
<label>_temp checkbox panel</label>
<fieldset submitButton="false">
<input type="checkbox" token="check" searchWhenChanged="true">
<label>$check$</label>
<choice value="a">a</choice>
<choice value="b">b</choice>
<choice value="c">c</choice>
<change>
<condition match="match($check$,"a") AND match($check$,"b") AND match($check$,"c")">
<set token="show_1">1</set>
<set token="show_2">1</set>
<set token="show_3">1</set>
</condition>
<condition match="match($check$,"a") AND match($check$,"b")">
<set token="show_1">1</set>
<set token="show_2">1</set>
<unset token="show_3"></unset>
</condition>
<condition match="match($check$,"a") AND match($check$,"c")">
<set token="show_1">1</set>
<set token="show_3">1</set>
<unset token="show_2"></unset>
</condition>
<condition match="match($check$,"b") AND match($check$,"c")">
<set token="show_2">1</set>
<set token="show_3">1</set>
<unset token="show_1"></unset>
</condition>
<condition match="$check$ = "a b"">
<set token="show_1">1</set>
<set token="show_2">1</set>
<unset token="show_3"></unset>
</condition>
<condition match="$check$ = "b"">
<unset token="show_1"></unset>
<set token="show_2">1</set>
<unset token="show_3"></unset>
</condition>
<condition match="$check$ = "c"">
<unset token="show_1"></unset>
<unset token="show_2"></unset>
<set token="show_3">1</set>
</condition>
<condition>
<unset token="show_1"></unset>
<unset token="show_2"></unset>
<unset token="show_3"></unset>
</condition>
</change>
<delimiter> </delimiter>
</input>
</fieldset>
<row>
<panel>
<title>Check: $check$ --- 1:$show_1$ /2:$show_2$ /3:$show_3$</title>
</panel>
<panel depends="$show_1$">
<title>Show 1</title>
</panel>
<panel depends="$show_2$">
<title>Show 2</title>
</panel>
<panel depends="$show_3$">
<title>Show 3</title>
</panel>
</row>
</form>
New This Month in Splunk Observability Cloud - Metrics Usage Analytics, Enhanced K8s ...
Alerting Best Practices: How to Create Good Detectors
Discover Powerful New Features in Splunk Cloud Platform: Enhanced Analytics, ...
