Add interactivity
The Splunk Application Framework makes it easy to add interactivity to an app using JavaScript. Web developers who are familiar with JavaScript programming will feel right at home.
Make an interactive map and table
The following example creates a SplunkMap and a Table view, binds them to the same search manager, and uses JavaScript to listen to click events on the table. When a map marker is clicked, the table is updated to show data about the corresponding event.
{% splunkmap id="example-map" managerid="mapsearch" %}Event data:
{% table id="example-table" managerid="tablesearch" count="1" %} {% searchmanager id="tablesearch" search="| inputlookup earthquakes.csv | rename Lat as latitude, Lon as longitude | fields latitude longitude Magnitude | head 1" preview=True cache=True %} {% searchmanager id="mapsearch" search="| inputlookup earthquakes.csv | rename Lat as latitude, Lon as longitude | fields latitude longitude Magnitude" preview=True cache=True %}This map, table, and search are declared with template tags:
{% splunkmap id="example-map" managerid="geosearch" %} {% table id="example-table" managerid="geosearch" count="5" %} {% searchmanager id="geosearch" search="| inputlookup earthquakes.csv | rename Lat as latitude Lon as longitude | geostats count" preview=True cache=True autostart=True %}
With JavaScript, the map and table are selected through the splunkjs.mvc object and a click handler is attached to the table. When a marker is clicked, the table search re-runs to show just that marker's information.
var table = splunkjs.mvc.Components.getInstance("example-table"); var mapSearch = splunkjs.mvc.Components.getInstance("mapsearch"); var tableSearch = splunkjs.mvc.Components.getInstance("tablesearch"); var exampleMap = splunkjs.mvc.Components.getInstance("example-map"); exampleMap.on("click:marker", function(e) { e.preventDefault(); var lat = e.data.latitude; tableSearch.set("search", "| inputlookup earthquakes.csv | rename Lat as latitude Lon as longitude | search latitude="+lat+" | fields latitude longitude Magnitude"); });