Dashboards & Visualizations

How to use an "input type=button" to reset a token in Simple XML?

AzJimbo
Path Finder

I've got a pie chart with a drilldown by pie slice, I'd like to add a button to the bottom of the panel that allows me to reset the token value to * .

I can get the button to present, and even react when I press it, but can't seem to find the syntax for changing the token value back to the default.
this is what I've got (there are two sample attempts there):

        <drilldown>
          <set token="app">$click.value$</set>
        </drilldown>
      </chart>
      <html>
        <center>$user$
        <p/>
 <input type="button" value="reset app token" searchWhenChanged="true">
    <set token="app">*</set>
         <default>*</default>
   </input>
&lt;br/&gt;
      Reset:<input type="button" token="app"  value="*" searchWhenChanged="true">
&lt;br/&gt;
      </input>
      </center>
      </html>

Any ideas?

1 Solution

jeffland
SplunkTrust
SplunkTrust

You're mixing Simple XML and HTML. What you should do is create a button in Simple XML and add the functionality in js, like so:

<form script="someJsCode.js">
  <label>_temp input button</label>
  <fieldset submitButton="false">
    <input type="text" token="app">
      <label>Input</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal | stats count by sourcetype</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">pie</option>
      </chart>
      <html>
         <center>
           <p>username</p>
           <button type="button" id="buttonId" class="btn">Reset</button>
         </center>
       </html>
    </panel>
  </row>
</form>

And in someJsCode.js you do something like

require([
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/simplexml/ready!'
    ], function ($, mvc) {
    var tokens = mvc.Components.get("default");
    $('#buttonId').on("click", function (e){
        tokens.set("form.app", "*");
    });
});

View solution in original post

jeffland
SplunkTrust
SplunkTrust

You're mixing Simple XML and HTML. What you should do is create a button in Simple XML and add the functionality in js, like so:

<form script="someJsCode.js">
  <label>_temp input button</label>
  <fieldset submitButton="false">
    <input type="text" token="app">
      <label>Input</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal | stats count by sourcetype</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">pie</option>
      </chart>
      <html>
         <center>
           <p>username</p>
           <button type="button" id="buttonId" class="btn">Reset</button>
         </center>
       </html>
    </panel>
  </row>
</form>

And in someJsCode.js you do something like

require([
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/simplexml/ready!'
    ], function ($, mvc) {
    var tokens = mvc.Components.get("default");
    $('#buttonId').on("click", function (e){
        tokens.set("form.app", "*");
    });
});

AzJimbo
Path Finder

Thank you! works exactly as intended in the search app. I truly appreciate the time and effort you spent putting this together. I think your answer will be viewed and used by many.

Any thoughts on my it won't work in my home made app? I haven't started troubleshooting this yet; I think there might be an underlying dependency I'm not aware of. Other splunk answers indicate if might be css? If someone could point me in the right direction on where to start looking...

jeffland, if you're coming to .conf this year, seek me out, I owe you a beer.

0 Karma

jeffland
SplunkTrust
SplunkTrust

You're welcome, glad I could help! Unfortunately I won't be at .conf this year, but I'll get back to your offer if we meet another year 🙂
CSS should not interfere with your js. If it works in the search app but not in another one, then I could imagine incorrect paths/filenames as the culprit. If the file system permissions are all right (which you pointed out above), then there is no reason for some js to work in search but not in another app - the only dependencies are those coordinated by requirejs. Oh, and you did restart splunk after creating the js file, right? That's also required.

0 Karma

AzJimbo
Path Finder

Thanks jeffland, but I can't seem to get this to work. I've placed the js in the [app]/appserver/static directory and changed the permissions & owner to match js in other apps. I've poked, prodded, tweaked and cajoled this seven ways from Sunday and can't seem to get it to change the token. Restarting splunk after each js mod. Perhaps I'm not that adept at troubleshooting the java script. Perhaps another set of eyes on this might see something I'm missing.
I tweaked the sample you provided to better illustrate what I'm working with (and renamed the js file):

