Dashboards & Visualizations

How can we set the values of Time ranger picker according to the value selected from a dropdown?

Arminder_Bhalla
New Member

Hi everyone,

I have a below requirement :

1) A dropdown is there on a dashboard displaying Offer IDs. Each Offer ID has Offer Name, Start Date and End Date. A lookup file is being used to populate the dropdown.

2) When we select an Offer ID from the dropdown, its corresponding Start date and End Date should populate in the Time Range picker as earliest and latest respectively.

3) Then the queries in panels should get executed based on Time Range values.

Kindly help xxx

0 Karma
1 Solution

vnravikumar
Champion

Hi @Arminder_Bhalla

Try this and let me know

<form>
  <label>dropdowntime</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="offerid" searchWhenChanged="true">
      <label>Offer ID</label>
      <fieldForLabel>Offer ID</fieldForLabel>
      <fieldForValue>Offer ID</fieldForValue>
      <search>
        <query>| inputlookup offer 

| table "Offer ID"</query>
      </search>
      <selectFirstChoice>true</selectFirstChoice>
    </input>
    <input type="dropdown" token="field1" depends="$hide$">
      <label>field1</label>
      <fieldForLabel>Offer ID</fieldForLabel>
      <fieldForValue>Offer ID</fieldForValue>
      <search>
        <query>| inputlookup offer |search "Offer ID"=$offerid$
| rename "Start Date" as start_epoch,"End Date" as end_epoch 
| eval start_epoch = strptime(start_epoch,"%d-%m-%Y") 
| eval end_epoch = relative_time(strptime(end_epoch,"%d-%m-%Y"),"+1d") 
| table "Offer ID","Offer Name",start_epoch,end_epoch</query>
        <done>
          <condition>
            <set token="form.timepicker.earliest">$result.start_epoch$</set>
            <set token="form.timepicker.latest">$result.end_epoch$</set>
          </condition>
        </done>
      </search>
    </input>
    <input type="time" token="timepicker">
      <label>Date</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <search>
          <query>index="_internal" |stats count by host</query>
          <earliest>$timepicker.earliest$</earliest>
          <latest>$timepicker.latest$</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

lookup:

Offer ID,Offer Name, Start Date,End Date
1,offer1,11-03-2019,12-03-2019
2,offer2,10-03-2019,13-03-2019
3,offer3,01-03-2019,09-03-2019

View solution in original post

vnravikumar
Champion

Hi @Arminder_Bhalla

Try this and let me know

<form>
  <label>dropdowntime</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="offerid" searchWhenChanged="true">
      <label>Offer ID</label>
      <fieldForLabel>Offer ID</fieldForLabel>
      <fieldForValue>Offer ID</fieldForValue>
      <search>
        <query>| inputlookup offer 

| table "Offer ID"</query>
      </search>
      <selectFirstChoice>true</selectFirstChoice>
    </input>
    <input type="dropdown" token="field1" depends="$hide$">
      <label>field1</label>
      <fieldForLabel>Offer ID</fieldForLabel>
      <fieldForValue>Offer ID</fieldForValue>
      <search>
        <query>| inputlookup offer |search "Offer ID"=$offerid$
| rename "Start Date" as start_epoch,"End Date" as end_epoch 
| eval start_epoch = strptime(start_epoch,"%d-%m-%Y") 
| eval end_epoch = relative_time(strptime(end_epoch,"%d-%m-%Y"),"+1d") 
| table "Offer ID","Offer Name",start_epoch,end_epoch</query>
        <done>
          <condition>
            <set token="form.timepicker.earliest">$result.start_epoch$</set>
            <set token="form.timepicker.latest">$result.end_epoch$</set>
          </condition>
        </done>
      </search>
    </input>
    <input type="time" token="timepicker">
      <label>Date</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <table>
        <search>
          <query>index="_internal" |stats count by host</query>
          <earliest>$timepicker.earliest$</earliest>
          <latest>$timepicker.latest$</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</form>

lookup:

Offer ID,Offer Name, Start Date,End Date
1,offer1,11-03-2019,12-03-2019
2,offer2,10-03-2019,13-03-2019
3,offer3,01-03-2019,09-03-2019

Arminder_Bhalla
New Member

Thank you so much. It worked !!!

0 Karma
Get Updates on the Splunk Community!

Introducing the 2024 SplunkTrust!

Hello, Splunk Community! We are beyond thrilled to announce our newest group of SplunkTrust members!  The ...

Introducing the 2024 Splunk MVPs!

We are excited to announce the 2024 cohort of the Splunk MVP program. Splunk MVPs are passionate members of ...

Splunk Custom Visualizations App End of Life

The Splunk Custom Visualizations apps End of Life for SimpleXML will reach end of support on Dec 21, 2024, ...