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!

Database Performance Sidebar Panel Now on APM Database Query Performance & Service ...

We’ve streamlined the troubleshooting experience for database-related service issues by adding a database ...

IM Landing Page Filter - Now Available

We’ve added the capability for you to filter across the summary details on the main Infrastructure Monitoring ...

Dynamic Links from Alerts to IM Navigators - New in Observability Cloud

Splunk continues to improve the troubleshooting experience in Observability Cloud with this latest enhancement ...