<form script="resetappt,js">
   <label>_temp input button</label>
   <fieldset submitButton="false">
     <input type="text" token="app" searchWhenChanged="true">
       <default>*</default>
       <label>Input</label>
     </input>
   </fieldset>
   <row>
     <panel>
       <chart>
         <search>
           <query>index=_internal sourcetype=$app$ | stats count by sourcetype</query>
           <earliest>-15m</earliest>
           <latest>now</latest>
         </search>
         <option name="charting.chart">pie</option>
        <drilldown>
          <set token="app">$click.value$</set>
        </drilldown>

       </chart>
       <html>
          <center>
            <p>$app$</p>
            <button type="button" id="buttonId" class="btn">Reset</button>
          </center>
        </html>
     </panel>
   </row>
 </form>

the script info:
[root@doolin static]# pwd
/opt/splunk/etc/apps/test_app/appserver/static
[root@doolin static]# ls -la

-rw-r--r--. 1 splunk splunk 261 Feb 10 03:09 resetappt.js

[root@doolin static]# more resetappt.js

require([
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/simplexml/ready!'
    ], function ($, mvc) {
    var tokens = mvc.Components.get("default");
    $('#buttonId').on("click", function (e){
        tokens.set("form.app", "*");
    });
});

Sumpin in there isn't working. I appreciate your time and assistance.
[edit - I did notice the comma in the sample in the form tag and tried it both with the comma and a period]

0 Karma

jeffland
SplunkTrust
SplunkTrust

That comma was a typo, sorry. Corrected that.
Two things on this. First, as I just learned, when you use a token inside a <html> part of a Simple XML dashboard, that entire html content is rewritten any time the token changes. Thus, any event listener you had appended to elements of that html code are gone. Try the following, which is mostly your code from above (minus the typo in the js filename), only without a token reference in it and one other little change I'm going to explain later:

<form script="resetappt.js">
  <label>_temp input button</label>
  <fieldset submitButton="false">
    <input type="text" token="app" searchWhenChanged="true">
      <default>*</default>
      <label>Input</label>
    </input>
  </fieldset>
  <row>
    <panel>
      <chart>
        <search>
          <query>index=_internal sourcetype=$app$ | stats count by sourcetype</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">pie</option>
        <drilldown>
          <set token="form.app">$click.value$</set>
        </drilldown>
      </chart>
      <html>
        <center>
          <p>static text</p>
          <button type="button" id="buttonId" class="btn">Reset</button>
        </center>
      </html>
    </panel>
  </row>
</form>

This works wonderfully. If it doesn't, then there are other issues like possibly your browser cache. This code also incorporates another change, which is that the drilldown sets the token form.app instead of app. This is necessary because otherwise the input doesn't change when drilling down from the viz, and it messes with the button functionality as well (because code run on button click will only set the token if the new value is different than the old one, and if the drilldown sets app, then form.app won't change).
So now the question is how to avoid losing the on("click"... event of the button on change of the token which you want to use as a label above the button. There are basically two options: you can either separate the two html sections like this:

...
</drilldown>
        </chart>
        <html>
           <center>
            <p>$app$</p>
          </center>
        </html>
        <html>
          <center>
            <button type="button" id="buttonId" class="btn">Reset</button>
          </center>
        </html>
      </panel>
    </row>
  </form>

This will prevent losing the click event on the button when re-rendering the html of the label. Another way of doing this is to set the label in the head of the viz instead of in some custom html below the viz:

<panel>
  <chart>
    <title>Selected app: $app$</title>
    <search>
      <query>...

And the second option is to re-add the event listener to the button each time the html is rewritten. This could look something like this:

require([
        'jquery',
        'splunkjs/mvc',
        'splunkjs/mvc/simplexml/ready!'
    ], function ($, mvc) {
    var tokens = mvc.Components.get("default");
    tokens.on("change:app", function() {
        $('#buttonId').on("click", resetAppToken);
    });
    function resetAppToken(){
        tokens.set("form.app", "*");
    }
});

With this code, you can use the dashboard Simple XML including only one html section.
Personally, I'd go with showing the title in the head of the viz because that's where such info is usually found in splunk dashboards.

0 Karma

donfernandez
Explorer

does this work for multiple tokens?

0 Karma

AzJimbo
Path Finder

My challenge is that it doesn't work at all.

0 Karma

niketn
Legend

Button is not an input control available in Splunk. You either would need to use radio button with options yes/no or else drilldown event for the same pie slice twice to reset token. Please let me know if one of these may be possible option for you.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

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, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...