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... 

  • 0
    Certified Lead Developer
    in reply to antoniom0004

    The example I posted is overly simplified (basically what I could whip up in 5 minutes of my off time) but the same principles can be applied to scale it up to something dramatically more complex.  Can you clarify what you mean by "everything needs to be hard coded", though?

Reply Children