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!

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

Wednesday, May 29, 2024  |  11AM PST / 2PM ESTRegister now and join us to learn more about how you can ...

Get Your Exclusive Splunk Certified Cybersecurity Defense Engineer at Splunk .conf24 ...

We’re excited to announce a new Splunk certification exam being released at .conf24! If you’re headed to Vegas ...

Share Your Ideas & Meet the Lantern team at .Conf! Plus All of This Month’s New ...

Splunk Lantern is Splunk’s customer success center that provides advice from Splunk experts on valuable data ...