This field type creates a vertical set of checkboxes that a user can pick from. When options are selected, layout fields are 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 accordion will be the value of the selected checkbox(es). This is a string with a comma separated list of the selected checkbox values in the same way as the Checkbox Group field.
Any input 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 checkbox, 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 for you.
If a field in a layout is "required" it will only become required when the corresponding checkbox for the layout has been picked (ie when it gets shown). 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 checkbox 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 checkboxes. You may need to call this if updating the value of the layout dynamically
Example
To create a Checkbox Accordion:
- Add the field to your form
- Enter options for the checkboxes
- Add additional fields into the new layout fields beneath each checkbox
Download the example: Checkbox Accordion (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 style sheet | 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 set of checkboxes. The value of another field can be used by adding the field's name between # characters. See Common Field Properties for more information | HINT |
| Minimum | The minimum number of checkboxes that must be selected. By default no minimum is set | MINREQUIRED |
| Maximum | The maximum number of checkboxes that may be selected | MAXREQUIRED |
| Default | A default value for the field. Set a comma-separated list of the checkboxes (their values rather than display values) which should be selected by default. If the Select All option is chosen, all checkboxes will be selected by default | DEFAULT |
| 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 checkbox options to be displayed in the group. Use the popup editor to set the value and display value for each checkbox in the group. The value is what is submitted with the form, the display value what the user sees. Hard-coded values can be entered using the grid provided on the "Fixed" tab of the popup editor. Alternatively, they can be supplied as comma-separated values (value,display) via the "Fixed (CSV)" tab, with each row representing a single checkbox. Dynamically loaded values are set via the "Datasource" tab of the popup editor. Typically, specifying the table, value, display and order by column names in the boxes provided will generate a suitable query. A custom query can be entered by expanding the "Advanced" section; it will use any names set in the above boxes to generate a starting query. This custom query should set the value into a "DataValue" column, and the display value into a "DataDisplay" column. For example: SELECT ValueColName as DataValue, DisplayColName as DataDisplay FROM TableName ORDER BY OrderByColName ASC Note that as options are stored as a comma separated list, the values cannot have commas in them. | 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 you can use to calculate the starting field value. This function is executed server-side when the field HTML is generated. See Common Field Properties for an example | DEFFUNC |
| Handlers | A JavaScript function that is executed browser-side whenever the page loads or the field value changes. See Common Field Properties for an example | 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(s) 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 |
