Dashboards & Visualizations

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

Ankit_kiraula
Explorer

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

Labels (8)
1 Solution

ITWhisperer
SplunkTrust
SplunkTrust
<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>

View solution in original post

twjack
Explorer

@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$"

ITWhisperer
SplunkTrust
SplunkTrust

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>
0 Karma

Ankit_kiraula
Explorer

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

0 Karma

ITWhisperer
SplunkTrust
SplunkTrust
<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>

Ankit_kiraula
Explorer

thank you so much it worked like charm

0 Karma
Get Updates on the Splunk Community!

What's new in Splunk Cloud Platform 9.1.2312?

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

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...