Designing Dynamic Forms

Hello folks,

I have the need to design some dynamic forms:

  • If a user chooses a different option on a dropdown the form fields will change

Out of the box I do not see a way to do this. Can anyone give me a suggestion on how to tackle this project(s)?

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    Any examples of what way you would be expecting the form fields to change?  Just in general.

  • In general if I pick a different input on a dropdown field, the form might change on the same section or in different sections with new text fields and dropdowns and radio buttons.

  • +1
    Certified Lead Developer
    in reply to antoniom0004

    A simple example to try:

    a!localVariables(
      local!dropdownValue: tointeger(null()),
      local!orangeChoiceValue,
      local!appleChoiceValues,
      
      local!dropDownChoices: {
        {
          id: 1,
          label: "Apples"
        },
        {
          id: 2,
          label: "Oranges"
        }
      },
      
      a!formLayout(
        label: "Dynamic Form Example",
        contents: {
          a!dropdownField(
            label: "Select a Fruit",
            choiceLabels: local!dropDownChoices.label,
            choiceValues: local!dropDownChoices.id,
            value: local!dropdownValue,
            saveInto: {
              local!dropdownValue,
              
              /* revert the subsequent dropdown values here when the main dropdown is changed */
              a!save(
                local!appleChoiceValues,
                {}
              ),
              a!save(
                local!orangeChoiceValue,
                tointeger(null())
              )
            },
            placeholderLabel: "--select one--"
          ),
          
          a!sectionLayout(
            label: "Apple Selection",
            showWhen: local!dropdownValue = 1,
            contents: {
              a!checkboxField(
                label: "Select Varieties",
                choiceLabels: {
                  "Golden Delicious",
                  "Red Delicious",
                  "Granny Smith"
                },
                choiceValues: {1, 2, 3},
                value: local!appleChoiceValues,
                saveInto: {
                  local!appleChoiceValues
                }
              )
            }
          ),
          a!sectionLayout(
            label: "Orange Features",
            showWhen: local!dropdownValue = 2,
            contents: {
              a!dropdownField(
                label: "Favorite Orange Product",
                choiceLabels: {
                  "Orange Juice",
                  "Orange Peel",
                  "Orange Slices",
                  "Just Oranges"
                },
                choiceValues: {1, 2, 3, 4},
                value: local!orangeChoiceValue,
                saveInto: {
                  local!orangeChoiceValue
                },
                placeholderLabel: "--Select--"
              )
            }
          )
        }
      )
    )

  • Everything needs to be hard coded, no easy way out on this one... I have quite a few field changes... 

Reply Children