Skip to content

sc-panel-collapse

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

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

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

    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