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!

Stay Connected: Your Guide to May Tech Talks, Office Hours, and Webinars!

Take a look below to explore our upcoming Community Office Hours, Tech Talks, and Webinars this month. This ...

They're back! Join the SplunkTrust and MVP at .conf24

With our highly anticipated annual conference, .conf, comes the fez-wearers you can trust! The SplunkTrust, as ...

Enterprise Security Content Update (ESCU) | New Releases

Last month, the Splunk Threat Research Team had two releases of new security content via the Enterprise ...