TYPO3 Core

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

    # 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

    # 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'

    # 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
    renderables:
      -
        type: Page
        identifier: page-1
        label: 'Page 1'
        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"'
                renderingOptions:
                  enabled: false
      -
        type: Page
        identifier: page-2
        label: 'Page 2'
        variants:
          -
            identifier: variant-1
            condition: 'formValues["checkbox-1"] == 1'
            renderingOptions:
              enabled: false
        renderables:
          -
            type: Text
            identifier: text-2
            label: 'Text 2'
      -
        type: SummaryPage
        identifier: summarypage-1
        label: 'Summary step'

    # 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'

    # hiding a form element in certain finishers and on the summary step (needs https://review.typo3.org/#/c/57049/)

    type: Form
    identifier: test
    prototypeName: standard
    label: Test
    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'
        renderables:
          -
            type: Text
            identifier: text-1
            label: 'Text 1'
            variants:
              -
                identifier: hide-1
                renderingOptions:
                  enabled: false
                condition: 'stepType == "SummaryPage" || finisherIdentifier in ["EmailToSender", "EmailToReceiver"]'
          -
            type: Text
            identifier: text-2
            label: 'Text 2'
      -
        type: SummaryPage
        identifier: summarypage-1
        label: 'Summary step'