Project

General

Profile

Feature #84133

Updated by Ralf Zimmermann almost 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'

Back