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!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...