topic Re: create button similar to export button in dashboard in Dashboards & Visualizations

create button similar to export button in dashboard

ips_mandar — Tue, 28 Apr 2020 17:46:17 GMT

Hi,
I want to create button similar to export button which will provide diiferent options on click of button .
with help of @niketnilay answer I am able to use below code but now I want collection of option in one button like export button-

require([
  'underscore',
  'jquery',
  'splunkjs/mvc',
  'splunkjs/mvc/simplexml/ready!'], function (_, $, mvc) {
     var objEditMenu=$("div.dashboard-header-editmenu");
     if (objEditMenu!==undefined){
         $('<a target="_blank" class="btn edit-btn anchor-right" style="float: right;margin-right: 10px;" href="https://google.com">Google</a>').insertAfter('div.dashboard-header-editmenu');
     };
 });

Re: create button similar to export button in dashboard

ips_mandar — Wed, 29 Apr 2020 02:42:25 GMT

any pointers on this splunkers!

Re: create button similar to export button in dashboard

vnravikumar — Wed, 29 Apr 2020 04:54:12 GMT

This will create a new button, let me know whether it has to display list of option in menu view

<dashboard script="button.js">
  <label>button</label>
   <row>
    <panel>
      <table>
        <search>
          <query>index="_internal" |stats count by sourcetype</query>
          <earliest>-24h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="drilldown">none</option>
      </table>
    </panel>
  </row>
</dashboard>

javascript:

require(["jquery", "splunkjs/mvc", "splunkjs/mvc/simplexml/ready!"], function($, mvc) {

    var r=$('<input/>').attr({
                      type: "button",
                      id: "field",
                      value: 'New Button',
                      class:'btn'
                  });

$("div[data-view='views/dashboard/header/ExportMenu']").append(r); 
});

Re: create button similar to export button in dashboard

vnravikumar — Wed, 29 Apr 2020 05:57:07 GMT

Check this, a little bit tweak required

<dashboard script="button.js">
  <label>button</label>
  <row id="temp">
    <html>
      <div data-popdown-role="dialog" class="dropdown-menu export-menu shared-poptart open" id="newmenu" style="display: none; top: -10px; left: 93%; margin-left: -189px; bottom: auto;">                
        <div class="arrow" style="margin-left: 40px;"/>                            
            <ul class="first-group">                                            
                <li>
            <a href="#" class="">Option1</a>
          </li>                                                                                            
                <li>
            <a href="#" class="">Option2</a>
          </li>                                                                
                <li>
            <a href="#" class="">Option3</a>
          </li>                
            </ul>            
      </div>
    </html>
  </row>
</dashboard>

javascript:

require([
"jquery", 
"splunkjs/mvc", 
"splunkjs/mvc/simplexml/ready!"], function($, mvc) {

    var temp='<a class="btn" href="#" id="newbtn" >New Button <span class="caret"></span></a>'                  
    $("div[data-view='views/dashboard/header/ExportMenu']").append(temp); 
        $("#newbtn").click(function() { 
        var div = document.getElementById('newmenu');
            if (div.style.display !== 'none') {
                div.style.display = 'none';
            }
            else {
                div.style.display = 'block';
            }
        });             
        $(document).mouseup(function (e){
            var container = $("#newmenu");
            if (!container.is(e.target) && container.has(e.target).length === 0){
                container.fadeOut();
            }
        });
});

Re: create button similar to export button in dashboard

ips_mandar — Wed, 29 Apr 2020 06:26:52 GMT

Thanks @vnravikumar this is what I was looking for .
One thing I required is this new button position on to left of edit button, can this be done?
Thanks.

Re: create button similar to export button in dashboard

vnravikumar — Wed, 29 Apr 2020 06:47:59 GMT

Try this, please modify accordingly

