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

[Ankit_kiraula]

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

[twjack]

---

@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]

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>

[Ankit_kiraula]

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

[ITWhisperer · Accepted solution]

<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]

thank you so much it worked like charm