How to create a radio button in aem 6 touch dialog

Question

I am having a touch UI component for which I am creating a dialog in AEM 6. I have a requirement to create 2 radio buttons in the touch dialog and if either one of them are selected, the corresponding value of the selected radio button should be displayed. however, I am not understanding how to create the radio button options. I have implemented the same in classic dialog where the xtype=selection and type=radiogroup is used, but I do not understand how to create it in touch dialog

Answer 1

You can use Form Input - Radio . To create a radio button group give all radio buttons the same name. The resourceType of Radio input is /libs/granite/ui/components/foundation/form/radio.

Sample Json of the Nodes :

"hideinnav": {
"jcr:primaryType": "nt:unstructured",
"name": "./hideInNav",
"text": "Hide in Navigation",
"value": "true",
"cq-msm-lockable": "hideInNav",
"sling:resourceType": "/libs/granite/ui/components/foundation/form/radio",
"renderReadOnly": true
},
"showinNav": {
"jcr:primaryType": "nt:unstructured",
"name": "./hideInNav",
"text": "Show in Navigation",
"value": "false",
"cq-msm-lockable": "hideInNav",
"sling:resourceType": "/libs/granite/ui/components/foundation/form/radio",
"renderReadOnly": true
}

Unlike the Classic UI Selection widget where the buttons are set under options node , radio buttons are independent and can be directly used in containers.

Answer 2

Coral UI3 no longer supports individual form/radio. This is now replaced by form/radio group https://helpx.adobe.com/experience-manager/6-4/sites/developing/using/reference-materials/granite-ui/api/jcr_root/libs/granite/ui/components/legacy/coral2/migration.html

In Coral UI3, to create two radio buttons, you can do something like below:

   <radioGroup 
            jcr:primaryType="nt:unstructured"
            name=“./state“
            text=“Select an Option”
            sling:resourceType="granite/ui/components/coral/foundation/form/radiogroup">
            <items jcr:primaryType="nt:unstructured">
                <radioExpanded jcr:primaryType="nt:unstructured"
                    text="Expanded"
                    value="expanded”/>  
                <radioCollapse
                    jcr:primaryType="nt:unstructured"
                    text=“Collapse”
                    value=“collapse”/>
            </items>
        </radioGroup>

Answer 3

Radio button group is not supported in AEM 6 Touch UI. Instead, you could use a dropdown? sling:resourceType="granite/ui/components/foundation/form/dropdown"

Answer 4

Here is a radio group example for CoralUI v1/v2. The radiogroup is optional, the radio widgets on their own will still work. The group is only needed if you want to have a label for the group.

<radioGroup jcr:primaryType="nt:unstructured"
    name="./type"
    text="Fruit"
    required="{Boolean}true"
    sling:resourceType="granite/ui/components/foundation/form/radiogroup"
    renderReadOnly="{Boolean}true">

    <items jcr:primaryType="nt:unstructured">
        <radioApple jcr:primaryType="nt:unstructured"
            name="./fruit"
            text="Apple"
            value="apple"
            cq-msm-lockable="fruit"
            sling:resourceType="granite/ui/components/foundation/form/radio"
            renderReadOnly="{Boolean}true"/>
        <radioPear jcr:primaryType="nt:unstructured"
            name="./fruit"
            text="Pear"
            value="pear"
            cq-msm-lockable="fruit"
            sling:resourceType="granite/ui/components/foundation/form/radio"
            renderReadOnly="{Boolean}true"/>
        <radioDefaultValue jcr:primaryType="nt:unstructured"
            name="./fruit@DefaultValue"
            value="apple"
            sling:resourceType="granite/ui/components/foundation/form/hidden"/>
        <radioDefaultWhenMissing jcr:primaryType="nt:unstructured"
            name="./fruit@UseDefaultWhenMissing"
            value="true"
            sling:resourceType="granite/ui/components/foundation/form/hidden"/>
    </items>
</radioGroup>

NOTE: If you need a default value to be set before you even open the dialog, then you'll need to define it in the template (if it is a page dialog) or for the component.

For a component, to set the default value to apple you would add this in the .content.xml:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          jcr:primaryType="cq:Component"
          jcr:title="Fruit Component"
          componentGroup="My App Group"
          sling:resourceSuperType="foundation/components/parbase">

    <cq:template jcr:primaryType="nt:unstructured" fruit="apple"/>
</jcr:root>

See also:

• http://docs.adobe.com/docs/en/aem/6-0/develop/ref/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/form/radiogroup/index.html
• http://docs.adobe.com/docs/en/aem/6-0/develop/ref/granite-ui/api/jcr_root/libs/granite/ui/components/foundation/form/radio/index.html

NOTE:

If you are developing for AEM 6.3 then you will want the CoralUI3 flavour of all the components, i.e. instead of granite/ui/components/foundation/form/radio you should use granite/ui/components/coral/foundation/form/radio, etc.

For details on migrating to CoralUI 3 see https://helpx.adobe.com/experience-manager/6-3/sites/developing/using/reference-materials/granite-ui/api/jcr_root/libs/granite/ui/components/legacy/coral2/migration.html.