Dashboards & Visualizations

How to reload a single panel with javascript?

pbalbasm
Path Finder

Hi all,
I'm developing a custom dashboard and it's required that when a button is clicked, the associated panel reloads
(only that panel, not the entire dashboard). Is there a way of doing it through javascript??

Thanks in advance.
Regards

Labels (1)
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@pbalbasm
Can you please try this?

  1. Assign id to your panels search. like id="my_search"
  2. Execute this statement on click of the button. mvc.Components.get("my_search").startSearch();

Thanks

View solution in original post

sdhiaeddine
Explorer

Hi @kamlesh_vaghela 

Did not work for me ☹️

 

My code is as below:

$("#submit_button").click(function($){
if(typeof submittedTokens.get("element") === 'undefined'){
mvc.Components.get("panel_id").startSearch();
}
});

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@sdhiaeddine 

Can you please share your sample code?

KV

0 Karma

sdhiaeddine
Explorer

This is the xml part

 

<form script="script.js" >
<label>App</label>
<row>
<panel>
<html depends="$hide$">
<style>
#submit_button{
width:80px !important;
}
#submit_button div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
width:80px !important;
}
#submit_button button{
padding: 6px 15px !important;
border-radius: 3px !important;
font-weight: 500 !important;
background-color: #5cc05c !important;
border: transparent !important;
color: #fff !important;
}
#submit_button button:hover{
background-color: #40a540 !important;
border-color: transparent !important;
}
</style>
</html>
....
<input type="link" id="submit_button">
<label></label>
<choice value="submit">Submit</choice>
</input>
</panel>
</row>
<row>
<panel id="panel_id">
<table>
<search>
<query>index=*
| stats latest(element) by value</query>
<earliest>$earliest$</earliest>
<latest>$latest$</latest>
</search>
<option name="refresh.display">progressbar</option>
</table>
</panel>
</row>
</form>

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@sdhiaeddine 

You should define id for search tag Not panel tag.

like.. 

<panel>
<table>
<search id="panel_id">

 

KV

sdhiaeddine
Explorer

@kamlesh_vaghelaThank you, it works now

0 Karma

AKG1_old1
Builder

Hi,

I am looking for the same.  I am not good at javascript. I have tried below but its not working

require([
"splunkjs/mvc",
"splunkjs/mvc/simplexml/ready!"
], function(
mvc
) {
mvc.Components.get("my_search").startSearch();
});

Can someone pls help.

 

Thanks

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@pbalbasm
Can you please try this?

  1. Assign id to your panels search. like id="my_search"
  2. Execute this statement on click of the button. mvc.Components.get("my_search").startSearch();

Thanks

pbalbasm
Path Finder

Hi, that totally work! Thank you.

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Great @pbalbasm. Can you please upvote and accept to close this question?

0 Karma

afranciiine
Engager

It works! Thank you very much!

0 Karma

DavidHourani
Super Champion

Hi @pbalbasm,

There's already a refresh button under every panel in Splunk. Is that what you are trying to recreate ?

0 Karma

pbalbasm
Path Finder

Yes, it's something similar what I need to do.

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