DevOps:Doc/FlexForm/1.0/ShowOnSelect - Revision history

81d56153-9868-4094-90a0-df1700ff7090: Text replacement - "{{Doc properties" to "{{Csp class properties"

2025-07-15T08:59:48Z

Text replacement - "{{Doc properties" to "{{Csp class properties"

ws-class-props
← Older revision		Revision as of 10:59, 15 July 2025
Line 1:		Line 1:
	{{~~Doc~~ properties		{{Csp class properties
	\|Doc subject=DevOps:Doc/FlexForm		\|Doc subject=DevOps:Doc/FlexForm
	\|Subject version=1.0,1.1		\|Subject version=1.0,1.1

944f869b-8467-464e-95c7-903362952755: restrictions="lifted" missing. Without it none of these examples are publicly visible

2022-11-03T15:06:54Z

restrictions="lifted" missing. Without it none of these examples are publicly visible

← Older revision		Revision as of 17:06, 3 November 2022
Line 52:		Line 52:
	Example 2 : show-on-select on a select field		Example 2 : show-on-select on a select field
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<_form action="addToWiki" show-on-select="show-on-select" >		<_form action="addToWiki" show-on-select="show-on-select" restrictions="lifted" >
	<_select name="selectme" id="selectme" >		<_select name="selectme" id="selectme" >
	<_input type="option" for="selectme" show-on-select="testingId2" selected="selected" value="1">1</_input>		<_input type="option" for="selectme" show-on-select="testingId2" selected="selected" value="1">1</_input>
Line 62:		Line 62:
	</_form>		</_form>
	</syntaxhighlight>		</syntaxhighlight>
	<_form action="addToWiki" show-on-select="show-on-select" >		<_form action="addToWiki" show-on-select="show-on-select" restrictions="lifted" >
	<_select name="selectme" id="selectme" >		<_select name="selectme" id="selectme" >
	<_input type="option" for="selectme" show-on-select="testingId2" selected="selected" value="1">1</_input>		<_input type="option" for="selectme" show-on-select="testingId2" selected="selected" value="1">1</_input>
Line 74:		Line 74:
	Example 3 : show-on-checked on a radio button		Example 3 : show-on-checked on a radio button
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<_form action="addToWiki" show-on-select="show-on-select">		<_form action="addToWiki" show-on-select="show-on-select" restrictions="lifted" >
	<_input type="radio" show-on-checked="tester"/>		<_input type="radio" show-on-checked="tester"/>
	<div show-on-select-trigger="tester">		<div show-on-select-trigger="tester">
Line 81:		Line 81:
	</_form>		</_form>
	</syntaxhighlight>		</syntaxhighlight>
	<_form action="addToWiki" show-on-select="show-on-select">		<_form action="addToWiki" show-on-select="show-on-select" restrictions="lifted" >
	<_input type="radio" show-on-checked="tester"/>		<_input type="radio" show-on-checked="tester"/>
	<div show-on-select-trigger="tester">		<div show-on-select-trigger="tester">
Line 90:		Line 90:
	Example 4 : show-on-checked on a checkbox and show-on-unchecked on a checkbox.		Example 4 : show-on-checked on a checkbox and show-on-unchecked on a checkbox.
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<_form action="addToWiki" show-on-select="show-on-select" >		<_form action="addToWiki" show-on-select="show-on-select" restrictions="lifted" >
	<_input type="checkbox" show-on-checked="test A" show-on-unchecked="test B" />		<_input type="checkbox" show-on-checked="test A" show-on-unchecked="test B" />
	<div show-on-select-trigger="test A">test checked</div>		<div show-on-select-trigger="test A">test checked</div>
Line 96:		Line 96:
	</_form>		</_form>
	</syntaxhighlight>		</syntaxhighlight>
	<_form action="addToWiki" show-on-select="show-on-select" >		<_form action="addToWiki" show-on-select="show-on-select" restrictions="lifted" >
	<_input type="checkbox" show-on-checked="test A" show-on-unchecked="test B" />		<_input type="checkbox" show-on-checked="test A" show-on-unchecked="test B" />
	<div show-on-select-trigger="test A">test checked</div>		<div show-on-select-trigger="test A">test checked</div>
Line 104:		Line 104:
	Example 5 : show-on-select when a user input equals a predefined value		Example 5 : show-on-select when a user input equals a predefined value
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<_form action="addToWiki" show-on-select="show-on-select" >		<_form action="addToWiki" show-on-select="show-on-select" restrictions="lifted" >
	<_input type="text" show-on-select="testingId" name="test" /> The predefined value is "testingValue"		<_input type="text" show-on-select="testingId" name="test" /> The predefined value is "testingValue"
	<div show-on-select-trigger="testingId" show-on-select-type="equals::testingValue">		<div show-on-select-trigger="testingId" show-on-select-type="equals::testingValue" restrictions="lifted" >
	<span> Show this when the input value is equal to the text: testingValue </span>		<span> Show this when the input value is equal to the text: testingValue </span>
	</div>		</div>
	</_form>		</_form>
	</syntaxhighlight>		</syntaxhighlight>
	<_form action="addToWiki" show-on-select="show-on-select" >		<_form action="addToWiki" show-on-select="show-on-select" restrictions="lifted" >
	<_input type="text" show-on-select="testingId" name="test" /> The predefined value is "testingValue"		<_input type="text" show-on-select="testingId" name="test" /> The predefined value is "testingValue"
	<div show-on-select-trigger="testingId" show-on-select-type="equals::testingValue">		<div show-on-select-trigger="testingId" show-on-select-type="equals::testingValue">
Line 121:		Line 121:
	Example 6 : show-on-select when a user input contains a predefined value		Example 6 : show-on-select when a user input contains a predefined value
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<_form action="addToWiki" show-on-select="show-on-select" >		<_form action="addToWiki" show-on-select="show-on-select" restrictions="lifted" >
	<_input type="text" show-on-select="testingId" name="test" /> The predefined value is "testingValue"		<_input type="text" show-on-select="testingId" name="test" /> The predefined value is "testingValue"
	<div show-on-select-trigger="testingId" show-on-select-type="contains::testingValue">		<div show-on-select-trigger="testingId" show-on-select-type="contains::testingValue">
Line 128:		Line 128:
	</_form>		</_form>
	</syntaxhighlight>		</syntaxhighlight>
	<_form action="addToWiki" show-on-select="show-on-select" >		<_form action="addToWiki" show-on-select="show-on-select" restrictions="lifted" >
	<_input type="text" show-on-select="testingId" name="test" /> The predefined value is "testingValue"		<_input type="text" show-on-select="testingId" name="test" /> The predefined value is "testingValue"
	<div show-on-select-trigger="testingId" show-on-select-type="contains::testingValue">		<div show-on-select-trigger="testingId" show-on-select-type="contains::testingValue">
Line 138:		Line 138:
	Example 7 : The example will show a div when 2 is selected in the select box OR the checkbox has been checked		Example 7 : The example will show a div when 2 is selected in the select box OR the checkbox has been checked
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<_form show-on-select="show-on-select">		<_form show-on-select="show-on-select" restrictions="lifted" >
	<_select name="selectme" id="selectme" >		<_select name="selectme" id="selectme" >
	<_input type="option" for="selectme" show-on-select="testingId2" selected="selected" value="1">1</_input>		<_input type="option" for="selectme" show-on-select="testingId2" selected="selected" value="1">1</_input>
Line 151:		Line 151:
	</_form>		</_form>
	</syntaxhighlight>		</syntaxhighlight>
	<_form show-on-select="show-on-select">		<_form show-on-select="show-on-select" restrictions="lifted" >
	<_select name="selectme" id="selectme" >		<_select name="selectme" id="selectme" >
	<_input type="option" for="selectme" show-on-select="testingId2" selected="selected" value="1">1</_input>		<_input type="option" for="selectme" show-on-select="testingId2" selected="selected" value="1">1</_input>
Line 167:		Line 167:
	Example 8 : The example will show a div when 2 is selected in the select box AND the radiobutton is selected		Example 8 : The example will show a div when 2 is selected in the select box AND the radiobutton is selected
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
	<_form show-on-select="show-on-select">		<_form show-on-select="show-on-select" restrictions="lifted" >
	<_select name="selectme" id="selectme2" >		<_select name="selectme" id="selectme2" >
	<_input type="option" for="selectme2" show-on-select="testingId2" selected="selected" value="1">1</_input>		<_input type="option" for="selectme2" show-on-select="testingId2" selected="selected" value="1">1</_input>
Line 180:		Line 180:
	</_form>		</_form>
	</syntaxhighlight>		</syntaxhighlight>
	<_form show-on-select="show-on-select">		<_form show-on-select="show-on-select" restrictions="lifted" >
	<_select name="selectme" id="selectme2" >		<_select name="selectme" id="selectme2" >
	<_input type="option" for="selectme2" show-on-select="testingId2" selected="selected" value="1">1</_input>		<_input type="option" for="selectme2" show-on-select="testingId2" selected="selected" value="1">1</_input>

Admin: /* Parameters */

2022-10-30T11:12:09Z

Parameters

← Older revision		Revision as of 13:12, 30 October 2022
Line 10:		Line 10:
	You can create a complete form with certain form elements hidden based on a selection in the form done by a user.		You can create a complete form with certain form elements hidden based on a selection in the form done by a user.
	===Parameters===		===Parameters===
	'''show-on-select on the _form tag'''		'''<code>show-on-select</code> on the _form tag'''

	For it all to work you must let FlexForm know you want to use Show On Select by adding a parameter to the _form tag. '''See example 1'''.		For it all to work you must let FlexForm know you want to use Show On Select by adding a parameter to the _form tag. '''See example 1'''.
	<hr>		<hr>
	'''show-on-select on a select field'''		'''<code>show-on-select</code> on a select field'''

	The actual show-on-select attribute is added to an option field within a select field.		The actual show-on-select attribute is added to an option field within a select field.
Line 21:		Line 21:
	This will show an additional text input field with the name texttest1 when you select option 1 and texttest2 will be hidden. When option 2 is chosen, then texttest2 will be shown and texttest1 hidden.		This will show an additional text input field with the name texttest1 when you select option 1 and texttest2 will be hidden. When option 2 is chosen, then texttest2 will be shown and texttest1 hidden.
	<hr>		<hr>
	'''show-on-checked on a radio button'''		'''<code>show-on-checked</code> on a radio button'''

	'''Example 3''' shows you can also add a show-on-select-trigger to something different than a FlexForm _input field.		'''Example 3''' shows you can also add a show-on-select-trigger to something different than a FlexForm _input field.
	The example will hide the div with the trigger until the radio button is checked.		The example will hide the div with the trigger until the radio button is checked.
	<hr>		<hr>
	'''show-on-checked on a checkbox and show-on-unchecked on a checkbox'''		'''<code>show-on-checked</code> on a checkbox and <code>show-on-unchecked</code> on a checkbox'''

	'''Example 4''' shows an example of how to use show-on-checked for a checkbox field.		'''Example 4''' shows an example of how to use show-on-checked for a checkbox field.

Admin: /* Note */ Useful if you're accustomed to PF's show-on-select

2022-10-30T11:10:44Z

Note: Useful if you're accustomed to PF's show-on-select

← Older revision		Revision as of 13:10, 30 October 2022
Line 194:		Line 194:

	===Note===		===Note===
	Form fields that are in a hidden section will not be submitted together with the form!		* Form fields that are in a hidden section will not be submitted together with the form!
	Currently if the AND or OR triggers are wrongly defined, no form will be rendered. It's on the list to be fixed.		* Currently if the AND or OR triggers are wrongly defined, no form will be rendered. It's on the list to be fixed.
			* There is one notable difference between the way FlexForm and Page Forms let you tie multiple selectors to the same selectable area, aside from differences in their choice of attributes. Where PageForms insists that each selectable area has a unique ID and lets you connect it to one or multiple selectors, FlexForm lets you assign one or multiple identifiers (<code>show-on-select-trigger</code>) to each selectable area while insisting that the <code>show-on-select</code> attributes are unique to individual selectors.

	===Links===		===Links===
	Tutorial on show-on-select : https://wikibase-solutions.com/developer-logs/flexform-show-on-select?WSLanguage=en		Tutorial on show-on-select : https://wikibase-solutions.com/developer-logs/flexform-show-on-select?WSLanguage=en

Charlot: /* Links */

2022-09-22T19:49:31Z

Links

← Older revision		Revision as of 21:49, 22 September 2022
Line 198:		Line 198:

	===Links===		===Links===
			Tutorial on show-on-select : https://wikibase-solutions.com/developer-logs/flexform-show-on-select?WSLanguage=en

Charlot: User:Charlot

2022-09-22T13:48:50Z

User:Charlot

ws-class-props
← Older revision		Revision as of 15:48, 22 September 2022
Line 5:		Line 5:
	\|Doc sort order=225		\|Doc sort order=225
	\|Doc target group=User		\|Doc target group=User
			\|Doc synopsis=Show or hide elements based on a form input change
	}}		}}

