Feature #84133
Updated by Ralf Zimmermann over 6 years ago
Variants allow you to change properties of a form element.
Variants can be made under conditions.
This makes it possible to manipulate form element values, validator options, and finisher options based on conditions.
The allows among other things:
* translation of form element values depending on the frontend language
* set and remove validators of one form element depending on the value of another form element
* hide entire pages depending on the value of a form element
* set finisher values depending on the value of a form element
* hiding a form element in certain finishers and on the summary page
* and much more
This feature implements variants for frontend rendering and the ability to define variants in the formDefinition.
The implementation to define variants in the form editor is done in a separate patchset.
Examples
<pre>
# translation of form element values depending on the frontend language
type: Form
identifier: test
prototypeName: standard
label: DE
renderingOptions:
submitButtonLabel: Abschicken
variants:
-
identifier: language-variant-1
condition: 'siteLanguage.getLocale() == "en_US.UTF-8"'
label: EN
renderingOptions:
submitButtonLabel: Submit
renderables:
-
type: Page
identifier: page-1
label: DE
renderingOptions:
previousButtonLabel: 'zurück'
nextButtonLabel: 'weiter'
variants:
-
identifier: language-variant-1
condition: 'siteLanguage.getLocale() == "en_US.UTF-8"'
label: EN
renderingOptions:
previousButtonLabel: 'Previous step'
nextButtonLabel: 'Next step'
renderables:
-
type: Text
identifier: text-1
label: DE
properties:
fluidAdditionalAttributes:
placeholder: Platzhalter
variants:
-
identifier: language-variant-1
condition: 'siteLanguage.getLocale() == "en_US.UTF-8"'
label: EN
properties:
fluidAdditionalAttributes:
placeholder: Placeholder
</pre>
<pre>
# set validators of one form element depending on the value of another form element
type: Form
identifier: test
label: test
prototypeName: standard
renderables:
-
type: Page
identifier: page-1
label: Step
renderables:
-
defaultValue: ''
type: Text
identifier: text-1
label: 'Email address'
variants:
-
identifier: variant-1
condition: 'formValues["checkbox-1"] == 1'
properties:
fluidAdditionalAttributes:
required: 'required'
validators:
-
identifier: NotEmpty
-
identifier: EmailAddress
-
type: Checkbox
identifier: checkbox-1
label: 'Subscribe to newsletter'
</pre>
<pre>
# hide entire steps (form pages) depending on the value of a form element (needs https://review.typo3.org/#/c/57049/)
type: Form
identifier: test
prototypeName: standard
label: Test
renderingOptions:
submitButtonLabel: Submit
renderables:
-
type: Page
identifier: page-1
label: 'Page 1'
renderingOptions:
previousButtonLabel: 'Previous step'
nextButtonLabel: 'Next step'
renderables:
-
type: Text
identifier: text-1
label: 'Text 1'
-
type: Checkbox
identifier: checkbox-1
label: 'Skip page 2'
variants:
-
identifier: hide-1
condition: 'stepType == "SummaryPage"'
type: 'CurrentStepType'
compareValue: 'SummaryPage'
renderingOptions:
enabled: false
-
type: Page
identifier: page-2
label: 'Page 2'
renderingOptions:
previousButtonLabel: 'Previous step'
nextButtonLabel: 'Next step'
variants:
-
identifier: variant-1
condition: 'formValues["checkbox-1"] == 1'
type: FieldValue
formElementIdentifier: checkbox-1
compareValue: '1'
renderingOptions:
enabled: false
renderables:
-
type: Text
identifier: text-2
label: 'Text 2'
-
type: SummaryPage
identifier: summarypage-1
label: 'Summary step'
renderingOptions:
previousButtonLabel: 'Previous step'
nextButtonLabel: 'Next step'
</pre>
<pre>
# set finisher values depending on the application context
type: Form
identifier: test
prototypeName: standard
label: Test
renderingOptions:
submitButtonLabel: Submit
finishers:
-
identifier: Confirmation
options:
message: 'Thank you'
variants:
-
identifier: variant-1
condition: 'applicationContext matches "#Production/Local#"'
finishers:
-
identifier: Confirmation
options:
message: 'ouy knahT'
renderables:
-
type: Page
identifier: page-1
label: 'Page 1'
renderingOptions:
previousButtonLabel: 'Previous step'
nextButtonLabel: 'Next step'
</pre>
<pre>
# hiding a form element in certain finishers and on the summary step
type: Form
identifier: test
prototypeName: standard
label: Test
renderingOptions:
submitButtonLabel: Submit
finishers:
-
identifier: EmailToReceiver
options:
subject: Testmail
recipientAddress: tritum@example.org
recipientName: 'Test'
senderAddress: tritum@example.org
senderName: tritum@example.org
renderables:
-
type: Page
identifier: page-1
label: 'Page 1'
renderingOptions:
previousButtonLabel: 'Previous step'
nextButtonLabel: 'Next step'
renderables:
-
type: Text
identifier: text-1
label: 'Text 1'
variants:
-
identifier: hide-1
enabled: false
condition:
type: Or
conditions:
-
type: 'CurrentStepType'
compareValue: 'SummaryPage'
-
type: 'CurrentFinisherIdentifier'
operator: In
compareValue: ['EmailToSender', 'EmailToReceiver']
-
type: Text
identifier: text-2
label: 'Text 2'
-
type: SummaryPage
identifier: summarypage-1
label: 'Summary step'
renderingOptions:
previousButtonLabel: 'Previous step'
nextButtonLabel: 'Next step'