Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question

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

Wonder_women
Loves-to-Learn
‎11-18-2022 10:29 PM

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
Reply
Get Updates on the Splunk Community!

Building Reliable Asset and Identity Frameworks in Splunk ES

 Accurate asset and identity resolution is the backbone of security operations. Without it, alerts are ...

Cloud Monitoring Console - Unlocking Greater Visibility in SVC Usage Reporting

For Splunk Cloud customers, understanding and optimizing Splunk Virtual Compute (SVC) usage and resource ...

Automatic Discovery Part 3: Practical Use Cases

If you’ve enabled Automatic Discovery in your install of the Splunk Distribution of the OpenTelemetry ...
Top