Charlot: /* Note */

2022-09-02T11:36:16Z

Note

← Older revision		Revision as of 13:36, 2 September 2022
Line 195:		Line 195:
	===Note===		===Note===
	Form fields that are in a hidden section will not be submitted together with the form!		Form fields that are in a hidden section will not be submitted together with the form!
			Currently if the AND or OR triggers are wrongly defined, no form will be rendered. It's on the list to be fixed.

	===Links===		===Links===

Charlot at 11:32, 2 September 2022

2022-09-02T11:32:28Z

@@ Line 36: / Line 36: @@
 '''Example 6''' shows an example of how to use show-on-select when a certain value is found.
 You can use this on e.g. an input field of type text. When a certain text is entered and it contains a predefined value it will trigger the show on select
 ===Example===
@@ Line 126: / Line 132: @@
 	<div show-on-select-trigger="testingId" show-on-select-type="contains::testingValue">
 		<span> Show this when the input value contains to the text: testingValue </span>
 	</div>
 </_form>

Charlot at 11:25, 2 September 2022

2022-09-02T11:25:23Z

@@ Line 31: / Line 31: @@
 Checkboxes can have an additional option called show-on-unchecked. So, in the example, if a checkbox is unchecked it will show test B and hide test A. If the checkbox is checked it wish show test A and hide test B
