Radio button value persists but not retrieved in touch UI dialog | Community
Skip to main content
A
angthefire
Level 2
November 8, 2017

Radio button value persists but not retrieved in touch UI dialog

  • November 8, 2017
  • 5 replies
  • 15791 views

I have a set of radio buttons (top, center and bottom). My requirement is such that I have used the property "checked" as true to show "center" as the selected one when the component is dragged and dropped on the page.

If I open the dialog, selects the radio button "top" and click submit, I am getting the value as "top" in my html page. But, if I reopen the dialog, the "center" button is selected instead of "top".

As per requirement, I can't change the order of radio button as well as default selection.

    5 replies

    smacdonald2008
    smacdonald2008
    Level 10
    November 8, 2017

    If you look at docs - you can set default - Radio — Granite UI 1.0 documentation

    Have you tried that?

    A
    angthefireAuthor
    Level 2
    November 8, 2017

    Hi smacdonald2008,

    Thanks for the reply.

    The issue here is not with setting the default value. Let me try to explain the issue with the help of some snapshots.

    The above snapshot shows the selection of "center" radio button (which I achieved via checked(boolean) property).

    I selected the "Top" radio button and clicked submit.

    Now if I reopen the dialog, I see the following:

    I hope the question is more clear than before.

    Thanks

    smacdonald2008
    smacdonald2008
    Level 10
    November 8, 2017

    You see that because it has the prop checked. Therefore each time you open a dialog - the checked property is used, This would be the same for any form that has a radio group and one radio option is set as default. As a result, each time an author opens the dialog and wants another value, they will have to select either Top or Bottom.

    edubey
    edubey
    Level 10
    February 12, 2018

    Below is the structure which I used and work. You can refer

    {
    "jcr:primaryType": "nt:unstructured",
    "personalyes": {
    "jcr:primaryType": "nt:unstructured",
    "name": "./myValue",
    "text": "Yes",
    "value": "yes",
    "sling:resourceType": "granite/ui/components/foundation/form/radio"
    },
    "personalno": {
    "jcr:primaryType": "nt:unstructured",
    "name": "./myValue",
    "text": "No",
    "value": "no",
    "sling:resourceType": "granite/ui/components/foundation/form/radio"
    },
    "defaultvalue": {
    "jcr:primaryType": "nt:unstructured",
    "name": "./myValue@DefaultValue",
    "value": "no",
    "sling:resourceType": "granite/ui/components/foundation/form/hidden"
    },
    "defaultwhenmissing": {
    "jcr:primaryType": "nt:unstructured",
    "name": "./myValue@UseDefaultWhenMissing",
    "value": "true",
    "sling:resourceType": "granite/ui/components/foundation/form/hidden"
    }
    }
    anelem1760873
    anelem1760873
    Level 4
    May 15, 2018

    Hi Guys,

    Has anyone find the solution for this, am also facing the same issue.

    Thanks

    arunpatidar
    Community Advisor
    arunpatidarCommunity Advisor
    Community Advisor
    May 15, 2018

    I used coral3 radio granite/ui/components/coral/foundation/form/radiogroup

    working for me as expecting without adding extra node/property

    Arun Patidar
    Rajalakshmi
    Rajalakshmi
    Level 2
    October 23, 2020

    Hi @arunpatidar , 

    This solution works fine but it causes another issue, "vertical {Boolean} false" property is not working for coral radio button. Can you help me in this.

    Thanks.

      A
      anirudh_sharma1
      June 26, 2018

      As per the documentation - RadioGroup — Granite UI 1.0 documentation, you can try the following -

      <testRadioGroup
           jcr:primaryType="nt:unstructured"
           sling:resourceType="granite/ui/components/foundation/form/radiogroup"
           ignoreData="{Boolean}false"
           text="Test Radio"
           vertical="{Boolean}true">
           <items jcr:primaryType="nt:unstructured">
              <option1
                 jcr:primaryType="nt:unstructured"
                 sling:resourceType="granite/ui/components/foundation/form/radio"
                 checked="{Boolean}true"
                 name="./testRadio"
                 text="Option 1"
                 value="option1"/>
              <option2
                 jcr:primaryType="nt:unstructured"
                 sling:resourceType="granite/ui/components/foundation/form/radio"
                 name="./testRadio"
                 text="Option 2"
                 value="option2"/>
           </items>
      </testRadioGroup>

      I tested this on AEM 6.4 and it is working fine for me. The trick has been done by the ignoreData property. Happy coding

      A
      Akash_Ramchanda
      July 11, 2018

      Hi Anirudh,

      Can you set the checked property on the second option and test the same.

      We are facing the same issue and looking for a solution for it ASAP.

      We are still using 6.2 and I am sure that AEM version has nothing to do with it because the granite version is the same.

      M
      MaheshKPati
      Level 2
      May 23, 2024

      Did you get the solution?
      I am also facing the same problem. For new component with the coral radio group , the checked property is reflecting properly. But for existing component there is no default check. 

      kenccwong
      Adobe Employee
      kenccwongAdobe Employee
      Adobe Employee
      December 14, 2018

      It looks like /libs/granite/ui/components/foundation/form/radio/radio.jsp is not following the specification correctly. What it does is first checks if "checked" property is available, if not available then it will check if "ignoreData" is set to false in the parent radio group.

      Workaround is to create an overlay and add an additional check to see if a value is set.

          if (cfg.get("checked", String.class) != null && val.getContentValue(name) == "") {
              // providing "checked" in configuration results in ignoring content data
              attrs.addChecked(cfg.get("checked", false));
          } else if (!cfg.getInherited("ignoreData", false)) {
              // mark checked if content value equals config value
              attrs.addChecked(val.getContentValue(name).equals(value));
          }
        S
        sindhug18447691
        March 24, 2020

        this worked for  /libs/granite/ui/components/foundation/form/radio/radio.jsp.

        but is there anything when we use /libs/granite/ui/components/coral/foundation/form/radiogroup in aem 6.4.

        Terms & ConditionsAccessibility statement

        Loading footer...