How to combine radio button and text

RE: How to combine radio button and text

Stefan Helzle — Tue, 30 Aug 2022 08:33:46 GMT

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

RE: How to combine radio button and text

khuuduong — Tue, 30 Aug 2022 07:47:55 GMT

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

RE: How to combine radio button and text

Stefan Helzle — Tue, 30 Aug 2022 06:24:06 GMT

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

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

RE: How to combine radio button and text

khuuduong — Tue, 30 Aug 2022 02:08:14 GMT

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

RE: How to combine radio button and text

Stefan Helzle — Wed, 24 Aug 2022 09:31:03 GMT

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.

RE: How to combine radio button and text

khuuduong — Wed, 24 Aug 2022 09:26:57 GMT

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

RE: How to combine radio button and text

Stefan Helzle — Wed, 24 Aug 2022 06:32:18 GMT

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