topic Re: How can i use multiple Depends="$token$" in a input text field in Dashboards & Visualizations

How can i use multiple Depends="$token$" in a input text field

Ankit_kiraula — Mon, 07 Jun 2021 08:15:14 GMT

I'm creating a Dashboard where i have multiple tabs(link list input) and i've multiple text input field
now i do not want all text field to appear in all the tabs.
for example I've 6 input field
"username"
"hostname"
"source_IP"
"destination_IP"
"emailID"
"user identity"

and I've 4-5 tabs
now in the first tab I want to see only username and hostname input type
in the 2nd tab I want to see source IP and destination IP field
and in the 3rd field I want to see user identity ,username and hostname field.

how can I achieve this, I'm not able to use multiple depends="token name" command in the in input text field tag

Re: How can i use multiple Depends="$token$" in a input text field

ITWhisperer — Mon, 07 Jun 2021 09:27:14 GMT

You could use CSS to show/hide the inputs

<form> <label>Tabbed dashboard</label> <fieldset submitButton="false"> <input type="text" token="username" id="username"> <label>username</label> </input> <input type="text" token="hostname" id="hostname"> <label>hostname</label> </input> <input type="text" token="source_IP" id="source_IP"> <label>source_IP</label> </input> <input type="text" token="destination_IP" id="destination_IP"> <label>destination_IP</label> </input> <input type="text" token="emailID" id="emailID"> <label>emailID</label> </input> <input type="text" token="useridentity" id="useridentity"> <label>user identity</label> </input> <input type="link" token="tab_type" searchWhenChanged="true" id="tab_tab1"> <label>Type of tab</label> <choice value="tab_type1">Tab1</choice> <choice value="tab_type2">Tab2</choice> <choice value="tab_type3">Tab3</choice> <choice value="tab_type4">Tab4</choice> <change> <condition value="tab_type1"> <unset token="home_token"></unset> <set token="tab_type1_token"></set> <unset token="tab_type2_token"></unset> <unset token="tab_type3_token"></unset> <unset token="tab_type4_token"></unset> <set token="showusername">inline-block</set> <set token="showhostname">inline-block</set> <set token="showsource_IP">none</set> <set token="showdestination_IP">none</set> <set token="showemailID">none</set> <set token="showuseridentity">none</set> </condition> <condition value="tab_type2"> <unset token="home_token"></unset> <unset token="tab_type1_token"></unset> <set token="tab_type2_token"></set> <unset token="tab_type3_token"></unset> <unset token="tab_type4_token"></unset> <set token="showusername">none</set> <set token="showhostname">none</set> <set token="showsource_IP">inline-block</set> <set token="showdestination_IP">inline-block</set> <set token="showemailID">none</set> <set token="showuseridentity">none</set> </condition> <condition value="tab_type3"> <unset token="home_token"></unset> <unset token="tab_type1_token"></unset> <unset token="tab_type2_token"></unset> <set token="tab_type3_token"></set> <unset token="tab_type4_token"></unset> <set token="showusername">inline-block</set> <set token="showhostname">inline-block</set> <set token="showsource_IP">none</set> <set token="showdestination_IP">none</set> <set token="showemailID">none</set> <set token="showuseridentity">inline-block</set> </condition> <condition value="tab_type4"> <unset token="home_token"></unset> <unset token="tab_type1_token"></unset> <unset token="tab_type2_token"></unset> <unset token="tab_type3_token"></unset> <set token="tab_type4_token"></set> <set token="showusername">inline-block</set> <set token="showhostname">inline-block</set> <set token="showsource_IP">inline-block</set> <set token="showdestination_IP">inline-block</set> <set token="showemailID">inline-block</set> <set token="showuseridentity">inline-block</set> </condition> <condition> <set token="tokLabel">$label$</set> <set token="home_token"></set> </condition> </change> </input> <html> <style> /* This Layout Panel Bottom Padding removed to merge Link Input with horizontal line */ #panel_layout .fieldset{ padding: 10px 12px 0px 12px !important; } /* Increase width of Link input to have options in Single Line */ #tab_tab1.input-link{ width:100%; } /* Change from flex to -webkit-box for side by side layout */ #input_radio_split_by.input-link div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{ display: -webkit-box !important; } /* Create Button Border to make them appear as Tabs */ #tab_tab1.input-link button{ /*width: 120px !important;*/ border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 1px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 1px; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 1px; border-top-left-radius: 10px; border-top-right-radius: 10px; } /* Hide link input bottom message section to merge with Horizontal line */ .dashboard-panel #input_link_split_by label, #tab_tab1 .splunk-choice-input-message{ display: none !important; } /* Remove padding from horizontal line */ #panel_layout .panel-body.html{ padding: 0px !important; } #username { display: $showusername$; } #hostname { display: $showhostname$; } #source_IP { display: $showsource_IP$; } #destination_IP { display: $showdestination_IP$; } #emailID { display: $showemailID$; } #useridentity { display: $showuseridentity$; } </style> <hr style="height:1px;border-width:0;color: black;background-color: white;margin: 0px;"/> </html> </fieldset> <row> <panel depends="$initial_token$" id="initial_panel"> <title>Click on input values to view results</title> <html> <style> .dashboard-row #initial_panel .dashboard-panel h2.panel-title { font-size: 20px !important; color:#1A237E !important; allign: center; } </style> </html> </panel> </row> </form>

Re: How can i use multiple Depends="$token$" in a input text field

