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