How to combine radio button and text

Certified Associate Developer

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.

  Discussion posts and replies are publicly visible

Parents
  • 0
    Certified Lead Developer

    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",
        )
      }
    )

  • 0
    Certified Associate Developer
    in reply to Stefan Helzle

    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

Reply
  • 0
    Certified Associate Developer
    in reply to Stefan Helzle

    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

Children
  • 0
    Certified Lead Developer
    in reply to khuuduong

    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.

  • 0
    Certified Associate Developer
    in reply to Stefan Helzle

    Hi guy, 

    I do follow your code snippet and success.

    But I have a new issue,

    If I want save database, I can't save correct value that I enter text box. 

    In assumption, local!data is a field in database will save text box

    This my snippet code below

      a!localVariables(
        local!child,
        local!data,
        a!boxLayout(
          label: "CHILD BENEFIT AMOUNT OF BENEFIT",
          contents: {
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!radioButtonField(
                    label: "",
                    labelPosition: "ABOVE",
                    choiceLabels: { "Benefit amount: " },
                    choiceValues: { "Benefit amount" },
                    value: if(
                      local!child = "Benefit amount",
                      "Benefit amount",
                      null
                    ),
                    saveInto: local!child,
                    choiceLayout: "STACKED",
                    validations: {}
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!textField(
                    label: "",
                    labelPosition: "COLLAPSED",
                    saveInto: a!save(
                      if(local!child = "Benefit amount", local!data,""),
                      save!value
                    ),
                    refreshAfter: "UNFOCUS",
                    showWhen: true,
                    disabled: if(
                      local!child = "Benefit amount",
                      false,
                      true
                    ),
                    validations: {}
                  ),
                  width: "MINIMIZE"
                )
              }
            ),
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!radioButtonField(
                    label: "",
                    labelPosition: "ABOVE",
                    choiceLabels: { "Other:" },
                    choiceValues: { "Other" },
                    value: if(
                      local!child = "Other",
                      "Other",
                      null
                    ),
                    saveInto: local!child,
                    choiceLayout: "STACKED",
                    validations: {}
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!textField(
                    label: "",
                    labelPosition: "COLLAPSED",
                    value: local!data,
                    saveInto: a!save(
                      if(
                        local!child = "Other",
                        local!data,
                        ""
                      ),
                      save!value
                    ),
                    refreshAfter: "UNFOCUS",
                    readOnly: false,
                    disabled: if(
                      local!child= "Other",
                      false,
                      true
                    ),
                    validations: {}
                  ),
                  width: "MINIMIZE"
                )
              }
            )
          },
          style: "STANDARD",
          marginBelow: "STANDARD"
        )
      )
    

  • 0
    Certified Lead Developer
    in reply to khuuduong

    I do not really understand your issue. Please explain in more detail.

    Your "Benefit Amount" textField is missing the value parameter.

  • 0
    Certified Associate Developer
    in reply to Stefan Helzle

    Yes, my "Benefit Amount" textField is missing the value parameter which is "value" parameter.

    I will explain my issue in more detail.

    Both textField is used to save a same value

    When I choose radioButton Benefit amount, enter value for textField next to it is :123

    If I choose another radioButton (Other), textField next to must is blank, but it's value: 123

  • 0
    Certified Lead Developer
    in reply to khuuduong

    a!localVariables(
      local!child,
      local!data,
      a!boxLayout(
        label: "CHILD BENEFIT AMOUNT OF BENEFIT",
        contents: {
          a!sideBySideLayout(
            items: {
              a!sideBySideItem(
                item: a!radioButtonField(
                  label: "",
                  labelPosition: "ABOVE",
                  choiceLabels: { "Benefit amount: " },
                  choiceValues: { "Benefit amount" },
                  value: if(
                    local!child = "Benefit amount",
                    "Benefit amount",
                    null
                  ),
                  saveInto: local!child,
                  choiceLayout: "STACKED",
                  validations: {}
                ),
                width: "MINIMIZE"
              ),
              a!sideBySideItem(
                item: a!textField(
                  label: "",
                  labelPosition: "COLLAPSED",
                  value: if(local!child = "Benefit amount", local!data,""),
                  saveInto: a!save(
                    if(local!child = "Benefit amount", local!data,""),
                    save!value
                  ),
                  refreshAfter: "UNFOCUS",
                  showWhen: true,
                  disabled: if(
                    local!child = "Benefit amount",
                    false,
                    true
                  ),
                  validations: {}
                ),
                width: "MINIMIZE"
              )
            }
          ),
          a!sideBySideLayout(
            items: {
              a!sideBySideItem(
                item: a!radioButtonField(
                  label: "",
                  labelPosition: "ABOVE",
                  choiceLabels: { "Other:" },
                  choiceValues: { "Other" },
                  value: if(
                    local!child = "Other",
                    "Other",
                    null
                  ),
                  saveInto: local!child,
                  choiceLayout: "STACKED",
                  validations: {}
                ),
                width: "MINIMIZE"
              ),
              a!sideBySideItem(
                item: a!textField(
                  label: "",
                  labelPosition: "COLLAPSED",
                  value: if( local!child = "Other", local!data, ""),
                  saveInto: a!save(
                    if(
                      local!child = "Other",
                      local!data,
                      ""
                    ),
                    save!value
                  ),
                  refreshAfter: "UNFOCUS",
                  readOnly: false,
                  disabled: if(
                    local!child= "Other",
                    false,
                    true
                  ),
                  validations: {}
                ),
                width: "MINIMIZE"
              )
            }
          )
        },
        style: "STANDARD",
        marginBelow: "STANDARD"
      )
    )