Ankit_kiraula — Mon, 07 Jun 2021 09:30:44 GMT

Thank you @ITWhisperer
but im not using CSS as of now its just simple XML, do you have any suggestion with out using CSS?

Re: How can i use multiple Depends="$token$" in a input text field

ITWhisperer — Mon, 07 Jun 2021 09:50:49 GMT

<form> <label>Tabbed dashboard with depends</label> <fieldset submitButton="false"> <input type="text" token="username" id="username" depends="$showusername$"> <label>username</label> </input> <input type="text" token="hostname" id="hostname" depends="$showhostname$"> <label>hostname</label> </input> <input type="text" token="source_IP" id="source_IP" depends="$showsource_IP$"> <label>source_IP</label> </input> <input type="text" token="destination_IP" id="destination_IP" depends="$showdestination_IP$"> <label>destination_IP</label> </input> <input type="text" token="emailID" id="emailID" depends="$showemailID$"> <label>emailID</label> </input> <input type="text" token="useridentity" id="useridentity" depends="$showuseridentity$"> <label>user identity</label> </input> <input type="link" token="tab_type" searchWhenChanged="true" id="tab_tab1"> <label>Type of tab</label> <choice value="tab_type1">Tab1</choice> <choice value="tab_type2">Tab2</choice> <choice value="tab_type3">Tab3</choice> <choice value="tab_type4">Tab4</choice> <change> <condition value="tab_type1"> <unset token="home_token"></unset> <set token="tab_type1_token"></set> <unset token="tab_type2_token"></unset> <unset token="tab_type3_token"></unset> <unset token="tab_type4_token"></unset> <set token="showusername">k</set> <set token="showhostname"></set> <unset token="showsource_IP"></unset> <unset token="showdestination_IP"></unset> <unset token="showemailID"></unset> <unset token="showuseridentity"></unset> </condition> <condition value="tab_type2"> <unset token="home_token"></unset> <unset token="tab_type1_token"></unset> <set token="tab_type2_token"></set> <unset token="tab_type3_token"></unset> <unset token="tab_type4_token"></unset> <unset token="showusername"></unset> <unset token="showhostname"></unset> <set token="showsource_IP"></set> <set token="showdestination_IP"></set> <unset token="showemailID"></unset> <unset token="showuseridentity"></unset> </condition> <condition value="tab_type3"> <unset token="home_token"></unset> <unset token="tab_type1_token"></unset> <unset token="tab_type2_token"></unset> <set token="tab_type3_token"></set> <unset token="tab_type4_token"></unset> <set token="showusername"></set> <set token="showhostname"></set> <unset token="showsource_IP"></unset> <unset token="showdestination_IP"></unset> <unset token="showemailID"></unset> <set token="showuseridentity"></set> </condition> <condition value="tab_type4"> <unset token="home_token"></unset> <unset token="tab_type1_token"></unset> <unset token="tab_type2_token"></unset> <unset token="tab_type3_token"></unset> <set token="tab_type4_token"></set> <set token="showusername"></set> <set token="showhostname"></set> <set token="showsource_IP"></set> <set token="showdestination_IP"></set> <set token="showemailID"></set> <set token="showuseridentity"></set> </condition> <condition> <set token="tokLabel">$label$</set> <set token="home_token"></set> </condition> </change> </input> <html> <style> /* This Layout Panel Bottom Padding removed to merge Link Input with horizontal line */ #panel_layout .fieldset{ padding: 10px 12px 0px 12px !important; } /* Increase width of Link input to have options in Single Line */ #tab_tab1.input-link{ width:100%; } /* Change from flex to -webkit-box for side by side layout */ #input_radio_split_by.input-link div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{ display: -webkit-box !important; } /* Create Button Border to make them appear as Tabs */ #tab_tab1.input-link button{ /*width: 120px !important;*/ border-top-color: rgb(255, 255, 255); border-top-style: solid; border-top-width: 1px; border-right-color: rgb(255, 255, 255); border-right-style: solid; border-right-width: 1px; border-left-color: rgb(255, 255, 255); border-left-style: solid; border-left-width: 1px; border-top-left-radius: 10px; border-top-right-radius: 10px; } /* Hide link input bottom message section to merge with Horizontal line */ .dashboard-panel #input_link_split_by label, #tab_tab1 .splunk-choice-input-message{ display: none !important; } /* Remove padding from horizontal line */ #panel_layout .panel-body.html{ padding: 0px !important; } </style> <hr style="height:1px;border-width:0;color: black;background-color: white;margin: 0px;"/> </html> </fieldset> <row> <panel depends="$initial_token$" id="initial_panel"> <title>Click on input values to view results</title> <html> <style> /* #initial_panel .dashboard-panel{ background-color:#F0F0F0 !important; }*/ .dashboard-row #initial_panel .dashboard-panel h2.panel-title { font-size: 20px !important; color:#1A237E !important; allign: center; } </style> </html> </panel> </row> </form>

Re: How can i use multiple Depends="$token$" in a input text field

Ankit_kiraula — Tue, 08 Jun 2021 06:17:09 GMT

thank you so much it worked like charm

Re: How can i use multiple Depends="$token$" in a input text field

twjack — Fri, 01 Oct 2021 15:15:41 GMT

@Ankit_kiraula wrote:
... I'm not able to use multiple depends="token name" command in the in input text field tag

depends="$tok_1$,$tok_2$"