Dashboards & Visualizations

How to display dropdown values in the title bar of a panel?

dbcase
Motivator

Hi,

I have 2 dropdowns at the top of a dashboard, the first one is a time period selection and the second one is a product selection. See the 2nd screenshote below. What I'd like to do is use the values of each in a subsequent panel. In this case the values would be "Last 7 days" and "All". I've been poking around with it but no luck yet. See the 1st screenshot below. Here is the XML that I've been toying with alt text. Here is the XML that I've been toying with <title>Playback vs Error for $Product_token$ for $time_field.label$</title>

alt text

0 Karma
1 Solution

niketn
Legend

@dbcase if you want to show a preset value or relative value from Time Picker as Panel Title you can refer to one of my previous answers: https://answers.splunk.com/answers/633356/whats-the-token-name-for-the-time-pickers-display.html

If you want to show Earliest and Latest Time based on Time Picker Selected, this is another one of my answers: https://answers.splunk.com/answers/578984/running-one-of-two-searches-based-on-time-picker-s.html

For the Product dropdown the token contains the Value of the dropdown while you need to display the Label. So, you need to access the default dropdown input token $label$ in the <change> event handler and pass it on to the panel. Refer to following run anywhere dashboard example. You should also check out Splunk Dashboard Examples App.

<form>
  <label>Drodown Label</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="tokProduct">
      <label>Select a Product</label>
      <change>
        <set token="tokProductLabel">$label$</set>
      </change>
      <choice value="a">Alpha</choice>
      <choice value="b">Beta</choice>
      <choice value="c">Charlie</choice>
      <choice value="d">Delta</choice>
      <default>a</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>tokProductLabel: $tokProductLabel$</title>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@dbcase if you want to show a preset value or relative value from Time Picker as Panel Title you can refer to one of my previous answers: https://answers.splunk.com/answers/633356/whats-the-token-name-for-the-time-pickers-display.html

If you want to show Earliest and Latest Time based on Time Picker Selected, this is another one of my answers: https://answers.splunk.com/answers/578984/running-one-of-two-searches-based-on-time-picker-s.html

For the Product dropdown the token contains the Value of the dropdown while you need to display the Label. So, you need to access the default dropdown input token $label$ in the <change> event handler and pass it on to the panel. Refer to following run anywhere dashboard example. You should also check out Splunk Dashboard Examples App.

<form>
  <label>Drodown Label</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="tokProduct">
      <label>Select a Product</label>
      <change>
        <set token="tokProductLabel">$label$</set>
      </change>
      <choice value="a">Alpha</choice>
      <choice value="b">Beta</choice>
      <choice value="c">Charlie</choice>
      <choice value="d">Delta</choice>
      <default>a</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <title>tokProductLabel: $tokProductLabel$</title>
    </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

dbcase
Motivator

Hi Niektnilay,

Many thanks! The label for the product worked great! I'm still not able to obtain the label for the time though.

I tried this but no luck

<search>
     <query>| makeresults
     </query>
     <done>
       <eval token="tokManuallySelectedTime">"From ".strftime(strptime($time_field.earliestTime$,"%Y/%m/%d %H:%M:%S"),"%Y/%m/%d %H:%M:%S")." to ".strftime(strptime($time_field.latestTime$,"%Y/%m/%d %H:%M:%S"),"%Y/%m/%d %H:%M:%S")</eval>
       <eval 
   </search>

<row>
    <panel>
      <title>Playback vs Error for $Product_token_label$ for $tokManuallySelectedTime$</title>
      <chart>
        <title>Click a column for additional detail</title>
        <search>
etc.......
0 Karma

dbcase
Motivator

found it

<input type="time" token="time_field">
      <label>Please select a time period</label>
      <change>
         <set token="tokDisplaySelectedTime">$label$</set>
       </change>
      <default>
        <earliest>-24h@h</earliest>
        <latest>now</latest>
      </default>
    </input>

niketn
Legend

In your dummy search you have missed the tokens from your time picker. So the result will always be All time i.e. 1970 Date till 0. If your Time Input is time_field then you need to add the following <earliest> and <latest> time to your dummy search:

 <search>
      <query>| makeresults
      </query>
      <done>
        <eval token="tokManuallySelectedTime">"From ".strftime(strptime($time_field.earliestTime$,"%Y/%m/%d %H:%M:%S"),"%Y/%m/%d %H:%M:%S")." to ".strftime(strptime($time_field.latestTime$,"%Y/%m/%d %H:%M:%S"),"%Y/%m/%d %H:%M:%S")</eval>
        <eval 
        <earliest>$time_field.earliest$<earliest>
        <latest>$time_field.latest$<latest>
    </search>

Please try out and confirm!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...

Routing logs with Splunk OTel Collector for Kubernetes

The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...

Welcome to the Splunk Community!

(view in My Videos) We're so glad you're here! The Splunk Community is place to connect, learn, give back, and ...