Layout fields hold other fields. They can also have borders, labels and hints. The vertical accordion layout expands and collapses using two CSS classes,
Custom Functions
Custom functions can be called from the handlers of other fields using .invokeCustomFieldFn.
expandAccordion(showAnimation) - call this function to expand the accordion.showAnimation - boolean.true to play the animationcollapseAccordion(showAnimation) - call this function to collapse the accordion. showAnimation - boolean.true to play the animationgetState - check the current state of the accordion. Returns "EXPANDED" or "COLLAPSED"
Animation
By default the accordion expands and collapses with an animation. You can expand or collapse the field without the animation when calling its custom function. For example, the following could be added to a script button to open the accordion.
function(helper) {
helper.invokeCustomFieldFn("ACCORDION", "expandAccordion", false);
}
Properties
| Label | Description | Type Name |
|---|---|---|
| Label | The label for this field. Leave this property blank to not output a label | 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 | Sets when the container and the fields within it should be output. The following options are available: Always - the HTML will always be output. Form - the HTML will only be output when the page HTML is being rendered on the site (in 'standard' mode). Summary (Email) - the HTML will only be output when the page HTML is rendered in read only mode, without controls. For example, in emails | SHOW |
| Collapsed | Whether the layout field is collapsed or expanded by default | COLLAPSED |
| Collapsed Function | A server-side JavaScript function that can dynamically set the collapsed/expanded state of the accordion. Return "collapsed" or "expanded" to override the default in the Collapsed property | COLLAPSEDFUNC |
| 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 |
| Hint Visibility | Whether the field hint is visible when the layout is collapsed | HINTVISIBILITY |
| Additional Styling Modifier | An optional CSS modifier for the field. See Common Field Properties for an example | ADDITIONALSTYLINGMODIFIER |
| 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 |
Last modified on 9 March 2023
Share this page
