Dashboards & Visualizations
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

create button similar to export button in dashboard

ips_mandar
Builder
‎04-28-2020 10:46 AM

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
Reply
1 Solution
Solved! Jump to solution
Solution

vnravikumar
Champion
‎04-28-2020 09:54 PM

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

Reply
Solved! Jump to solution
Solution

vnravikumar
Champion
‎04-28-2020 09:54 PM

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); 
});
Reply
Solved! Jump to solution

vnravikumar
Champion
‎04-28-2020 10:57 PM

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
Reply
Solved! Jump to solution

ips_mandar
Builder
‎04-28-2020 11:26 PM

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
Reply
Solved! Jump to solution

vnravikumar
Champion
‎04-28-2020 11:47 PM

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
Reply
Solved! Jump to solution

ips_mandar
Builder
‎04-29-2020 12:11 AM

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

0 Karma
Reply
Solved! Jump to solution

vnravikumar
Champion
‎04-29-2020 12:18 AM

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
Reply
Solved! Jump to solution

vnravikumar
Champion
‎04-29-2020 12:28 AM

Please let me know if there are any issues.

0 Karma
Reply
Solved! Jump to solution

ips_mandar
Builder
‎04-29-2020 12:36 AM

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

0 Karma
Reply
Solved! Jump to solution

vnravikumar
Champion
‎04-29-2020 12:41 AM

Have you done _bump?

0 Karma
Reply
Solved! Jump to solution

ips_mandar
Builder
‎04-29-2020 12:49 AM

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
Reply
Solved! Jump to solution

ips_mandar
Builder
‎04-29-2020 01:00 AM

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
Reply
Solved! Jump to solution

ips_mandar
Builder
‎04-29-2020 04:03 AM

@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
Reply
Solved! Jump to solution

vnravikumar
Champion
‎04-29-2020 04:39 AM

How you had tried?

0 Karma
Reply
Solved! Jump to solution

ips_mandar
Builder
‎04-29-2020 05:29 AM

@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
Reply
Solved! Jump to solution

vnravikumar
Champion
‎04-29-2020 06:35 AM

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();
            }
        });
});
Reply
Solved! Jump to solution

ips_mandar
Builder
‎04-29-2020 08:39 AM

thank you so much. it is working now.

0 Karma
Reply
Solved! Jump to solution

ips_mandar
Builder
‎04-29-2020 06:34 AM

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

0 Karma
Reply
Solved! Jump to solution

ips_mandar
Builder
‎04-29-2020 12:15 AM

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

0 Karma
Reply
Solved! Jump to solution

ips_mandar
Builder
‎04-29-2020 12:20 AM

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
Reply
Solved! Jump to solution

ips_mandar
Builder
‎04-28-2020 07:42 PM

any pointers on this splunkers!

0 Karma
Reply
Get Updates on the Splunk Community!

Webinar Recap | Revolutionizing IT Operations: The Transformative Power of AI and ML ...

The Transformative Power of AI and ML in Enhancing Observability   In the realm of IT operations, the ...

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

ICYMI - Check out the latest releases of Splunk Edge Processor

Splunk is pleased to announce the latest enhancements to Splunk Edge Processor.  HEC Receiver authorization ...