Reporting

how can I send the drilldown value of XML table to HTML inputextbox?

jadengoho
Builder

I have a HTML input textbox and a XML table
how can I send the drilldown value of XML table to HTML inputextbox

  <title>TITLE INPUT HERE</title>
  <table>
    <search> 
          <query>| index something_to_search|   stats count as count</query>
    </search>
    <option name="drilldown">row</option>
    <drilldown>
      <condition>
          ###what should i put here ###
        <set values=""></set>
      </condition>
    </drilldown>
  </table>
</panel>
   <html>
          <input type="text" id="textbox_id"/>
   <html>
Tags (1)
0 Karma
1 Solution

niketn
Legend

@jadengoho, you can definitely use HTML inputs in Splunk Dashboards (https://www.splunk.com/blog/2016/09/21/using-html5-input-types-on-splunk-forms.html). However, in order to get/set contents of such HTML inputs, you would need Simple XML JavaScript Extension to select HTML input using jQuery selector (https://www.w3schools.com/jquery/jquery_ref_selectors.asp).

Following is a run anywhere dashboard to explain the same:

alt text

Simple XML Dashboard code:

<dashboard script="pass_token_to_html_text_box.js">
  <label>Pass table drilldown to HTML Text Input</label>
  <row>
    <panel>
      <table>
        <search>
          <query>index="_internal" sourcetype="splunkd" log_level!="INFO" component!="ConfContentsCache"
| stats count by component log_level</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">true</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <set token="tokComponent">$row.component$</set>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        Clicked Component Name is: <input type="text" id="myHtmlTextBox" disabled="disabled"/>
      </html>
    </panel>
  </row>
</dashboard>

Required JavaScript pass_token_to_html_text_box.js to be placed under Splunk App's appserver/static folder which is typically, $SPLUNK_HOME/etc/apps/<YourSplunkAppName>/appserver/static. If the folder appserver/static does not exist your would need to create one. Also since this is Static file related change, you may need to refresh/restart/bump your Splunk instance for the changes in JavaScript to reflect. You may also need to clear your browser history. Refer to Splunk Dev site for Splunk JS stack token change handler: http://dev.splunk.com/view/webframework-developapps/SP-CAAAEW4
Following is the JavaScript File: pass_token_to_html_text_box.js

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function($,mvc){
    var defaultTokenModel = mvc.Components.get("default");
    defaultTokenModel.on("change:tokComponent", function(newToken, tokComponent, options) {
        console.log("tokComponent: ",tokComponent);
        if (tokComponent !== "undefined" && tokComponent !== "$row.component$") {
            $('#myHtmlTextBox').val(tokComponent);
        }
    }); 
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@jadengoho, you can definitely use HTML inputs in Splunk Dashboards (https://www.splunk.com/blog/2016/09/21/using-html5-input-types-on-splunk-forms.html). However, in order to get/set contents of such HTML inputs, you would need Simple XML JavaScript Extension to select HTML input using jQuery selector (https://www.w3schools.com/jquery/jquery_ref_selectors.asp).

Following is a run anywhere dashboard to explain the same:

alt text

Simple XML Dashboard code:

<dashboard script="pass_token_to_html_text_box.js">
  <label>Pass table drilldown to HTML Text Input</label>
  <row>
    <panel>
      <table>
        <search>
          <query>index="_internal" sourcetype="splunkd" log_level!="INFO" component!="ConfContentsCache"
| stats count by component log_level</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">cell</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">true</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
        <drilldown>
          <set token="tokComponent">$row.component$</set>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        Clicked Component Name is: <input type="text" id="myHtmlTextBox" disabled="disabled"/>
      </html>
    </panel>
  </row>
</dashboard>

Required JavaScript pass_token_to_html_text_box.js to be placed under Splunk App's appserver/static folder which is typically, $SPLUNK_HOME/etc/apps/<YourSplunkAppName>/appserver/static. If the folder appserver/static does not exist your would need to create one. Also since this is Static file related change, you may need to refresh/restart/bump your Splunk instance for the changes in JavaScript to reflect. You may also need to clear your browser history. Refer to Splunk Dev site for Splunk JS stack token change handler: http://dev.splunk.com/view/webframework-developapps/SP-CAAAEW4
Following is the JavaScript File: pass_token_to_html_text_box.js

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function($,mvc){
    var defaultTokenModel = mvc.Components.get("default");
    defaultTokenModel.on("change:tokComponent", function(newToken, tokComponent, options) {
        console.log("tokComponent: ",tokComponent);
        if (tokComponent !== "undefined" && tokComponent !== "$row.component$") {
            $('#myHtmlTextBox').val(tokComponent);
        }
    }); 
});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

jadengoho
Builder

I get the answer now,
the Table drilldown does have a properties of clickable too , when using javascript to it.
so what did i do is

$('#NAME_OF TABLE').on("click", function (){ // When TABLE DRILLDOWN

                     });
0 Karma

niketn
Legend

You should be able to drilldown from table created in Splunk without using JavaScript. Directly by Table Drilldown. Refer to documentation: http://docs.splunk.com/Documentation/Splunk/latest/Viz/DrilldownIntro

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

493669
Super Champion

instead of html tag you can use xml for text input just you need to replace <dashboard> tag by <form> tag
Try below run anywhere search:

   <form>
      <label>HTML</label>
      <row>
        <panel>
          <table>
            <search>
              <query>index=_internal
    | stats count by sourcetype</query>
              <earliest>-15m</earliest>
              <latest>now</latest>
              <sampleRatio>1</sampleRatio>
            </search>
            <option name="count">20</option>
            <option name="dataOverlayMode">none</option>
            <option name="drilldown">row</option>
            <option name="percentagesRow">false</option>
            <option name="rowNumbers">false</option>
            <option name="totalsRow">false</option>
            <option name="wrap">true</option>
            <drilldown>
                <!--set token="operationOrURI">$row.sourcetype$</set-->
                <set token="sourcetype">$click.value$</set>
             </drilldown>
          </table>
        </panel>
        <panel>
           <title>$sourcetype$</title>
          <input type="text" id="textbox_id"/> 
          </panel>
      </row>
    </form>

although you can use tag also.
Let me know if it helps..

0 Karma

jadengoho
Builder

Thanks for the answer , but i need the HTML input textbox , cause it is more flexible to use and there are more properties that HTML can be used 🙂

0 Karma

493669
Super Champion

then simply add tag like-

<html> <input type="text" id="textbox_id"/>  </html>
0 Karma
Get Updates on the Splunk Community!

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...