Skip to content

sc-panel-collapse

This document is a user guide for the sc-panel-collapse component release version 7.1.5.

go-to-typical-definition

sc-panel-collapse-field-Example-1-Image-2


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:

  1. A sc-panel-collapse definition to open panel wrapping .
  2. followed by the definitions of the Formbird components to be wrapped inside the panel (i.e. the panel content) .
  3. 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 icon-sc-panel-collapse-expand-panel
  • 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 icon-sc-panel-collapse-collapse-panel
  • 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:

  1. 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:

sc-panel-collapse-field-Example-1-Image-1

Resulting panel on the form after clicking the panel heading to expand the panel:

sc-panel-collapse-field-Example-1-Image-2

Resulting panel on the form after entering values for the fields on the form:

sc-panel-collapse-field-Example-1-Image-3

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:

sc-panel-collapse-field-Example-2-Image-1

Resulting panel on the form after clicking the panel heading to collapse the panel:

sc-panel-collapse-field-Example-2-Image-2