dialogaemsightlyhtl

How to create a radio button in aem 6 touch dialog


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 dialogenter image description here


Solution

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