Dashboards & Visualizations

Hide/Display Panels Using Multiselect

IRHM73
Motivator

Hi

I wonder whether someone could help me please.

I'm trying to put together a dashboard whereby the panels are hidden or displayed via a 'Mutltiselect' field.

This is the code I have:

<form>
  <label>based on choice2</label>
  <fieldset submitButton="false">
    <input type="time" token="field1">
      <label></label>
      <default>
        <earliest>-60m@m</earliest>
        <latest>now</latest>
      </default>
    </input>
    <input type="multiselect" token="service_tok" searchWhenChanged="true">
      <label>Select a Service</label>
      <choice value="*">All</choice>
      <choice value="show_bob">Bob</choice>
      <choice value="show_tom">Tom</choice>
      <change>
        <condition label="Bob">
          <set token="show_bob">y</set>
          <unset token="show_bob"></unset>
        </condition>
        <condition label="Tom">
          <set token="show_tom">y</set>
          <unset token="show_tom"></unset>
        </condition>
        <condition label="All">
          <set token="show_bob">y</set>
          <set token="show_tom">y</set>
        </condition>
      </change>
    </input>
  </fieldset>
  <row>
    <panel depends="$show_bob$">
      <table>
        <title>SOA Request Count</title>
        <search>
          <query>host=abcd source="/access.log*"  | timechart span=1hr count by host</query>
          <earliest>-4h@m</earliest>
          <latest>now</latest>
        </search>
        </table>
    </panel>
  </row>
  <row>
    <panel depends="$show_tom$">
      <table>
        <title>OSB Request Count</title>
        <search>
          <query>host=abcd source="access.log" | timechart span=1hr count by host</query>
          <earliest>-4h@m</earliest>
          <latest>now</latest>
        </search>
        </table>
    </panel>
  </row>
</form>

But the issue is, is that panels do not display or hide so could someone have a look at this please and let me know where I've gone wrong.

Many thanks and kind regards

Chris

1 Solution

niketn
Legend

IRHM73, with multiple values in token the change event handler pics only one or first value selected in multivalue (same is the behavior with Check Box with multiple values as well: https://answers.splunk.com/answers/506563/how-can-i-show-and-hide-panels-based-on-a-checkbox.html ).
Refer to documentation that change handler is not available for Multi Select input:
http://docs.splunk.com/Documentation/Splunk/latest/Viz/EventHandlerReference#Event_handler_element

So ideally you would need to handle these multiselect input token related code using JavaScript, so that you can custom code as per your need (one example specific to the use case of that particular question is https://answers.splunk.com/answers/504338/using-eventhandler-with-multiselectinput.html ).

Since you have an option for All along with Bob and Tom, you should ideally evaluate use of Radio input instead of multiselect with none also as one of your options if you want to hide all. So at a time user can select only one option.

Second option for you, if you want to stick to multiselect, would be to use a dummy search to parse through Selected choices in multiselect and set the token using eval for showing All panels, showing Bob, showing Tom or Showing none. Please try out the following example. PS: I have added an empty panel to print out the depends tokens for testing.

<form>
  <label>Multiselect input to hide/show multiple panels</label>
   <fieldset submitButton="false">
     <input type="time" token="field1">
       <label></label>
       <default>
         <earliest>-60m@m</earliest>
         <latest>now</latest>
       </default>
     </input>
     <input type="multiselect" token="service_tok" searchWhenChanged="true">
       <label>Select a Service</label>
       <choice value="*">All</choice>
       <choice value="show_bob">Bob</choice>
       <choice value="show_tom">Tom</choice>
       <change>
        <unset token="tokShowAll"></unset>
        <unset token="tokShowBob"></unset>
        <unset token="tokShowTom"></unset>
       </change>
     </input>
   </fieldset>
   <search>
     <query>
       | makeresults
       | fields - _time
       | eval data="$service_tok$"
       | eval condition=case(match(data,"\*"),"show_all",match(data,"show_bob") AND match(data,"show_tom"),"show_all",match(data,"show_bob"),"show_bob",match(data,"show_tom"),"show_tom")
       | eval show_all=case(condition="show_all","true")
       | eval show_bob=case(condition="show_bob" OR condition="show_all","true")
       | eval show_tom=case(condition="show_tom" OR condition="show_all","true")
     </query>
     <done>
       <condition match="$job.resultCount$!=0">
        <eval token="tokShowAll">case(isnotnull($result.show_all$),$result.show_all$)</eval>
        <eval token="tokShowBob">case(isnotnull($result.show_bob$),$result.show_bob$)</eval>
        <eval token="tokShowTom">case(isnotnull($result.show_tom$),$result.show_tom$)</eval>
       </condition>
       <condition>
        <unset token="tokShowAll"></unset>
        <unset token="tokShowBob"></unset>
        <unset token="tokShowTom"></unset>
       </condition>
     </done>
   </search>
   <row>
     <panel>
       <title>$service_tok$ - $tokShowAll$, $tokShowBob$, $tokShowTom$</title>
     </panel>
   </row>
   <row depends="$tokShowBob$">
     <panel>
       <table>
         <title>SOA Request Count</title>
         <search>
           <query>host=abcd source="/access.log*"  | timechart span=1hr count by host</query>
           <earliest>-4h@m</earliest>
           <latest>now</latest>
         </search>
         </table>
     </panel>
   </row>
   <row depends="$tokShowTom$">
     <panel>
       <table>
         <title>OSB Request Count</title>
         <search>
           <query>host=abcd source="access.log" | timechart span=1hr count by host</query>
           <earliest>-4h@m</earliest>
           <latest>now</latest>
         </search>
         </table>
     </panel>
   </row>
 </form>

Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

hegga
Explorer

This worked best for me.

<input type="multiselect" token="service_tok" searchWhenChanged="true">
       <label>Select a Service</label>
       <choice value="show_all">All</choice>
       <choice value="show_bob">Bob</choice>
       <choice value="show_tom">Tom</choice>
       <change>
         <condition>
            <unset token="show_bob"></unset>
            <unset token="show_tom"></unset>
            <eval token="show_bob">if(match($service_tok$, "show_bob") > 0 OR match($service_tok$, "show_all") > 0, "show_bob", NULL())</eval>
            <eval token="show_tom">if(match($service_tok$, "show_tom") > 0 OR match($service_tok$, "show_all") > 0, "show_tom", NULL())</eval>
         </condition>
       </change>
</input>

singhr_citec
Engager

Thanks Hegga, This worked for me too. Quick and easy, exactly the way i wanted.

0 Karma

mateodagostino
Engager

I Still cannot make the tokens get values. I am showing the tokens in a panel just to see if checking the multiselect options changes the token values, but it doesn't:

 <input type="multiselect" token="apps" searchWhenChanged="true">
      <label>Apps</label>
      <choice value="*">All</choice>
      <choice value="app_unix">Unix</choice>
      <choice value="app_patrol">patrol &amp; FS</choice>
      <choice value="app_skype">Skype</choice>
      <choice value="app_bobis">bobis</choice>
      <choice value="app_crm">L&amp;S CRM</choice>
      <choice value="app_ad">AD</choice>
      <choice value="app_geoforce">geoforce</choice>
      <choice value="app_buenavista">buenavista</choice>
      <choice value="app_webmethods">WebMethods</choice>
      <choice value="app_spi">SPI</choice>
      <choice value="app_swaft">swaft</choice>
      <choice value="app_ideas">IDEAS</choice>
      <choice value="app_prices">Prices</choice>
      <choice value="app_taxi">taxi</choice>
      <change>
        <unset token="tokShowAll"></unset>
        <unset token="tokShowUnix"></unset>
        <unset token="tokShowpatrol"></unset>
        <unset token="tokShowSkype"></unset>
        <unset token="tokShowbobis"></unset>
        <unset token="tokShowCrm"></unset>
        <unset token="tokShowAd"></unset>
        <unset token="tokShowgeoforce"></unset>
        <unset token="tokShowbuenavista"></unset>
        <unset token="tokShowWebMethods"></unset>
        <unset token="tokShowSpi"></unset>
        <unset token="tokShowswaft"></unset>
        <unset token="tokShowIdeas"></unset>
        <unset token="tokShowPrices"></unset>
        <unset token="tokShowtaxi"></unset>
      </change>
    </input>
  </fieldset>
<search>
      <query>
        | makeresults
        | fields - _time
        | eval data="$apps$"
        | makemv delim=" " data
        | mvexpand data
        | eval condition=case(match(data,"*"),"show_all",
        match(data,"app_unix") AND
        match(data,"app_patrol") AND
        match(data,"app_bobis") AND
        match(data,"app_skype") AND
        match(data,"app_crm") AND
        match(data,"app_ad") AND
        match(data,"app_geoforce") AND
        match(data,"app_buenavista") AND
        match(data,"app_webmethods") AND
        match(data,"app_spi") AND
        match(data,"app_swaft") AND
        match(data,"app_ideas") AND
        match(data,"app_prices") AND
        match(data,"app_taxi"),"show_all",
        match(data,"app_unix"),"app_unix",
        match(data,"app_patrol"),"app_patrol",
        match(data,"app_bobis"),"app_bobis",
        match(data,"app_skype"),"app_skype",
        match(data,"app_crm"),"app_crm",
        match(data,"app_ad"),"app_ad",
        match(data,"app_geoforce"),"app_geoforce",
        match(data,"app_buenavista"),"app_buenavista",
        match(data,"app_webmethods"),"app_webmethods",
        match(data,"app_spi"),"app_spi",
        match(data,"app_swaft"),"app_swaft",
        match(data,"app_ideas"),"app_ideas",
        match(data,"app_prices"),"app_prices",
        match(data,"app_taxi"),"app_taxi"
        | eval show_all=case(condition="show_all","true")
        | eval app_unix=case(condition="app_unix" OR condition="show_all","true")
        | eval app_patrol=case(condition="app_patrol" OR condition="show_all","true")
        | eval app_skype=case(condition="app_skype" OR condition="show_all","true")
        | eval app_bobis=case(condition="app_bobis" OR condition="show_all","true")
        | eval app_crm=case(condition="app_crm" OR condition="show_all","true")
        | eval app_ad=case(condition="app_ad" OR condition="show_all","true")
        | eval app_geoforce=case(condition="app_geoforce" OR condition="show_all","true")
        | eval app_buenavista=case(condition="app_buenavista" OR condition="show_all","true")
        | eval app_webmethods=case(condition="app_webmethods" OR condition="show_all","true")
        | eval app_spi=case(condition="app_spi" OR condition="show_all","true")
        | eval app_swaft=case(condition="app_swaft" OR condition="show_all","true")
        | eval app_ideas=case(condition="app_ideas" OR condition="show_all","true")
        | eval app_prices=case(condition="app_prices" OR condition="show_all","true")
        | eval app_taxi=case(condition="app_taxi" OR condition="show_all","true")
      | table show_all app_unix app_patrol app_skype app_bobis app_crm app_ad app_geoforce app_buenavista app_webmethods app_spi app_swaft app_ideas app_prices app_taxi
    | stats max(*) as *

      </query>
      <done>
        <condition match="$job.resultCount$!=0">
         <eval token="tokShowAll">case(isnotnull($result.show_all$),$result.show_all$)</eval>
         <eval token="tokShowUnix">case(isnotnull($result.app_unix$),$result.app_unix$)</eval>
         <eval token="tokShowSkype">case(isnotnull($result.app_skype$),$result.app_skype$)</eval>
         <eval token="tokShowpatrol">case(isnotnull($result.app_patrol$),$result.app_patrol$)</eval>
         <eval token="tokShowbobis">case(isnotnull($result.app_bobis$),$result.app_bobis$)</eval>
         <eval token="tokShowCrm">case(isnotnull($result.app_crm$),$result.app_crm$)</eval>
         <eval token="tokShowAd">case(isnotnull($result.app_ad$),$result.app_ad$)</eval>
         <eval token="tokShowgeoforce">case(isnotnull($result.app_geoforce$),$result.app_geoforce$)</eval>
         <eval token="tokShowbuenavista">case(isnotnull($result.app_buenavista$),$result.app_buenavista$)</eval>
         <eval token="tokShowWebMethods">case(isnotnull($result.app_webmethods$),$result.app_webmethods$)</eval>
         <eval token="tokShowSpi">case(isnotnull($result.app_spi$),$result.app_spi$)</eval>
         <eval token="tokShowswaft">case(isnotnull($result.app_swaft$),$result.app_swaft$)</eval>
         <eval token="tokShowIdeas">case(isnotnull($result.app_ideas$),$result.app_ideas$)</eval>
         <eval token="tokShowPrices">case(isnotnull($result.show_patrol$),$result.app_patrol$)</eval>
         <eval token="tokShowtaxi">case(isnotnull($result.app_taxi$),$result.app_taxi$)</eval>
        </condition>
    <condition>
        <unset token="tokShowAll"></unset>
        <unset token="tokShowUnix"></unset>
        <unset token="tokShowpatrol"></unset>
        <unset token="tokShowSkype"></unset>
        <unset token="tokShowbobis"></unset>
        <unset token="tokShowCrm"></unset>
        <unset token="tokShowAd"></unset>
        <unset token="tokShowgeoforce"></unset>
        <unset token="tokShowbuenavista"></unset>
        <unset token="tokShowWebMethods"></unset>
        <unset token="tokShowSpi"></unset>
        <unset token="tokShowswaft"></unset>
        <unset token="tokShowIdeas"></unset>
        <unset token="tokShowPrices"></unset>
        <unset token="tokShowtaxi"></unset>
    </condition>    
      </done>
    </search>
 <row>
    <panel>
       <title>$apps$ $tokShowSkype$ </title>
    </panel>
 </row>
0 Karma

niketn
Legend

IRHM73, with multiple values in token the change event handler pics only one or first value selected in multivalue (same is the behavior with Check Box with multiple values as well: https://answers.splunk.com/answers/506563/how-can-i-show-and-hide-panels-based-on-a-checkbox.html ).
Refer to documentation that change handler is not available for Multi Select input:
http://docs.splunk.com/Documentation/Splunk/latest/Viz/EventHandlerReference#Event_handler_element

So ideally you would need to handle these multiselect input token related code using JavaScript, so that you can custom code as per your need (one example specific to the use case of that particular question is https://answers.splunk.com/answers/504338/using-eventhandler-with-multiselectinput.html ).

Since you have an option for All along with Bob and Tom, you should ideally evaluate use of Radio input instead of multiselect with none also as one of your options if you want to hide all. So at a time user can select only one option.

Second option for you, if you want to stick to multiselect, would be to use a dummy search to parse through Selected choices in multiselect and set the token using eval for showing All panels, showing Bob, showing Tom or Showing none. Please try out the following example. PS: I have added an empty panel to print out the depends tokens for testing.

<form>
  <label>Multiselect input to hide/show multiple panels</label>
   <fieldset submitButton="false">
     <input type="time" token="field1">
       <label></label>
       <default>
         <earliest>-60m@m</earliest>
         <latest>now</latest>
       </default>
     </input>
     <input type="multiselect" token="service_tok" searchWhenChanged="true">
       <label>Select a Service</label>
       <choice value="*">All</choice>
       <choice value="show_bob">Bob</choice>
       <choice value="show_tom">Tom</choice>
       <change>
        <unset token="tokShowAll"></unset>
        <unset token="tokShowBob"></unset>
        <unset token="tokShowTom"></unset>
       </change>
     </input>
   </fieldset>
   <search>
     <query>
       | makeresults
       | fields - _time
       | eval data="$service_tok$"
       | eval condition=case(match(data,"\*"),"show_all",match(data,"show_bob") AND match(data,"show_tom"),"show_all",match(data,"show_bob"),"show_bob",match(data,"show_tom"),"show_tom")
       | eval show_all=case(condition="show_all","true")
       | eval show_bob=case(condition="show_bob" OR condition="show_all","true")
       | eval show_tom=case(condition="show_tom" OR condition="show_all","true")
     </query>
     <done>
       <condition match="$job.resultCount$!=0">
        <eval token="tokShowAll">case(isnotnull($result.show_all$),$result.show_all$)</eval>
        <eval token="tokShowBob">case(isnotnull($result.show_bob$),$result.show_bob$)</eval>
        <eval token="tokShowTom">case(isnotnull($result.show_tom$),$result.show_tom$)</eval>
       </condition>
       <condition>
        <unset token="tokShowAll"></unset>
        <unset token="tokShowBob"></unset>
        <unset token="tokShowTom"></unset>
       </condition>
     </done>
   </search>
   <row>
     <panel>
       <title>$service_tok$ - $tokShowAll$, $tokShowBob$, $tokShowTom$</title>
     </panel>
   </row>
   <row depends="$tokShowBob$">
     <panel>
       <table>
         <title>SOA Request Count</title>
         <search>
           <query>host=abcd source="/access.log*"  | timechart span=1hr count by host</query>
           <earliest>-4h@m</earliest>
           <latest>now</latest>
         </search>
         </table>
     </panel>
   </row>
   <row depends="$tokShowTom$">
     <panel>
       <table>
         <title>OSB Request Count</title>
         <search>
           <query>host=abcd source="access.log" | timechart span=1hr count by host</query>
           <earliest>-4h@m</earliest>
           <latest>now</latest>
         </search>
         </table>
     </panel>
   </row>
 </form>

Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

paramagurukarth
Builder

I didn't need this answer. But Impressed by your effort to help someone!!!

UP_VOTED

anatoliikostin
Explorer

I was searching for this solution for a long time!
Thanks @niketnilau! It works for me perfectly!

IRHM73
Motivator

Hi @niketnilay,

Thank you so much for taking the time to come back to me with this and for putting such a comprehensive post together.

Your solution works a treat!!

Thank you once again and have a good day,

Kindest Regards

Chris

Get Updates on the Splunk Community!

Earn a $35 Gift Card for Answering our Splunk Admins & App Developer Survey

Survey for Splunk Admins and App Developers is open now! | Earn a $35 gift card!      Hello there,  Splunk ...

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

You’ve probably heard the latest about AppDynamics joining the Splunk Observability portfolio, deepening our ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

As we’ve seen, integrating Kubernetes environments with Splunk Observability Cloud is a quick and easy way to ...