Join the Conversation
- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- How to get dropdown value pass as a token using js...
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
How to get dropdown value pass as a token using js?
Hello Everyone,
My aim is to get the dropdown selected value as a token so that I can use it in searchmanager query,
also I am using dependent dropdown, so how to pass token of portfolio dropdown to application_code dropdown and when portfolio dropdown value changes then application_code dropdown should repopulate and show the data related to current selected portfolio value, also the default value of application_code dropdown should be default.
I am attaching the piece of code I am using, could someone please help me and explain how token works in js, I am new in splunk js.
xml:
<form script="demo.js">
<label>Demo</label>
<row>
<panel>
<html>
<div id="mydropdownview1"/>
<div id="mydropdownview2"/>
<div id="mytimerangeview"/>
<div id="singleid0"/>
<div id="singleid1"/>
<div id="singleid2"/>
<div id="singleid3"/>
<div id="singleid4"/>
<div id="singleid5"/>
<div id="singleid6"/>
<div id="singleid7"/>
<div id="singleid8"/>
<div id="singleid9"/>
<div id="singleid10"/>
<div id="singleid11"/>
</html>
</panel>
</row>
</form>
demo.js
require(["splunkjs/ready!"], function (mvc) {
var deps = [
"jquery",
"splunkjs/mvc/dropdownview",
"splunkjs/ready!",
"splunkjs/mvc/searchmanager",
"splunkjs/mvc/tableview",
"splunkjs/mvc/singleview",
"splunkjs/mvc/timerangeview",
"splunkjs/mvc"
];
require(deps, function(mvc) {
// var randomid = () => Math.random()
const searchId = Date.now() + '';
const searchId1 = searchId + Date.now() + '';
const searchId2 = searchId1 + Date.now() + '';
const searchId3 = searchId2 + Date.now() + '';
const searchId4 = searchId3 + Date.now() + '';
const searchId5 = searchId4 + Date.now() + '';
const searchId6 = searchId5 + Date.now() + '';
const searchId7 = searchId6 + Date.now() + '';
const searchId8 = searchId7 + Date.now() + '';
const searchId9 = searchId8 + Date.now() + '';
const searchId10= searchId9 + Date.now() + '';
const searchId11= searchId10 + Date.now() + '';
const dropdownsearch1= searchId11 + Date.now() + '';
const dropdownsearch2= dropdownsearch1 + Date.now() + '';
var SearchManager = require("splunkjs/mvc/searchmanager");
var DropdownView = require("splunkjs/mvc/dropdownview");
var m = require("splunkjs/mvc");
var TimeRangeView = require("splunkjs/mvc/timerangeview");
var mychoices = [
{label:"ALL", value: "*"},
];
// Access the "default" token model
var tokens = m.Components.get("default");
// Retrieve the value of a token $mytoken$
// portfolio_token = tokens.get("portfolio_token");
/**Dropdowns */
var portfolio = new DropdownView({
id: "dropdownid1",
managerid: dropdownsearch1,
default: "demo_portfolio_value",
labelField: "portfolio",
valueField: "portfolio",
el: $("#mydropdownview1")
}).render();
new SearchManager({
id: dropdownsearch1,
search: `| inputlookup demo_portfolio_filter.csv | table portfolio
| dedup portfolio
| sort portfolio`
});
// defaultTokenModel.set("portfolio_token", "*");
// var portfolio_dropdown = tokens.get("portfolio_token")
var application_code = new DropdownView({
id: "dropdownid2",
choices: mychoices,
managerid: dropdownsearch2,
// default: "ALL",
selectFirstChoice:"true",
labelField: "application_name",
valueField: "application_code",
el: $("#mydropdownview2")
}).render();
var portfolio_search = new SearchManager({
id: dropdownsearch2,
search: `| inputlookup demo_portfolio_filter.csv |search portfolio=${portfolio.val()} |eval application_name=application_code."-".application_name
|table application_name application_code |sort application_code`
});
// Instantiate a view using the default time range picker
var mytimerange = new TimeRangeView({
id: "example-timerange",
managerid: "example-search",
preset: "-4h@m",
el: $("#mytimerangeview")
}).render();
var Controlm_NOK = new SearchManager({
id: searchId,
label:"NOK Percent Controlm",
earliest_time: mytimerange.val().earliest_time,
latest_time: mytimerange.val().latest_time,
search: `somebasesearch
| stats values(percentage) by application_code`,
preview: true,
autostart: true,
cache: true
});
/**OK Percent */
const search1 = new SearchManager({
id:searchId1,
label:"OK Percent Controlm",
earliest_time: mytimerange.val().earliest_time,
latest_time: mytimerange.val().latest_time,
search: `somebasesearch
| stats values(OK_Percentage) by application_code`,
preview: true,
autostart: true,
cache: true
});
var SingleView = require('splunkjs/mvc/singleview');
new SingleView({
id: "single0",
managerid: searchId,
underLabel:"singleview nok",
colorMode: "block",
drilldown: "none",
rangeColors: "[\"0x6db7c6\",\"0x65a637\",\"0xf7bc38\",\"0xd93f3c\"]",
rangeValues: "[0,80,95]",
useColors: true,
"trellis.enabled": true,
"trellis.splitBy": "Location_Name",
"trellis.size": "medium",
el: $("#singleid0")
}).render();
var SingleView = require('splunkjs/mvc/singleview');
new SingleView({
id: "single1",
underLabel:"singleview ok",
managerid: searchId1,
colorMode: "block",
drilldown: "none",
rangeColors: "[\"0x6db7c6\",\"0x65a637\",\"0xf7bc38\",\"0xd93f3c\"]",
rangeValues: "[0,80,95]",
useColors: true,
"trellis.enabled": true,
"trellis.splitBy": "Location_Name",
"trellis.size": "medium",
el: $("#singleid1")
}).render();
});
});
Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!
Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.
Why Splunk Customers Should Attend Cisco Live 2026 Las Vegas
What Is the Name of the USB Key Inserted by Bob Smith? (BOTS Hint, Not the Answer)
Automating Threat Operations and Threat Hunting with Recorded Future
