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!

Introducing Splunk Enterprise 9.2

WATCH HERE! Watch this Tech Talk to learn about the latest features and enhancements shipped in the new Splunk ...

Adoption of RUM and APM at Splunk

    Unleash the power of Splunk Observability   Watch Now In this can't miss Tech Talk! The Splunk Growth ...

Routing logs with Splunk OTel Collector for Kubernetes

The Splunk Distribution of the OpenTelemetry (OTel) Collector is a product that provides a way to ingest ...