Dashboards & Visualizations
Highlighted

How can I create a button switcher?

Explorer

hi
i want to create a button switcher here is my code in xml format:

alt text

but it dosent work, can you help me to know what is my problem

tanck you

0 Karma
Highlighted

Re: How can I create a button switcher?

Champion

I am pretty confident what you want to do is not possible using a button without writing JavaScript. To my knowledge, the HTML properties data-set-token and data-unset-token are not supported by Splunk.

If you can use another input, you could use a checkbox or radio toggle to implement the token logic.

If you must use buttons, then you will have to implement the clicking logic in a JavaScript extension to the dashboard. Examples to start with are here: https://answers.splunk.com/answers/563964/i-have-4-buttons-with-different-tokens-if-i-click.html or (my own) https://blog.octoinsight.com/there-can-be-only-one-submit-button/

0 Karma
Highlighted

Re: How can I create a button switcher?

Explorer

i try this from advanced splunk book chapter Button switcher .
alt text

0 Karma
Highlighted

Re: How can I create a button switcher?

Champion

First, please use the "Add Comment" section to reply to an answer instead of adding an answer. It makes it harder to differentiate threads.

To your question, I don't have the book so I can't speak to all the details, but I can pretty confidently say it won't work without JavaScript.

I did test it myself. I recommend you download my Developer Gadgets App for Splunk (https://splunkbase.splunk.com/app/3689/) and use the token debugger feature to inspect it. In my testing, the token show_details never gets set using just the SimpleXML you posted.

Here are the steps:

  1. Install the Developer Gadgets App for Splunk
  2. Go to the App
  3. Click "Dashboards" from navigation menu
  4. Click "Create New Dashboard", fill out whatever details you want
  5. On the new dashboard, click "Edit Source" and copy the following SimpleXML into the source editor
  6. Once the page loads, click the "Gadgets" feature in the bottom right corner
  7. Click the "Enable Debug" checkbox, you should see a token debugger pop up on the bottom of the dashboard
  8. Click you Show Details button and notice that the token does not appear in the token debugger

Test SimpleXML

<form script="developer_gadgets:load.js">
      <label>Demo Clone</label>
      <fieldset autoRun="true" submitButton="false">
      </fieldset>
      <row>
        <panel>
          <title>Test</title>
          <html>
            <button class="btn" data-set-token="show_details" data-value="true">Show Details</button>
          </html>
        </panel>
      </row>
    </form>
0 Karma
Highlighted

Re: How can I create a button switcher?

Explorer

sorry,thanks for your reply.
here is the link of this book in google website

https://books.google.com/books?id=dv9vDQAAQBAJ&pg=PA233&lpg=PA233&dq=buttons+switcher+on+splunk+dash...

i will do your suggest.

0 Karma
Highlighted

Re: How can I create a button switcher?

Explorer

is it possible to tell me where should i put the Javascript and CSS file for my dashboard?

0 Karma
Highlighted

Re: How can I create a button switcher?

Champion

Usually, you put the JavaScript and CSS files loaded by a dashboard in the folder appserver/static that is contained in the app folder for the app that the contains your dashboard. For example, if your app's folder is cool_dashboards, you would put the CSS and JavaScript loaded by the dashboard in the path: cool_dashboards/appserver/static.

More details are here: http://dev.splunk.com/view/webframework-developapps/SP-CAAAE4A

One thing the link is missing is what to do when you first install the JS/CSS files. The first time you load the files, you should restart Splunk in order for Splunk to find the files. After that, any time you change the JS/CSS files for the app, you need to tell Splunk to dump its cache using what's called a bump. You bump Splunk by going to http://<YOUR_SPLUNK_SERVER_WEB_ADDRESS_AND PORT>/en_US/_bump and clicking the button on that page. More info here: https://docs.splunk.com/Documentation/Splunk/latest/AdvancedDev/CustomizationOptions

0 Karma
Highlighted

Re: How can I create a button switcher?

Legend

@khanlarloo, as stated by @rjthibod, the example that you are trying to implement is not a valid working example. You would need to use JavaScript to code click() events of Show and Hide buttons to set and unset required token using jQuery and Splunk JS Stack.

alt text

Following is a run anywhere example with require Dashboard Simple XML and JavaScript code. PS: I have give Show and Hide HTML buttons ids showButton and hideButton respectively to easily access through jQuery selector based on ids. You can create specific classes if you want to apply something similar on several buttons.

<dashboard script="button_click.js">
  <label>Button Switcher Example</label>
  <row>
    <panel>
      <title>Example to Show or Hide Details Panel based on respective Button Clicks</title>
      <html>
        show_details : $show_details$
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <button id="showButton" class="btn">Show</button>
      </html>
      <chart>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count by log_level</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="charting.chart">column</option>
        <option name="charting.drilldown">none</option>
        <option name="refresh.display">progressbar</option>
      </chart>
    </panel>
    <panel depends="$show_details$">
      <html>
        <button id="hideButton" class="btn">Hide</button>        
      </html>
      <table>
        <search>
          <query>index=_internal sourcetype=splunkd log_level!=INFO
| timechart count by log_level</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="count">5</option>
      </table>
    </panel>
  </row>
</dashboard>

And place the JavaScript button_click.js under your Splunk App's static folder i.e. $SPLUNK_HOME$/etc/apps/<YourAppName>/appserver/static:

require([
    "splunkjs/mvc",
    "splunkjs/mvc/simplexml/ready!"
], function(
            mvc
            ) {
        var defaultTokenModel = mvc.Components.get("default");
        var submittedTokenModel = mvc.Components.get("submitted");
        $("#showButton").click(function(){
            defaultTokenModel.set("show_details","true"); 
            submittedTokenModel.set("show_details","true"); 
        });
        $("#hideButton").click(function(){
            defaultTokenModel.unset("show_details");
            submittedTokenModel.unset("show_details"); 
        });
});

PS: Since this requires static file i.e. button_click.js, you might need to restart/refresh/bump Splunk and also clear internet browser cache for the changes to reflect.

If you also want to hide the Show button, when the Details panel is displayed and toggle back to show when Hide button in Details panel is clicked then you can add rejects attribute for the html panel containing Show button i.e.,

  <html rejects="$show_details$">
    <button id="showButton" class="btn">Show</button>
  </html>



| eval message="Happy Splunking!!!"


View solution in original post

Highlighted

Re: How can I create a button switcher?

Explorer

Thank You for your Reply

I create my dashboard in this path http://Splunk IP Address:Port/en-US/app/search/time_picker
and put .js file in this path /opt/splunk/etc/apps/search/appserver/static
But it dosent show any thing.

0 Karma
Highlighted

Re: How can I create a button switcher?

Legend

Paths seem correct.

Have you restarted or refreshed Splunk for the JavaScript to be picked? You might also need to clear Internet browser history for changes to reflect.

If still it does not work, you would need to put debug lines in your JavaScript like

alert("YourDebugMsgForPopUp");

Or to ensure that JavaScript is being loaded in Dashboard.

console.log("YourDebugMsgForConsole");

Please also ensure that your dashboard root node refers to the JavaScript file using :

 <dashboard script="button_click.js">



| eval message="Happy Splunking!!!"