How to create a radio button in aem 6 touch dialog - 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

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.

Answer 2

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 3

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 4

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"