Question

How to combine radio button and text

Forum|Forum|3 years ago
August 24, 2022
7 replies
0 views

Hi Appian Community,

I have added into my interface a radio button below,

It contains radio button, EX: when I choose 'Age', I will can type in text.

In my solution, I try create 2 radio button: one radio button 'Age' + text box and one radio button 'No', but I can not merge two the radio button to one.

How to open the interface again, the options it chooses the correct one selected and the correct data entered into textbox?

Thanks for your help.

stefanhelzle0001

Brainy

a!localVariables(
  local!radio,
  local!age,
  {
    a!sideBySideLayout(
      alignVertical: "MIDDLE",
      items: {
        a!sideBySideItem(
          width: "MINIMIZE",
          item: a!radioButtonField(
            label: "Radio Buttons",
            labelPosition: "COLLAPSED",
            choiceLabels: {"Age"},
            choiceValues: {"AGE"},
            value: if(local!radio = "AGE", "AGE", null),
            saveInto: local!radio,
            choiceLayout: "STACKED",
          )
        ),
        a!sideBySideItem(
          showWhen: local!radio = "AGE",
          item: a!textField(
            label: "Text",
            labelPosition: "COLLAPSED",
            saveInto: {},
            refreshAfter: "UNFOCUS",
            validations: {}
          )
        )
      }
    ),
    a!radioButtonField(
      label: "Radio Buttons",
      labelPosition: "COLLAPSED",
      choiceLabels: {"No"},
      choiceValues: {"NO"},
      value: if(local!radio = "NO", "NO", null),
      saveInto: local!radio,
      choiceLayout: "STACKED",
    )
  }
)

K

khuud0002Author

a!localVariables(
  local!age,
  local!noAge,
  local!age1,
  local!noAge1,
  {
    a!sectionLayout(
      label: "EMPLOYEE ELIGIBILITY",
      labelColor: "#000000",
      contents: {
        a!boxLayout(
          label: "Question 1",
          contents: {
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!radioButtonField(
                    label: "",
                    labelPosition: "ABOVE",
                    choiceLabels: { "Age" },
                    choiceValues: { "Age" },
                    value: if(local!age = "Age", "Age", null),
                    saveInto: {local!age},
                    choiceLayout: "STACKED",
                    validations: {}
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!textField(
                    label: "",
                    labelPosition: "COLLAPSED",
                    refreshAfter: "UNFOCUS",
                    validations: {}
                  )
                ),
                a!sideBySideItem(
                  item: a!textField(
                    label: "",
                    labelPosition: "ABOVE",
                    saveInto: {},
                    refreshAfter: "UNFOCUS",
                    readOnly: true,
                    validations: {}
                  ),
                  width: "8X"
                )
              }
            ),
            a!radioButtonField(
              label: "",
              labelPosition: "COLLAPSED",
              choiceLabels: {"No Age limit for enrollment"},
              choiceValues: {"No Age"},
              value: if(local!noAge = "No Age", "No Age", null),
              saveInto: {local!noAge},
              choiceLayout: "STACKED",
              validations: {}
            )
          },
          style: "STANDARD",
          marginBelow: "STANDARD"
        ),
        a!boxLayout(
          label: "Question 2",
          contents: {
            a!richTextDisplayField(
              labelPosition: "COLLAPSED",
              value: {
                a!richTextItem(
                  text: {
                    "How old?"
                  },
                  size: "STANDARD",
                  style: {
                    "STRONG"
                  }
                )
              }
            ),
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!radioButtonField(
                    label: "",
                    labelPosition: "ABOVE",
                    choiceLabels: { "Age" },
                    choiceValues: { "Age" },
                    value: if(local!age1 = "Age", "Age", null),
                    saveInto: {local!age1},
                    choiceLayout: "STACKED",
                    validations: {}
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!textField(
                    label: "",
                    labelPosition: "COLLAPSED",
                    refreshAfter: "UNFOCUS",
                    validations: {}
                  ),
                  width: "AUTO"
                ),
                a!sideBySideItem(
                  item: a!textField(
                    label: "",
                    labelPosition: "ABOVE",
                    saveInto: {},
                    refreshAfter: "UNFOCUS",
                    readOnly: true,
                    validations: {}
                  ),
                  width: "8X"
                )
              }
            ),
            a!radioButtonField(
              label: "",
              labelPosition: "ABOVE",
              choiceLabels: { "No Minimum Age" },
              choiceValues: { "No" },
              value: if(local!noAge1 = "No", "No", null),
              saveInto: {local!noAge1},
              choiceLayout: "STACKED",
              validations: {}
            )
          },
          style: "STANDARD",
          marginAbove: "NONE",
          marginBelow: "NONE"
        )
  
      }
    )

  }
)

If I choose any radio button, local variable is saved, but it can not refresh. I can not uncheck, so that the options it chooses uncorrectly

stefanhelzle0001

Brainy

When you check my code snippet, you will see that both radio button components use the same locale variable in the saveInto. You use two separate locals.

Sign up

Login with SSO

Login to the community

Login with SSO