Difference between revisions of "Show/Hide Header"

From SmartWiki
Jump to: navigation, search
(→‎Example)
(the code supplied does not work, and breaks smartfields spaces removed and semi colon added)
 
(44 intermediate revisions by 7 users not shown)
Line 1: Line 1:
−
=Overview=
+
{{JavaScript Syntax}}
 +
The '''showhideheader''' function allows you to use one [[Custom Field]]  (the '''Control''' field) to show or hide all [[Custom Fields]] that are located under a [[Custom Field Type: Title Bar – Multiple Columns|Title Bar Field]]
  
−
This is a new feature designed to support more dynamic pages by providing for control of the visibility of [[Custom Fields|custom fields]] through values that are entered elsewhere on the page.  
+
* All fields between the specified [[Custom Field Type: Title Bar – Multiple Columns|Title Bar Field]] and the subsequent [[Custom Field Type: Title Bar – Multiple Columns|Title Bar Field]] will have their visibility controlled as a group.
 +
* The set of fields being hidden can be located anywhere on the same page.
 +
* '''Note:''' The [[Custom Field Type: Title Bar – Multiple Columns|Title Bar Field]] must <u>not</u> have '''Use As Tab''' enabled. (In other words it cannot be a [[Custom Field Tab]]).
  
−
The concept is that one [[Custom Fields|custom field]] - the "control field" - is used to control the display of a set of [[Custom Fields|custom fields]] based on a value entered or selected in the control field.
 
  
−
The control field can be any type of [[Custom Fields|custom field]] that can contain a value such as a text box ([[Custom Field Type (30): Text – Single Line|single]] or [[Custom Field Type (40): Text – Multiple Lines|multiple]] line), [[Custom Field Type (10): Select One – Combo Box|Combo box - select one]], [[Custom Field Type (20): Select Many – Check Boxes|Check boxes - select many]], [[Custom Field Type (60): Special – Calculated Value|Calculated field]] or Lookup type field.
+
The control field can be any [[Custom Field]] that contains a value:
 +
* [[Custom Field Type: Text – Single Line]]
 +
* [[Custom Field Type: Text – Multiple Lines]]
 +
* [[Custom Field Type: Select One – Combo Box]]  
 +
