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!

Cloud Platform & Enterprise: Classic Dashboard Export Feature Deprecation

As of Splunk Cloud Platform 9.3.2408 and Splunk Enterprise 9.4, classic dashboard export features are now ...

Explore the Latest Educational Offerings from Splunk (November Releases)

At Splunk Education, we are committed to providing a robust learning experience for all users, regardless of ...

New This Month in Splunk Observability Cloud - Metrics Usage Analytics, Enhanced K8s ...

The latest enhancements across the Splunk Observability portfolio deliver greater flexibility, better data and ...