sc-panel-collapse
This document is a user guide for the sc-panel-collapse component release version 7.1.5.
1 Purpose
sc-panel-collapse is used to place a collapsible panel field on a form. Collapsible panels allow users to expand and collapse the panel in order to show or hide the Formbird components wrapped inside the panel (i.e. show or hide the panel content). Collapsible panels can simplify a form by hiding the panel content until it is needed.
Defining a collapsible panel for placement on a form requires:
- A
sc-panel-collapse
definition to open panel wrapping . - followed by the definitions of the Formbird components to be wrapped inside the panel (i.e. the panel content) .
- followed by a
sc-panel-collapse
definition to close panel wrapping.
When a panel is collapsed:
- The panel heading is visible showing the panel name and the panel "Expand" icon
- The panel content is hidden.
- Clicking anywhere on the panel heading will expand the panel and show the panel content.
When a panel is expanded:
- The panel heading is visible showing the panel name and the panel "Collapse" icon
- The panel content is shown.
- Clicking anywhere on the panel heading will collapse the panel and hide the panel content.
The sc-panel-collapse definition provides fields for setting the properties of the collapsible panel on the form and is fully described below.
2 Definition
sc-panel-collapse is defined by a set of name/value pair fields consisting of:
- Required system fields
- Required customizable fields
- Optional customizable fields
Note:
- Default values for fields described in the tables below are shown in bold text.
2.1 Required System Fields
Note:
The required system fields in the table below need to be specified in the sc-panel-collapse
definition that opens panel wrapping and in the sc-panel-collapse
definition that closes panel wrapping.
Field | Valid Values | Description |
---|---|---|
componentName | sc-panel-collapse | The component name. Example: "componentName": "sc-panel-collapse" |
2.2 Required Customizable Fields
Note:
The required customizable fields in the table below need to be specified in the sc-panel-collapse
definition that opens panel wrapping and in the sc-panel-collapse
definition that closes panel wrapping.
Field | Valid Values | Description |
---|---|---|
name | Any value written in camel case. | Defines the name of the sc-panel-collapse field in the document and database. Example: `"name": "ScPanelCollapseTypicalDefinition" |
wrapAction | open | Open the wrapping of one of more Formbird components in a panel. Example: "wrapAction": "open" |
close | Close the wrapping of one of more Formbird components in a panel. Example: "wrapAction": "close" |
2.3 Optional Customizable Fields
Note:
Except for the wrapHtmlType
field, the optional customizable fields in the table below would only need be specified in the sc-panel-collapse
definition that opens panel wrapping. Whereas thewrapHtmlType
field would need to be specified in the sc-panel-collapse
definition that opens panel wrapping and in the sc-panel-collapse
definition that closes panel wrapping.
Field | Valid Values | Description |
---|---|---|
enabled | false | Disables the panel's "Expand/Collapse" button. A Stop icon appears on mouseover of the panel's "Expand/Collapse" button. Example: "enabled": false Note: Changing the enabled state of the panel does not flow through to the components wrapped inside the panel i.e. the enabled state of each component wrapped inside the panel is set by their respective enabled fields. |
true | Default value. Enables the panel's "Expand/Collapse" button. A Stop icon does not appear on mouseover of the panel's "Expand/Collapse" button. |
|
fullWidth | true | The collapsible panel field displays full width on the form."fullWidth": true |
false | Default value. The collapsible panel field does not display full width on the form. |
|
label | Any value | Defines what the panel heading is to display as the name of the collapsible panel field on the form. Example: "label": "sc-panel-collapse Typical Definition" |
undefined | Default value. Panel heading displays 'undefined' as the name of the collapsible panel field on the form. |
|
visible | false | The collapsible panel field is not visible on the form. As the panel is hidden from view, all components wrapped inside the panel are also hidden from view. Example: "visible": false Note: Changing the visible state of the panel does not flow through to the components wrapped inside the panel i.e. the visible state of each component wrapped inside the panel is set by their respective visible fields. |
true | Default value. The collapsible panel field is visible on the form. |
|
wrapClass | Defines the style of the collapsible panel (e.g. panel heading text and background colours) | |
panel-primary | Panel heading colours: white text, dark cyan background. Example: "wrapClass": "panel-primary" |
|
panel-success | Panel heading colours: white text, green background. Example: "wrapClass": "panel-success" |
|
panel-info | Panel heading colours: white text, light sky blue background. Example: "wrapClass": "panel-info" |
|
panel-warning | Panel heading colours: white text, coral background. Example: "wrapClass": "panel-warning" |
|
panel-danger | Panel heading colours: white text, orange red background. Example: "wrapClass": "panel-danger" |
|
User defined panel style | Alternatively, the "wrapClass" value can be a user defined style. Example: "wrapClass": "panel-A" where panel-A is the name of a style defined by the user within the template as: { "componentName": "sc-static-html", "name": "stylePanelA", "fullWidth": true, "html": "<style> .panel-A {background:#fffff;box-shadow: 10px 10px 5px grey;} .panel-A > .panel-heading {background:#6a99f4;color:white;font-size:1.25em;font-weight:200;padding:1px 1px 1px 10px} .panel-A > .panel-body {margin:none;} .form-group {margin: 20px 0 0 0 !important;}</style>" } |
|
panel-default | Default value. Panel heading colours: black text, light grey background. Example: "wrapClass": "panel-default" |
|
wrapHeading | false | Hide the panel heading. Example: "wrapHeading": false |
true | Default value. Show the panel heading. |
|
wrapHtmlType | wrap | Wrap one or more Formbird components inside a panel. Example: "wrapHtmlType": "wrap" |
noWrap | Default value. Do not wrap the Formbird components inside a panel. |
|
wrapPanelCollapsed | false | On opening the form, expand the panel to show the Formbird components wrapped inside the panel (i.e. show the panel content). Example: "wrapPanelCollapsed": true |
true | Default value. On opening the form, collapse the panel to hide the Formbird components wrapped inside the panel (i.e. hide the panel content). |
3 Typical Definition
Below is a typical sc-panel-collapse definition, defined with its required fields plus any optional field whose value is typically other than its default value.
{
"componentName": "sc-panel-collapse",
"name": "scPanelCollapseTypicalDefinition",
"wrapAction": "open",
"fullWidth": true,
"label": "sc-panel-collapse Typical Definition",
"wrapHtmlType": "wrap"
},
INSERT one or more component definitions here
{
"componentName": "sc-panel-collapse",
"name": "scPanelCollapseTypicalDefinition"
"wrapAction": "close",
"wrapHtmlType": "wrap"
}
One or more of the optional fields shown below can be included in the above definition should a value other than their default value be required.
"enabled":false,
"visible":false,
"wrapClass":
"wrapHeading":false,
"wrapPanelCollapsed":false,
4 Examples
Example 1
Four Formbird components wrapped inside a collapsible panel using sc-panel-collapse definitions defined with their typically needed fields.
{
"componentName": "sc-panel-collapse",
"name": "scPanelCollapseTypicalDefinition",
"wrapAction": "open",
"fullWidth": true,
"label": "sc-panel-collapse Typical Definition",
"wrapHtmlType": "wrap"
},
{
"componentName": "sc-party",
"fullWidth": true,
"label": "sc-party 1",
"name": "scParty1",
"mandatory": true
},
{
"componentName": "sc-check-box",
"name": "scCheckBox1",
"label": "sc-check-box 1"
},
{
"componentName": "sc-check-list",
"name": "scCheckList1",
"label": "sc-check-list 1",
"list": [
"Father",
"Mother",
"Son",
"Daughter",
"Brother",
"Sister"
]
},
{
"componentName": "sc-static-html",
"fullWidth": true,
"html": "<div style='font-weight:normal;font-style:italic;font-size:2.0em;color:blue;'> Formatted sc-static-html</div>"
},
{
"componentName": "sc-panel-collapse",
"name": "scPanelCollapseTypicalDefinition"
"wrapAction": "close",
"wrapHtmlType": "wrap"
}
Resulting panel on the form:
Resulting panel on the form after clicking the panel heading to expand the panel:
Resulting panel on the form after entering values for the fields on the form:
Resulting fields in document and database after saving the values entered on the form above:
"scParty1": {
"title": "Mrs",
"firstName": "Emily",
"surname": "Katting"
},
"scCheckBox1": true,
"scCheckList1": [
"Mother",
"Sister"
]
Example 2
The same above four Formbird components but wrapped inside a collapsible panel using sc-panel-collapse definitions defined with their typically needed fields plus the optional fields "wrapPanelCollapsed": false
and a user defined "wrapClass": "panel-a"
. Hence this example needed to include a sc-static-html
definition for the user defined style "panel-a".
{
"componentName": "sc-static-html",
"name": "stylePanelA",
"fullWidth": true,
"html": "<style> .panel-A {background:#fffff;box-shadow: 10px 10px 5px grey;} .panel-A > .panel-heading {background:#6a99f4;color:white;font-size:1.25em;font-weight:200;padding:1px 1px 1px 10px} .panel-A > .panel-body {margin:none;} .form-group {margin: 20px 0 0 0 !important;}</style>"
},
{
"componentName": "sc-panel-collapse",
"name": "scPanelCollapseNonTypicalDefinition",
"wrapAction": "open",
"fullWidth": true,
"label": "sc-panel-collapse Non Typical Definition",
"wrapHtmlType": "wrap",
"wrapClass": "panel-A",
"wrapPanelCollapsed": false
},
{
"componentName": "sc-party",
"name": "scParty2",
"label": "sc-party 2",
"mandatory": true,
"fullWidth": true
},
{
"componentName": "sc-check-box",
"label": "sc-check-box 2",
"name": "scCheckBox2"
},
{
"componentName": "sc-check-list",
"list": [
"Father",
"Mother",
"Son",
"Daughter",
"Brother",
"Sister"
],
"name": "scCheckList2",
"label": "sc-check-list 2"
},
{
"componentName": "sc-static-html",
"fullWidth": true,
"html": "<div style='font-weight:normal;font-style:italic;font-size:2.0em;color:blue;'> Formatted sc-static-html</div>"
},
{
"componentName": "sc-panel-collapse",
"name": "scPanelCollapseNonTypicalDefinition",
"wrapAction": "close",
"wrapHtmlType": "wrap"
}
Resulting panel on the form:
Resulting panel on the form after clicking the panel heading to collapse the panel: