Dashboards & Visualizations

How to get dropdown value pass as a token using js?

Wonder_women
Loves-to-Learn

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();

 

});
});

 

     

Labels (4)
0 Karma
Get Updates on the Splunk Community!

What's New in Splunk Cloud Platform 9.2.2403?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.2.2403! Analysts can ...

Stay Connected: Your Guide to July and August Tech Talks, Office Hours, and Webinars!

Dive into our sizzling summer lineup for July and August Community Office Hours and Tech Talks. Scroll down to ...

Edge Processor Scaling, Energy & Manufacturing Use Cases, and More New Articles on ...

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...