<dashboard script="button.js">
  <label>button</label>
  <row id="temp">
    <html>
      <div data-popdown-role="dialog" class="dropdown-menu export-menu shared-poptart open" id="newmenu" style="display: none; top: -10px; left: 83%; margin-left: -189px; bottom: auto;">                
        <div class="arrow" style="margin-left: 40px;"/>                            
            <ul class="first-group">                                            
                <li>
            <a href="#" class="">Option1</a>
          </li>                                                                                            
                <li>
            <a href="#" class="">Option2</a>
          </li>                                                                
                <li>
            <a href="#" class="">Option3</a>
          </li>                
            </ul>            
      </div>
    </html>
  </row>
</dashboard>

javascript:

require([
"jquery", 
"splunkjs/mvc", 
"splunkjs/mvc/simplexml/ready!"], function($, mvc) {

    var temp='<a class="btn" href="#" id="newbtn" >New Button <span class="caret"></span></a>'                  
    $("div[data-view='views/dashboard/header/EditMenu']").prepend(temp); 
        $("#newbtn").click(function() { 
        var div = document.getElementById('newmenu');
            if (div.style.display !== 'none') {
                div.style.display = 'none';
            }
            else {
                div.style.display = 'block';
            }
        });             
        $(document).mouseup(function (e){
            var container = $("#newmenu");
            if (!container.is(e.target) && container.has(e.target).length === 0){
                container.fadeOut();
            }
        });
});

Re: create button similar to export button in dashboard

ips_mandar — Wed, 29 Apr 2020 07:11:23 GMT

thanks @vnravikumar. also I observed it is creating one blank panel at top how can I get rid of it?

Re: create button similar to export button in dashboard

ips_mandar — Wed, 29 Apr 2020 07:15:22 GMT

using display:none I am able to hide that panel.
Thanks again.

Re: create button similar to export button in dashboard

vnravikumar — Wed, 29 Apr 2020 07:18:41 GMT

Give a try with following js

require([
"jquery", 
"splunkjs/mvc", 
"splunkjs/mvc/simplexml/ready!"], function($, mvc) {
            $( "#newmenu" ).parent().removeClass("panel-body html");     
    var temp='<a class="btn" href="#" id="newbtn" >New Button <span class="caret"></span></a>'                  
    $("div[data-view='views/dashboard/header/EditMenu']").prepend(temp); 
        $("#newbtn").click(function() { 
        var div = document.getElementById('newmenu');
            if (div.style.display !== 'none') {
                div.style.display = 'none';
            }
            else {
                div.style.display = 'block';
            }
        });             
        $(document).mouseup(function (e){
            var container = $("#newmenu");
            if (!container.is(e.target) && container.has(e.target).length === 0){
                container.fadeOut();
            }
        });
});

Re: create button similar to export button in dashboard

ips_mandar — Wed, 29 Apr 2020 07:20:29 GMT

oops but after hiding panel all options in dropdown are also get hidden...can you please help me to hide extra panel. @vnravikumar

Re: create button similar to export button in dashboard

vnravikumar — Wed, 29 Apr 2020 07:28:58 GMT

Please let me know if there are any issues.

Re: create button similar to export button in dashboard

ips_mandar — Wed, 29 Apr 2020 07:36:41 GMT

I tried above js but still I am seeing one blank panel at top.

Re: create button similar to export button in dashboard

vnravikumar — Wed, 29 Apr 2020 07:41:11 GMT

Have you done _bump?

Re: create button similar to export button in dashboard

ips_mandar — Wed, 29 Apr 2020 07:49:55 GMT

Yes I did ...its strang that on sample dashboards it is working where no inputs and base search is present but when when I move this js to actual dashboard where inputs and base search is present it is not working.

Re: create button similar to export button in dashboard

ips_mandar — Wed, 29 Apr 2020 08:00:46 GMT

It seems due one of my css it is not able to get removed I am checking which is overriding it. Thanks I will update here.

Re: create button similar to export button in dashboard

ips_mandar — Wed, 29 Apr 2020 11:03:46 GMT

@vnravikumar I am able to resolve issue thank you . but now I am seeing that in Url I am using token value but it is not getting updated in links. although token is updated but in url it won't taking any effect. Pleas help how I can resolve this issue?

Re: create button similar to export button in dashboard