-'''Example 5''' shows an example of how to use show-on-select when a certain value is used.
+'''Example 5''' shows an example of how to use show-on-select when a certain value is equalled.
-You can use this on e.g. an input field of type text. When a certain text is entered it will trigger the show on select
+You can use this on e.g. an input field of type text. When a certain text is entered and it equals a predefined value it will trigger the show on select
 ===Example===
@@ Line 106: / Line 109: @@
 	<div show-on-select-trigger="testingId" show-on-select-type="equals::testingValue">
 		<span> Show this when the input value is equal to the text: testingValue </span>
 	</div>
 </_form>

Charlot at 11:16, 2 September 2022

2022-09-02T11:16:16Z

← Older revision		Revision as of 13:16, 2 September 2022
Line 40:		Line 40:
	</_form>		</_form>
	</syntaxhighlight>		</syntaxhighlight>
			<hr>
	Example 2 : show-on-select on a select field		Example 2 : show-on-select on a select field
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
Line 62:		Line 62:
	<_input type="text" show-on-select-trigger="testingId2" name="texttest2" value="1" />		<_input type="text" show-on-select-trigger="testingId2" name="texttest2" value="1" />
	</_form>		</_form>
			<hr>
	Example 3 : show-on-checked on a radio button		Example 3 : show-on-checked on a radio button
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
Line 78:		Line 78:
	</div>		</div>
	</_form>		</_form>
			<hr>
	Example 4 : show-on-checked on a checkbox and show-on-unchecked on a checkbox.		Example 4 : show-on-checked on a checkbox and show-on-unchecked on a checkbox.
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">
Line 92:		Line 92:
	<div show-on-select-trigger="test B">test unchecked</div>		<div show-on-select-trigger="test B">test unchecked</div>
	</_form>		</_form>
			<hr>
	Example 5 : show-on-select when a user input equals a predefined value		Example 5 : show-on-select when a user input equals a predefined value
	<syntaxhighlight lang="html">		<syntaxhighlight lang="html">