How to deselect a radio button option?

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

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.

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

 

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

Hi snehab848 ,

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

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

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

 

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!

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.

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!