vnravikumar — Wed, 29 Apr 2020 11:39:04 GMT

How you had tried?

Re: create button similar to export button in dashboard

ips_mandar — Wed, 29 Apr 2020 12:29:11 GMT

@vnravikumar I created below sample dashboard to explain my issue better-

<form script="button.js" theme="dark">
  <label>Button testing</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="selected_agent" searchWhenChanged="true">
      <label>Select Agent</label>

      <choice value="*">ALL</choice>
      <choice value="test1">test1</choice>
      <choice value="test2">test2</choice>
      <!--change>
        <condition>
          <unset token="errortype"></unset>
        </condition>
      </change-->
    </input>
  </fieldset>
  <row id="temp">
    <panel>
      <html>
       <div data-popdown-role="dialog" class="dropdown-menu export-menu shared-poptart open" id="newmenu" style="display: none; top: -10px; left: 82%; margin-left: -181px; bottom: auto;">                
           <div class="arrow" style="margin-left: 40px;"/>                            
               <ul class="first-group">                                            
                   <li>
             <a href="/app/search/test_report?form.selected_agent=$selected_agent$" class="">Option1</a>
           </li>                                                                                            
                   <li>
             <a href="#" class="">Option2</a>
           </li>                                                                
                   <li>
             <a href="#" class="">Option3</a>
           </li>                
               </ul>            
       </div>
     </html>
    </panel>
  </row>
  <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">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</form>

Here when I change agent dropdown token $selected_agenct$ value is get updated but in url it won't show token value. I want to move to new dashboard with token set as per old dashboard. but in link it is not working.
Please help me to resolve this issue.
Thanks

Re: create button similar to export button in dashboard

ips_mandar — Wed, 29 Apr 2020 13:34:04 GMT

@vnravikumar any idea how can I resolve this token not updating in url issue?
thanks for so much help.

Re: create button similar to export button in dashboard

vnravikumar — Wed, 29 Apr 2020 13:35:50 GMT

Check this

<form script="button.js" theme="dark">
  <label>Button testing</label>
  <fieldset submitButton="false">
    <input type="dropdown" token="selected_agent" searchWhenChanged="true">
      <label>Select Agent</label>
      <choice value="*">ALL</choice>
      <choice value="test1">test1</choice>
      <choice value="test2">test2</choice>
      <!--change>
         <condition>
           <unset token="errortype"></unset>
         </condition>
       </change-->
    </input>
  </fieldset>
  <row id="temp">
    <panel>
      <html>
           <div class="dropdown-menu export-menu shared-poptart open"   id="newmenu" style="display: none; top: -95px; left: 83%; margin-left: -189px; bottom: auto;">                 
            <div class="arrow" style="margin-left: 40px;"/>                            
                <ul class="first-group">                                            
                    <li>
              <a href="/app/search/test_report?form.selected_agent=$form.selected_agent$" class="">Option1</a>
            </li>                                                                                            
                    <li>
              <a href="#" class="">Option2</a>
            </li>                                                                
                    <li>
              <a href="#" class="">Option3</a>
            </li>                
                </ul>            
        </div>
      </html>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <title>$form.selected_agent$</title>
        <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">none</option>
        <option name="percentagesRow">false</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</form>

javascript:

require([
"jquery", 
"splunkjs/mvc", 
"splunkjs/mvc/simplexml/ready!"], function($, mvc) {
    $( "#newmenu" ).parent().attr('style','background-color: #3c444d');  
    var temp='<a class="btn" href="#" id="newbtn" >New Button <span class="caret"></span></a>'                  
    $("div[data-view='views/dashboard/header/EditMenu']").prepend(temp); 
        $("#newbtn").click(function() { 
        var div = document.getElementById('newmenu');
            if (div.style.display !== 'none') {
                div.style.display = 'none';
            }
            else {
                div.style.display = 'block';
            }
        });             
        $(document).mouseup(function (e){
            var container = $("#newmenu");
            if (!container.is(e.target) && container.has(e.target).length === 0){
                container.fadeOut();
            }
        });
});