* [[Custom Field Type: Select Many – Check Boxes]] ''(Note: see [[#Check Boxes|below]])''
 +
* [[Custom Field Type: Special – Calculated Value]]
 +
* [[Custom Field Type: Lookup – Entity and People]]
 +
* [[Custom Field Type: Lookup – External Entity]]
 +
* [[Custom Field Type: Lookup – External People]]
  
−
The only field types that cannot be used are fields such as [[Custom Field Type (103): Special – Browser Script|browser script]], [[Custom Field Type (34): Display Only – Image|Image]] field, etc.
 
  
−
The controlled fields must all be placed under a '''Title Bar''' type field.
+
==Syntax==
 +
Place the following code in the '''HTML Tag''' box of the '''Control''' field:
 +
 
 +
:<font size="3">onchange="_showhideheader(xxxxxx,this.value=='Yes')"</font>
 +
 
 +
'''Where''':
 +
* ''xxxxxx'' is the field ID of the [[Custom Field Type: Title Bar – Multiple Columns|Title Bar]] field that you wish to control.
 +
* ''Yes'' is the value in the control field that you wish to use to trigger the display of '''Title''' '''Bar''' and the other '''Controlled''' fields in the block.
 +
 
 +
'''Note:''' [[Custom Field Type: Select Many – Check Boxes|Check Boxes]] use a different syntax. See [[#Check Boxes|below]]
 +
 
 +
 
 +
'''Examples:'''
 +
* Display the controlled fields when the control field (Custom Field ID 123456) is '''not equal''' to Yes:
 +
onchange="_showhideheader(123456,this.value!='Yes')"
 +
 
  
−
==Example==
+
* '''Multiple Conditions''' the control field (Custom Field ID 123456) is either Yes or Maybe:
 +
onchange="_showhideheader(123456,(this.value=='Yes' || this.value=='Maybe'))"
  
−
Place the following code in the '''HTML Tag''' box of the '''Control''' field:
 
  
−
<pre>
+
* Display the controlled fields when the control field (Custom Field ID 123456) is '''empty''':
−
onchange="_showhideheader(xxxxxx,this.value=='Yes')"
+
onchange="_showhideheader(123456,this.value==''''''')"
−
</pre>
 
  
−
Where '''xxxxxx''' is the field ID of the '''Title Bar''' field that you wish to control.
 
  
−
Where '''Yes''' is the value in the control field that you wish to use to trigger the display of '''Title''' '''Bar''' and the other '''Controlled''' fields in the block.
+
*Display the controlled fields when a '''numerical''' control field (Custom Field ID 123456) is greater than 6:
 +
onchange="_showhideheader(123456, parseInt(this.value ) >6)"
  
−
'''More complex syntax can also be used:'''
+
==Multiple Title Bars==
 +
'''Multiple headers''' can be hidden/shown simultaneously:
 +
:<font size="3">onchange="_showhideheader(xxxxxx,this.value=='A');_showhideheader(yyyyyy,this.value=='B');"  </font>
  
−
<pre>
+
This will display the fields under '''Title Bar''' xxxxxx  when the control field has value '''A''' and display the fields under '''Title Bar''' yyyyyy when the control field has value '''B'''.
  
−
onchange="_showhideheader(xxxxxx,this.value!='Yes')" - Display the controlled fields when the control field is not equal to Yes.
+
==Check Boxes==
 +
When the '''Control''' field is a [[Custom Field Type: Select Many – Check Boxes|Select Many Check Box]], you will need to use the '''onclick''' syntax.  
  
−
onchange="_showhideheader(xxxxxx,(this.value=='Yes' || this.value=='Maybe'))" - Display the controlled fields when the control field is either Yes or Maybe.
+
:<font size="3">onclick="_showhideheadercheckbox(xxxxxxx,this,'Yes;Cancel')"</font>
  
−
onchange="_showhideheader(xxxxxx,this.value==''") - Display the controlled fields when the control field is empty.
+
* Use '''onclick''' instead of '''onchange'''
 +
* Use '''this''' instead of '''this.value'''
 +
* ''''Yes;Cancel'''' - values delimited by semi-colon
  
−
onchange="_showhideheader(xxxxxx, parseInt(this.value ) >6)" - Display the controlled fields when the control field is greater than 6. </pre>
 
  
−
The difference between this feature and [[Custom Field Type (87): Dynamic Data – Dynamic Control Field|Dynamic Control]] field is that:
+
'''Example:'''
 +
* Using a select many check box, but allowing only one value to be selected and controlling the showhideheader if the value is '''equal''' to Yes:
 +
onclick="onlyonechecked(this); _showhideheader(123456,this.value=='Yes')"
  
−
Unlike the [[Custom Field Type (87): Dynamic Data – Dynamic Control Field|Dynamic]] [[Custom Field|custom field]], there are no fields "nested" within the control field and the set of fields that you wish to control can be located anywhere on the page.
+
==Notes==
 +
The difference between this feature and [[Custom Field Type: Dynamic Data – Dynamic Control Field|Dynamic Control Field]] is that:
 +
* The set of fields that you wish to control can be located anywhere on the page. With [[Custom Field Type: Dynamic Data – Dynamic Control Field|Dynamic Control Fields]] the fields must be below the control field.
 +
* Unlike the [[Custom Field Type: Dynamic Data – Dynamic Control Field|Dynamic Control Field]], there are no fields "nested" within the control field.
 +
* The fields hidden by one control can be used as control fields themselves. Using nested [[Custom Field Type: Dynamic Data – Dynamic Control Field|Dynamic Control Fields]] (dynamic controls within dynamic controls) is not recommended, and you cannot report below the first level of nested fields.
 +
* If using '''[[Allowing Only One Check Box to be Selected|onlyonechecked]]''' on a [[Custom Field Type: Select Many – Check Boxes|Select Many - Check Box]] field and you also want to Show/Hide Header you should use '''_showhideheader''' instead of '''_showhideheadercheckbox'''
  
−
Using nested [[Custom Field Type (87): Dynamic Data – Dynamic Control Field|Dynamic Control]] fields (dynamic controls within dynamic controls) you cannot report below the first level of nested fields.
+
==See Also==
 +
* [[Making a field under a show/hide header mandatory]]
 +
* [[Conditional Lists of Values]]
 +
{{VisibilityofCustomFields}}
  
−
[[Category:Custom Fields]][[Category:Enhancements]][[Category:System Management]]
+
[[Category:Custom Fields]][[Category:JavaScript]]

Latest revision as of 14:36, 10 February 2016

This feature uses JavaScript syntax
Text code javascript.gif

The showhideheader function allows you to use one Custom Field (the Control field) to show or hide all Custom Fields that are located under a Title Bar Field

  • All fields between the specified Title Bar Field and the subsequent Title Bar Field will have their visibility controlled as a group.
  • The set of fields being hidden can be located anywhere on the same page.
  • Note: The Title Bar Field must not have Use As Tab enabled. (In other words it cannot be a Custom Field Tab).


The control field can be any Custom Field that contains a value:


Syntax

Place the following code in the HTML Tag box of the Control field:

onchange="_showhideheader(xxxxxx,this.value=='Yes')"

Where:

  • xxxxxx is the field ID of the Title Bar field that you wish to control.
  • Yes is the value in the control field that you wish to use to trigger the display of Title Bar and the other Controlled fields in the block.

Note: Check Boxes use a different syntax. See below


Examples:

  • Display the controlled fields when the control field (Custom Field ID 123456) is not equal to Yes:
onchange="_showhideheader(123456,this.value!='Yes')"


  • Multiple Conditions the control field (Custom Field ID 123456) is either Yes or Maybe:
onchange="_showhideheader(123456,(this.value=='Yes' || this.value=='Maybe'))"


  • Display the controlled fields when the control field (Custom Field ID 123456) is empty:
onchange="_showhideheader(123456,this.value=='')"


  • Display the controlled fields when a numerical control field (Custom Field ID 123456) is greater than 6:
onchange="_showhideheader(123456, parseInt(this.value ) >6)"

Multiple Title Bars

Multiple headers can be hidden/shown simultaneously:

onchange="_showhideheader(xxxxxx,this.value=='A');_showhideheader(yyyyyy,this.value=='B');"

This will display the fields under Title Bar xxxxxx when the control field has value A and display the fields under Title Bar yyyyyy when the control field has value B.

Check Boxes

When the Control field is a Select Many Check Box, you will need to use the onclick syntax.

onclick="_showhideheadercheckbox(xxxxxxx,this,'Yes;Cancel')"
  • Use onclick instead of onchange
  • Use this instead of this.value
  • 'Yes;Cancel' - values delimited by semi-colon


Example:

  • Using a select many check box, but allowing only one value to be selected and controlling the showhideheader if the value is equal to Yes:
onclick="onlyonechecked(this); _showhideheader(123456,this.value=='Yes')"

Notes

The difference between this feature and Dynamic Control Field is that:

  • The set of fields that you wish to control can be located anywhere on the page. With Dynamic Control Fields the fields must be below the control field.
  • Unlike the Dynamic Control Field, there are no fields "nested" within the control field.
  • The fields hidden by one control can be used as control fields themselves. Using nested Dynamic Control Fields (dynamic controls within dynamic controls) is not recommended, and you cannot report below the first level of nested fields.
  • If using onlyonechecked on a Select Many - Check Box field and you also want to Show/Hide Header you should use _showhideheader instead of _showhideheadercheckbox

See Also

Visibility of Custom Fields can also be controlled using:

Retrieved from ‘https://wiki.smartsimple.com/index.php?title=Show/Hide_Header&oldid=25622’