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();
});
});
Index This | What is broken 80% of the time by February?
Unlock Faster Time-to-Value on Edge and Ingest Processor with New SPL2 Pipeline ...
Splunk MCP & Agentic AI: Machine Data Without Limits
