Dashboards & Visualizations

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

Builder

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

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