How to deselect a radio button option?

RE: How to deselect a radio button option?

ericg329 — Tue, 03 Jul 2018 18:31:45 GMT

While I applaud the creativity of a lot of the other solutions people have provided, radio buttons aren't meant to be deselected per web standards. Before utilizing a workaround consider how this will impact end users who are use to utilizing radio buttons on many other web interfaces. Additionally, think of the potential burden on future developers that may need to maintain this behavior and figure out what was done.

I would suggest utilizing a different field type, as you already mentioned.

RE: How to deselect a radio button option?

Mike Schmitt — Mon, 02 Jul 2018 15:34:40 GMT

Sorry to hear you don't have 18.1's features available to use yet. I would also like to point out that the only two features I've listed that you can't do in 17.3 (i believe) are the Side-By-Side Layout and Rich Text Icon. So if you wanted to do something similar, you could probably just use an image field right below the radio button field, and the for the image you could use the a!iconIndicator component (with the "REMOVE" icon), and a link configured in the same way. It wouldn't look QUITE as nice as my original version but it might be pretty good.

RE: How to deselect a radio button option?

ravalik — Mon, 02 Jul 2018 10:51:51 GMT

Hi snehab848 ,

According to me whatever approach you have selected is quite possible and applicable.Multi check box with certain validations allow you to solve the issue.As Mike suggested you can also use the creative approach if it suits to your requirement.

Thanks,
ravalik

RE: How to deselect a radio button option?

snehab848 — Mon, 02 Jul 2018 10:47:34 GMT

Thank you everyone for your valuable suggestions!

We were looking for an approach which will not involve multiple components for our use case since we don't want a bulky code which may impact performance.

However, it seems it is not possible to implement the use case with single component.
But it was nice to learn about new components in Appian 18.x . Thanks!

RE: How to deselect a radio button option?

snehab848 — Mon, 02 Jul 2018 10:24:27 GMT

Thank you Thasneem for coming up with such an interesting solution. We shall keep it in mind when we move over to Appian 18.x.

RE: How to deselect a radio button option?

snehab848 — Mon, 02 Jul 2018 10:06:20 GMT

That is an interesting solution Mike! Currently we are on Appian 17.3. We'll keep your approach in mind when we move over to Appian 18.x. Thanks a lot!

RE: How to deselect a radio button option?

Thasneem Nisa — Fri, 29 Jun 2018 09:10:55 GMT

Hi snehab848

You can try following approach

load(
  local!optionChosen,
  {
    a!richTextDisplayField(
      label: "Choose an option",
      value: {
        a!richTextIcon(
          icon: if(
            local!optionChosen = "Option 1",
            "dot-circle-o",
            "circle-o"
          ),
          link: a!dynamicLink(
            value: "Option 1",
            saveInto: a!save(
              local!optionChosen,
              if(
                local!optionChosen = save!value,
                null,
                save!value
              )
            )
          ),
          color: "SECONDARY",
          linkStyle: "STANDALONE"
        ),
        a!richTextItem(
          text: " Option 1"
        )
      }
    ),
    a!richTextDisplayField(
      value: {
        a!richTextIcon(
          icon: if(
            local!optionChosen = "Option 2",
            "dot-circle-o",
            "circle-o"
          ),
          link: a!dynamicLink(
            value: "Option 2",
            saveInto: a!save(
              local!optionChosen,
              if(
                local!optionChosen = save!value,
                null,
                save!value
              )
            )
          ),
          color: "SECONDARY",
          linkStyle: "STANDALONE"
        ),
        a!richTextItem(
          text: " Option 2"
        )
      }
    )
  }
)

RE: How to deselect a radio button option?

Mike Schmitt — Thu, 28 Jun 2018 16:46:54 GMT

With the advent of Rich Text Links, Rich Text Icons, and the Side-By-Side Layout options, we can probably come up with some creative solutions to this problem now. In the past I always did what some prior commentors suggested and just put a "None" or "N/A" option. But this got me thinking.

What if we used a rich text icon with a dynamic link configured such that it shows up right next to the radio button values?

--->

Here's the code (18.1 required) I came up with for the above:

load(
  local!radioValue,
  
  a!sectionLayout(
    label: "Radio Button",
    contents: {
      a!textField(
        label: "Text",
        value: "asdf"
      ),
      a!sideBySideLayout(
        alignVertical: "BOTTOM",
        items: {
          a!sideBySideItem(
            width: "MINIMIZE",
            item: a!radioButtonField(
              label: "Radio",
              choiceLabels: {"A", "B"},
              choiceValues: {"A", "B"},
              value: local!radioValue,
              saveInto: local!radioValue,
              /*choiceLayout: "COMPACT",*/
              required: false()
            )
          ),
          a!sideBySideItem(
            width: "10X",
            item: a!richTextDisplayField(
              value: a!richtextitem(
                text: a!richtexticon(
                  caption: "Clear Radio Button Value",
                  icon: "REMOVE"
                ),
                link: a!dynamicLink(
                  saveInto: a!save(
                    local!radioValue,
                    null()
                  )
                ),
                linkStyle: "STANDALONE"
              )
            )
          )
        }
      ),
      a!dropdownField(
        label: "Dropdown",
        choiceLabels: {"1", "2"},
        choiceValues: {"1", "2"},
        placeholderLabel: "(Standard Dropdown)"
      )
    }
  )
)

RE: How to deselect a radio button option?

Shubham Aware — Thu, 28 Jun 2018 13:02:55 GMT

Hi snehab848 ,

This also a good approach you can implement.
Nice shwetad.

RE: How to deselect a radio button option?

deviratnamv — Thu, 28 Jun 2018 12:38:15 GMT

Hi snehab,
What you said is absolutely correct, if we want to select radio button option it can't deselect the option, instead you can use checkbox for deselecting the option..

RE: How to deselect a radio button option?

Vinay Kumar Rai — Thu, 28 Jun 2018 11:59:42 GMT

Hi,

Yes you can't deselect the ration button option once selected, you can add a new option e,g, None. along with the other options

and Appian don't allow to disable the options in CheckBox

RE: How to deselect a radio button option?

shwetad — Thu, 28 Jun 2018 11:57:04 GMT

Hi Sneha,

You could use one checkbox and if that is selected then only make radio Button editable, else keep it disabled. And while selecting or deselecting checkbox set the value of radio button to null.

RE: How to deselect a radio button option?

Shanmukha — Thu, 28 Jun 2018 11:56:29 GMT

Hi Sneha,

You are using the better approach(multi check box with validation so that user can only select one.) as per your scenario. If you want to implement it with Radio buttons then you can add another radio button which has value of None this may also resolve your issue.

Thanks..!!!