Dashboards & Visualizations

create button similar to export button in dashboard

ips_mandar
Builder

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');
     };
 });
0 Karma
1 Solution

vnravikumar
Champion

Hi

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); 
});

View solution in original post

vnravikumar
Champion

Hi

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); 
});

vnravikumar
Champion

Hi

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();
            }
        });
});
0 Karma

ips_mandar
Builder

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.

0 Karma

vnravikumar
Champion

Hi

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();
            }
        });
});
0 Karma

ips_mandar
Builder

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

0 Karma

vnravikumar
Champion

Hi

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();
            }
        });
});
0 Karma

vnravikumar
Champion

Please let me know if there are any issues.

0 Karma

ips_mandar
Builder

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

0 Karma

vnravikumar
Champion

Have you done _bump?

0 Karma

ips_mandar
Builder

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.

0 Karma

ips_mandar
Builder

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.

0 Karma

ips_mandar
Builder

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

0 Karma

vnravikumar
Champion

How you had tried?

0 Karma

ips_mandar
Builder

@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

0 Karma

vnravikumar
Champion

Hi

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();
            }
        });
});

ips_mandar
Builder

thank you so much. it is working now.

0 Karma

ips_mandar
Builder

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

0 Karma

ips_mandar
Builder

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

0 Karma

ips_mandar
Builder

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

0 Karma

ips_mandar
Builder

any pointers on this splunkers!

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...