Things have been pretty busy recently so I haven't been blogging as much as I'd like. After working through the setting up of Adobe CQ radio buttons in a dialog with two colleagues in one day and finding no good guides after a quick Google search, I decided I needed to post this guide.
Setting up radio buttons in a dialog is actually pretty easy once you know what properties you need set. To start you need a component with a dialog that has a cq:WidgetCollection child named "items" as shown below. If you're not quite sure how to get to this point, you may want to start somewhere like here
Below the items node create a node of type cq:Widget and give it a name descriptive of the field for which the radio buttons will be used. It is named test in the image below.
Next add the following properties to this node:
- fieldLabel - The label you want to appear next to your radio button group
- name - The variable name that will store the radio button selection within the JCR
- type - radiogroup
- xtype - selection
After you're done, the properties should look similar to this.
Additional properties such as fieldDescription and defaultValue can be added as well but those listed above are required, in my opinion, as a bare minimum for the dialog to be functional. Technically it would still work without the fieldLabel but the author would lack an indicator as to what they're selecting.
Below the cq:Widget node with the descriptive field name (test in my example), create a node named "options" with a type cq:WidgetCollection. It is important for the name to be options, otherwise the radio button values won't display. No additional properties need to be added to this node. Your structure should now look like this:
Below the options node you will create a cq:Widget node for each choice for your radio button. Each node should have a descriptive name and the following properties:
- text - The label that appears next to the radio button
- value - The value that will be returned if this radio button is selected.
Upon completion your node structure and properties should look similar to this:
If the above instructions are followed, you should have a dialog like this:
Pulling the value of the radio button is done like most other dialog values with something along the lines of <%String testValue = properties.get("testvalue", "");%> if done in the JSP.
The same process outline above can be used to create checkboxes, drop-down selection, or combo-boxes by replacing the value of type from "radiogroup" to "checkbox", "select", or "combobox" respectively.
Troubleshooting potential issues
The dialog won't open
Double check the node structure paying particular attention to jcr:primaryType. Ensure it follows the following:
The fieldLabel/fieldDescription are visible but there are no radio buttons.
- items (jcr:primaryType - cq:WidgetCollection)
- descriptiveNode (jcr:primaryType - cq:Widget, type - radiogroup, xtype - selection)
- options (jcr:primaryType - cq:WidgetCollection)
- radiobutton1 (jcr:primaryType - cq:Widget)
- radiobutton2 (jcr:primaryType - cq:Widget)
- etc., etc. (jcr:primaryType - cq:Widget)
Ensure that the cq:WidgetCollection node holding your radio button choices is named "options" (no quotes). Any deviations from this name will cause the radio buttons to not appear.
The defaultValue is set but the value isn't being used in my logic.
First try opening the dialog and seeing if the button indicated as the default is highlighted. It seems that the defaultValue only selects it upon first accessing the dialog. In order to "lock in" the value, you have to actually accept the value by clicking OK on the dialog. Adding listeners doesn't seem to change this behavior. If the defaultValue is selected and no radio button is selected upon opening the dialog, double check that the defaultValue being set matches the value in the "value" property on the radio button choice node and not the name of the node.