All Apps and Add-ons

Modal pop-up to show splunk query output not working on html button click?

sarvesh_11
Communicator

Hello Splunkers,

I have a HTML button on my splunk dashboard, i want a pop-up when i click that button. That Pop-up will have a splunk Query Output.

Please find my below code:

Button:

<html>
<button class="btn btn-primary button2" style="margin-left: 950px; margin-top: -75px; position: absolute;" token="button">Report Of Killed Processes</button>
</html>

Button.js

require([
'splunkjs/mvc/searchmanager',
'splunkjs/mvc/tableview',
'underscore',
'splunkjs/mvc',
'/static/app/abcd/Modal.js',
"splunkjs/mvc/simplexml/ready!"
], function(SearchManager,
TableView,
_,
mvc,
Modal)
{
$(".button2").on("click", function (e){
e.preventDefault()
console.log(e)

var myModal = new Modal("mod1", {
title: "Movie Details",
backdrop: true,
keyboard: false,
destroyOnHide: true,
type: 'wide'
});

myModal.body
.append($('<p>Please find the movie details below</p><div id="modal_dtl_tabl"></div>'));

$(myModal.$el).on("show", function() {
setTimeout(function() {
var epoch = (new Date).getTime()
var modal_movie_dtl_srch = new SearchManager({
id: "modal_tbl_srch" + epoch,
earliest_time: "@d",
latest_time: "now",
preview: true,
cache: false,
search: "|inputlookup kill_log.csv  |table *"
});
var myCustomtable = new TableView({
id: "modal_example-table" + epoch,
managerid: "modal_tbl_srch" + epoch,
pageSize: "10",
el: $("#modal_dtl_tabl")
}).render();
}, 300)
});
myModal.show();
})
});

 

Also i am using Modal.js from Splunk Dev For All, placed it in my app ABCD.

Now when i click the button, nothing happens.

Labels (3)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@sarvesh_11 

Can you please check this app for working example? 

https://github.com/KamleshVaghela/splunk_dashboard_model_view_examples

I hope this will help you.

 

Thanks
KV
▄︻̷̿┻̿═━一   😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

 

View solution in original post

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@sarvesh_11 

Can you please check this app for working example? 

https://github.com/KamleshVaghela/splunk_dashboard_model_view_examples

I hope this will help you.

 

Thanks
KV
▄︻̷̿┻̿═━一   😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

 

0 Karma

sarvesh_11
Communicator

Thanks @kamlesh_vaghela , it was very helpful

Tags (1)
0 Karma
Get Updates on the Splunk Community!

Database Performance Sidebar Panel Now on APM Database Query Performance & Service ...

We’ve streamlined the troubleshooting experience for database-related service issues by adding a database ...

IM Landing Page Filter - Now Available

We’ve added the capability for you to filter across the summary details on the main Infrastructure Monitoring ...

Dynamic Links from Alerts to IM Navigators - New in Observability Cloud

Splunk continues to improve the troubleshooting experience in Observability Cloud with this latest enhancement ...