Solved: Re: How to reload a single panel with javascript

pbalbasm · ‎06-18-2019

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

kamlesh_vaghela · ‎06-19-2019

@pbalbasm
Can you please try this?

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

Thanks

View solution in original post

sdhiaeddine · ‎03-03-2022

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();
}
});

kamlesh_vaghela · ‎03-03-2022

@sdhiaeddine

Can you please share your sample code?

KV

sdhiaeddine · ‎03-03-2022

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>

kamlesh_vaghela · ‎03-03-2022

@sdhiaeddine

You should define id for search tag Not panel tag.

like..

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

KV

sdhiaeddine · ‎03-08-2022

@kamlesh_vaghelaThank you, it works now

AKG1_old1 · ‎05-10-2021

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

kamlesh_vaghela · ‎06-19-2019

@pbalbasm
Can you please try this?

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

Thanks

pbalbasm · ‎06-19-2019

Hi, that totally work! Thank you.

kamlesh_vaghela · ‎06-19-2019

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

afranciiine · ‎07-30-2019

It works! Thank you very much!

DavidHourani · ‎06-18-2019

Hi @pbalbasm,

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

pbalbasm · ‎06-18-2019

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

How to reload a single panel with javascript?

panel

Dashboards: Hiding charts while search is being executed and other uses for tokens

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

Brains, Bytes, and Boston: Learn from the Best at .conf25

Are you a member of the Splunk Community?

How to reload a single panel with javascript?

panel

Dashboards: Hiding charts while search is being executed and other uses for tokens

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

Brains, Bytes, and Boston: Learn from the Best at .conf25