Hide Fields Based on dropdown value in Magnolia content app

Question

I am developing a content app similar to Tours. In this I have a form that has multiple fields. Now i have a requirement like http://jsfiddle.net/5SArB/1911/ fiddle. I need

Answer 1

This should be your yaml in Magnolia 5.7.

You should use the switchable field combined with composite field:

wide: true
form:
  tabs:
    - name: tabForm
      label: Form registration
      fields:
        - name: username
          label: Name
          fieldType: text
        - name: email
          label: Email
          fieldType: text
        - name: ageConfig
          fieldType: switchable
          label: Age
          selectionType: select
          transformerClass: info.magnolia.ui.form.field.transformer.composite.DelegatingCompositeFieldTransformer
          type: String
          options:
            - name: young
              label: 18 or younger
              value: young
            - name: old
              label: 19 or older
              value: old
          fields:
            - name: young
              fieldType: composite
              label: ''
              layout: vertical
              fields:
                - name: parentName
                  fieldType: text
                  label: Parent name
                - name: parentMail
                  fieldType: text
                  label: Parent email
            - name: old
              fieldType: hidden

actions: !include:/my-project/dialogs-common/actions-block.yaml

This is the "young" case:

This is the "old" case:

Answer 2

You can do this by extending either SwitchableFieldFactory or CompositeFieldFactory and coding desired behaviour there.

HTH,
Jan