This field type creates a vertical set of radio buttons that a user can pick from. When an option is selected, a layout field is revealed which can hold any of the input fields that can normally be placed in a vertical layout.
Field Value
When the page is submitted, the value of the layout will be the value of the selected radio button. Any fields revealed in the layout behave in the same way as fields placed into any of the usual layout fields.
The values of any fields in layouts that haven't been selected are automatically cleared on submit (eg a user picks one radio button, fills out the revealed field, then changes their mind and picks another).
Validation
The field automatically handles all of the show-hide logic and validation.
If a field is "required" it will only become required if the corresponding radio button for the layout has been picked. Similarly, validation functions will only be triggered for revealed fields.
Action Fields
Any Action Fields placed in the layouts will be executed, even if the corresponding radio button hasn't been selected.
Buttons
Placing buttons inside the layouts isn't supported.
Custom Functions
Custom functions can be called using the handlers of other fields using .invokeCustomFieldFn.
syncOptions() - synchronises the visible layouts with the selected button. You may need to call this if updating the value of the layout dynamically
Example
To create a Radio Button Accordion:
- Add the field to your form
- Enter options for the radio buttons
- Add additional fields into the new layout fields beneath each option
Download the example: Radio Button Accordion Example (ZIP, 2KB)
Properties
| Label | Description | Type Name |
|---|---|---|
| Label | The label for this field | LABEL |
| Show Border | Whether to show a border around this field or not. This property adds/removes a class on the field. The styling itself is controlled by the site's stylesheet | SHOWBORDER |
| Show Label | Whether to show the label for this field or not. This property adds/removes a class on the field's label element. The styling itself is controlled by the site's stylesheet | SHOWLABEL |
| Hint | Additional information displayed alongside the field to assist the user in completing it. The value of another field can be used by adding the field's name between # characters. See Common Field Properties for more information | HINT |
| Default | A default value for the field | DEFAULT |
| Required | Whether or not the field is required to have a value to pass validation | REQUIRED |
| Error Message | The error message that will be displayed if this field fails its validation | ERRMSG |
| Error Message Function | A function that can be used to override the default error message. You can return a different message for each error type. The message can include the value of another field can be used by adding the field's name between # characters. See Error Message Functions for more information. This field has the following error types:
| ERRMSGFUNC |
| Searchable | Whether this field's value should be indexed by the search (the object collection if using the database save action and/or workflow process collection if starting a workflow process). This property is ignored if an External Type is specified for the form. In this case, the ability to search is determined by the searchable property of the type itself | SEARCHABLE |
| Options | The values to be included in the group. Use the popup editor provided to set the Value and Display value for each radio button in the group. These values may be hard-coded (fixed) or dynamically loaded from a datasource. Once you have entered some options, the forms designer will reveal layout fields within this field that you can drop other fields into. | OPTIONS |
| Options Function | A server-side JavaScript function that can manipulate the options list at the time the field HTML is generated This function will be executed server-side only. For example the following will replace any fixed or database query options with 10 numbered options: function (helper, optionData) { | OPTIONSFUNC |
| Validation Function | A JavaScript function that can be used to provide custom field validation whenever the field value changes or the form is submitted. This function will be executed client-side, provided JavaScript is enabled in the browser, and repeated server-side | VALFUNC |
| Default Function | A JavaScript function that can be used to calculate the default field value. This function is executed server-side when the field HTML is generated and is useful when the DEFAULT property is insufficient | DEFFUNC |
| Handlers | A JavaScript function that is executed client-side whenever the page loads, or the field value changes. This function is useful for modifying the values of other fields based on an entered value | HANDLERS |
| Read Only | Display the field as read only | READONLY |
| Validation | This property provides an extra level of validation by checking that the selected value is one that was present in the field's optionData when the field was first generated. None - No additional validation is performed Validate - When the field is generated its options are saved in a server-side variable. The submitted value is checked against this list of options and will fail validation if not present | VALIDATION |
| Additional Styling Modifier | An optional CSS modifier for the field. See Common Field Properties for an example | ADDITIONALSTYLINGMODIFIER |
| Described By | Links this form field to another element on the page that provides a more detailed description or instructions. Enter the name of a Guidance Text or HTML field that describes this field. The text in that field will be read out by screen readers whenever this field receives focus. See Common Field Properties for more information | DESCRIBEDBY |
| Documentation | Add documentation to your field to help explain any complex functionality to future users. You might include information on what the field does and how it relates to other fields on the form. Notes added here are only ever visible in the Forms Designer, they can be searched for, viewed and downloaded from the action panel. See Common Field Properties for an example | DOCUMENTATION |
