All Apps and Add-ons

jquery code to manipulate the initial value of a Dropdown token and displays in the title once the dashboard loads.

anyioneta
New Member

The JavaScript Code is not working for me. I want the token new_product_name to display the initial content of the dropdown product_name each time the page loads as well as anytime the dropdown is changed. Can anybody assist?

0 Karma
1 Solution

niketn
Legend

@anyioneta, your screenshots for Simple XML and Javascript seems to be off with the token name.

To initialize a token in Splunk Enterprise 6.5 onward you can use <init> section in Simple XML. You would need set the new token value to both default and submitted token models. Please try out and confirm. Since this involves static JavaScript file make sure Splunk is refreshed/bumped/restarted after the changes to JavaScript file and also browser history is cleared if required.

Following is the Simple XML dashboard code:

<form script="myQNs.js">
  <label>Dropdown Value Set using SplunkJS</label>
  <init>
    <set token="new_product_name">All Selected</set>
  </init>
  <fieldset submitButton="false">
    <input type="dropdown" token="product_name" searchWhenChanged="true">
      <label>Product Name</label>
      <choice value="*">All</choice>
      <choice value="Nokia">Nokia</choice>
      <choice value="Samsung">Samsung</choice>
      <choice value="Apple">Apple</choice>
      <choice value="Dell">Dell</choice>
      <initialValue>*</initialValue>
      <default>*</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <html>
        new_product_name="$new_product_name$"
      </html>
    </panel>
  </row>
</form>

Following is the corresponding JavaScript myQNs.js:

 require([
     "splunkjs/mvc",
     "splunkjs/mvc/simplexml/ready!"
 ], function(
             mvc
             ) {
    var defaultTokenModel = mvc.Components.get("default");
    var submittedTokenModel = mvc.Components.get("submitted");
    defaultTokenModel.on("change:product_name", function(newValue) {
        var new_product_name=defaultTokenModel.get("product_name");
        switch(new_product_name){
            case "*":
                defaultTokenModel.set("new_product_name", "All Selected");
                submittedTokenModel.set("new_product_name", "All Selected");
                break;
            default:
                new_product_name=new_product_name+" Selected";
                defaultTokenModel.set("new_product_name", new_product_name);
                submittedTokenModel.set("new_product_name", new_product_name);
        }
    });
 });

PS: In case your JavaScript does not seem to be working you should add alert() and console.log() statements in your JavaScript to debug the code behavior.

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

View solution in original post

0 Karma

niketn
Legend

@anyioneta, your screenshots for Simple XML and Javascript seems to be off with the token name.

To initialize a token in Splunk Enterprise 6.5 onward you can use <init> section in Simple XML. You would need set the new token value to both default and submitted token models. Please try out and confirm. Since this involves static JavaScript file make sure Splunk is refreshed/bumped/restarted after the changes to JavaScript file and also browser history is cleared if required.

Following is the Simple XML dashboard code:

<form script="myQNs.js">
  <label>Dropdown Value Set using SplunkJS</label>
  <init>
    <set token="new_product_name">All Selected</set>
  </init>
  <fieldset submitButton="false">
    <input type="dropdown" token="product_name" searchWhenChanged="true">
      <label>Product Name</label>
      <choice value="*">All</choice>
      <choice value="Nokia">Nokia</choice>
      <choice value="Samsung">Samsung</choice>
      <choice value="Apple">Apple</choice>
      <choice value="Dell">Dell</choice>
      <initialValue>*</initialValue>
      <default>*</default>
    </input>
  </fieldset>
  <row>
    <panel>
      <html>
        new_product_name="$new_product_name$"
      </html>
    </panel>
  </row>
</form>

Following is the corresponding JavaScript myQNs.js:

 require([
     "splunkjs/mvc",
     "splunkjs/mvc/simplexml/ready!"
 ], function(
             mvc
             ) {
    var defaultTokenModel = mvc.Components.get("default");
    var submittedTokenModel = mvc.Components.get("submitted");
    defaultTokenModel.on("change:product_name", function(newValue) {
        var new_product_name=defaultTokenModel.get("product_name");
        switch(new_product_name){
            case "*":
                defaultTokenModel.set("new_product_name", "All Selected");
                submittedTokenModel.set("new_product_name", "All Selected");
                break;
            default:
                new_product_name=new_product_name+" Selected";
                defaultTokenModel.set("new_product_name", new_product_name);
                submittedTokenModel.set("new_product_name", new_product_name);
        }
    });
 });

PS: In case your JavaScript does not seem to be working you should add alert() and console.log() statements in your JavaScript to debug the code behavior.

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

493669
Super Champion

Hi @niketnilay,
when I select any value other than All in dropdown and refresh the dashboard then it will give token as All selected as here <init> token gives this value...

0 Karma

anyioneta
New Member

Thanks bro

0 Karma

493669
Super Champion

Hi @anyioneta,
Try this run anywhere search without use of js:

<form>
  <label>Dropdown</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="sourcetype" searchWhenChanged="true">
      <label>MyQn</label>
      <default>*</default>
      <choice value="*">All</choice>
      <choice value="Nokia">Nokia</choice>
      <choice value="Samsung">Samsung</choice>
      <choice value="Apple">Apple</choice>
      <choice value="Del">Del</choice>
      <change>
        <condition label="All">
          <set token="new_product_name">All selected</set>
       </condition>
        <condition label="Nokia">
          <set token="new_product_name">Nokia</set>
       </condition>
        <condition label="Samsung">
          <set token="new_product_name">Samsung</set>
         </condition>
        <condition label="Apple">
          <set token="new_product_name">Apple</set>
        </condition>
        <condition label="Del">
          <set token="new_product_name">Del</set>
        </condition>
      </change>
    </input>
    </fieldset>
  <row>
    <panel>
      <title>  token=$new_product_name$ </title>
      <html></html>
    </panel>
  </row>
</form>

So in <change> tag you add set required token value.
also add searchWhenChanged="true" in input tag

0 Karma

anyioneta
New Member

Thanks, this works. But is there any way I can achieve this using Javascript?

0 Karma

493669
Super Champion

yes, you can achieve this using js but it's better to use xml whenever possible..

0 Karma

anyioneta
New Member

Could you help me out with the .js code as well?

I tried this but it did not work.

defaultTokenModel.on("change:product_name document:ready", function() { //My code }

0 Karma

493669
Super Champion

@niketnilay already provided js code

0 Karma
Get Updates on the Splunk Community!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...