topic Re: How can I create a button switcher? in Dashboards & Visualizations

How can I create a button switcher?

khanlarloo — Sat, 07 Oct 2017 10:49:27 GMT

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

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

tanck you

Re: How can I create a button switcher?

rjthibod — Sat, 07 Oct 2017 10:58:18 GMT

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/

Re: How can I create a button switcher?

khanlarloo — Sat, 07 Oct 2017 11:34:54 GMT

i try this from advanced splunk book chapter Button switcher .

Re: How can I create a button switcher?

rjthibod — Sat, 07 Oct 2017 12:07:59 GMT

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:

Install the Developer Gadgets App for Splunk
Go to the App
Click "Dashboards" from navigation menu
Click "Create New Dashboard", fill out whatever details you want
On the new dashboard, click "Edit Source" and copy the following SimpleXML into the source editor
Once the page loads, click the "Gadgets" feature in the bottom right corner
Click the "Enable Debug" checkbox, you should see a token debugger pop up on the bottom of the dashboard
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>

Re: How can I create a button switcher?

khanlarloo — Sun, 08 Oct 2017 04:24:47 GMT

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+dashboard&source=bl&ots=vPq8A_-6pi&sig=B25-yRre6fiRlXy_p7taG0jtfbA&hl=en&sa=X&ved=0ahUKEwiEwPTBqN7WAhWL8CYKHRkGCTEQ6AEIdDAI

i will do your suggest.

Re: How can I create a button switcher?

khanlarloo — Sun, 08 Oct 2017 10:44:27 GMT

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

Re: How can I create a button switcher?

rjthibod — Sun, 08 Oct 2017 11:18:36 GMT

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

Re: How can I create a button switcher?

niketn — Sun, 08 Oct 2017 18:55:51 GMT

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

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>

Re: How can I create a button switcher?

khanlarloo — Mon, 09 Oct 2017 05:03:35 GMT

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.

Re: How can I create a button switcher?

niketn — Mon, 09 Oct 2017 08:01:23 GMT

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">

Re: How can I create a button switcher?

khanlarloo — Tue, 10 Oct 2017 06:33:47 GMT

Thanks alot , i do and worked
thanx for your help

Re: How can I create a button switcher?

niketn — Tue, 10 Oct 2017 06:40:29 GMT

@khanlarloo, please accept the answer and up vote comments that helped.

Re: How can I create a button switcher?

khanlarloo — Tue, 10 Oct 2017 07:11:41 GMT

is it possible to hide show panel when hidden panel is shown?

Re: How can I create a button switcher?

niketn — Tue, 10 Oct 2017 09:11:53 GMT

😄 @khanlarloo, I think you missed the final few lines of my answer. You can use <rejects> attribute to create the Toggle between Hide and Show buttons. Please refer to the PS: section towards the end of my answer. Let me know if further detail is required.

Re: How can I create a button switcher?

khanlarloo — Tue, 10 Oct 2017 09:20:53 GMT

i do this but it just hide the show button when click on it
it shows (show button ) like this

show_details : true
but shows both of them, and dosent hide the show pannel

Re: How can I create a button switcher?

niketn — Tue, 10 Oct 2017 09:33:11 GMT

Sorry I missed the question. If you want to hide the <panel> with Show button, <rejects> should be added to panel and not button:

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

Hopefully the concept is clear.

Re: How can I create a button switcher?

khanlarloo — Tue, 10 Oct 2017 10:06:21 GMT

thanks for helping me .I did it and it worked.

Re: How can I create a button switcher?

niketn — Wed, 11 Oct 2017 01:10:00 GMT

@khanlarloo, Yay! Glad it worked. You can up vote if it helped.

Re: How can I create a button switcher?

cardinalga — Thu, 04 Jan 2018 13:52:33 GMT

Many thanks for this great example !

Re: How can I create a button switcher?

mrccasi — Wed, 26 Jun 2019 06:43:07 GMT

Hi @niketnilay , do happen to know a js code that reset filters to its default value when hitting the Reset button? Thank you.