Dashboards & Visualizations

Is it possible to set a token through an html form rather than an input?

andrewtrobec
Motivator

Hello,
I'm trying to set a token from within an html form which is within a panel. Since the date input in HTML is very useful, I'm trying to pass that value to a token for use in dashboard panel searches. Here is an idea of what I'm trying to do (it doesn't work):

<form>
  <label>Set Date</label>
  <row>
    <panel>
      <html>
            Date: <input type="date" token="tok_date"/>
        </html>
    </panel>
  </row>
  <row>
    <panel>
      <event>
        <search>
          <query>| makeresults | eval Value = "$tok_date$" | table Value</query>
          <earliest>0</earliest>
        </search>
        <option name="colorBy">value</option>
        <option name="colorMode">none</option>
        <option name="numberPrecision">0</option>
        <option name="showSparkline">1</option>
        <option name="showTrendIndicator">1</option>
        <option name="trendColorInterpretation">standard</option>
        <option name="trendDisplayMode">absolute</option>
        <option name="useColors">0</option>
        <option name="useThousandSeparators">1</option>
        <option name="linkView">search</option>
        <option name="underLabel">Selected Date</option>
        <option name="list.drilldown">full</option>
        <option name="list.wrap">1</option>
        <option name="maxLines">5</option>
        <option name="raw.drilldown">full</option>
        <option name="rowNumbers">0</option>
        <option name="table.drilldown">all</option>
        <option name="table.wrap">1</option>
        <option name="type">list</option>
        <fields>["host","source","sourcetype"]</fields>
      </event>
    </panel>
  </row>
</form>

Is what I'm trying to do at all possible?

Thank you and best regards,

Andrew

Tags (2)
0 Karma

poete
Builder

Hello @andrewtrobec ,

I modified a bit the content of the content of the dashboard and wrote a few lines of javascript, and it works.

<dashboard script="testToken.js">
  <label>Set Date</label>
  <row>
    <panel>
      <html>

             Date: <input type="date" token="tok_date"/>

            <input type="button" id="submitButton" value="Click Me!"/>
         </html>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <search>
          <query>| makeresults | eval Value="$tok_date$" | table Value</query>
          <earliest>0</earliest>
          <latest></latest>
        </search>
        <option name="drilldown">cell</option>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

and the content of the js is :

require(['splunkjs/mvc','jquery', 'splunkjs/mvc/simplexml/ready!'], function (mvc,$) {
    $(document).ready(function () {
        // Retrieve the default token model
        var defaultTokenModel = mvc.Components.get("default");

            $("#submitButton").on("click", function (){
                defaultTokenModel.set("tok_date", document.querySelector('input[type="date"]').value);
             });    
        });
});

You should be able to elaborate from this

0 Karma
Get Updates on the Splunk Community!

Index This | Why did the turkey cross the road?

November 2025 Edition  Hayyy Splunk Education Enthusiasts and the Eternally Curious!   We’re back with this ...

Enter the Agentic Era with Splunk AI Assistant for SPL 1.4

  &#x1f680; Your data just got a serious AI upgrade — are you ready? Say hello to the Agentic Era with the ...

Feel the Splunk Love: Real Stories from Real Customers

Hello Splunk Community,    What’s the best part of hearing how our customers use Splunk? Easy: the positive ...