sc-panel-collapse

This document is a user guide for the sc-panel-collapse component version 5.99 (released Nov 11, 2020).

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 an "Expand" icon (downward pointing arrow).
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 a "Collapse" icon (upward pointing arrow).
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	All components wrapped inside the collapsible panel field will be disabled i.e. each component wrapped inside the sc-panel-collapse field: Will be greyed out. Will display a Stop icon on mouseover. Example: `"enabled": false`
	true	Default value. Each component wrapped inside the collapsible panel field will be enabled/disabled in accordance with how its "enabled" property has been defined.
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. Example: `"visible": false`
	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: