sc-static-html

This document is a user guide for the sc-static-html component release version 7.1.23.

sc-static-html-field-Ex-1-Image-1

1 Purpose

The sc-static-html component can be used to:

Place html on a form.
Place html wrapped inside a panel field on a form.
Place one of more formbird components wrapped inside the panel field on a form.

Note:

The sc-panel and sc-panel-collapse components can also be used to place a panel field on a form. User guides for these components can be found at formbird.com.

The sc-static-html component definition provides fields for configuring the properties of a sc-static-html field and is fully described below.

2 Definition

sc-static-html is defined by a set of name/value pair fields consisting of:

Required system fields
Required customizable fields
Optional customizable fields

Note:

To place html wrapped inside a panel on a form requires a single sc-static-html definition configured with "wrapHtmlType": "panelWrap".
To place one or more Formbird components wrapped inside the panel on a form requires:
1. A sc-static-html definition configured with "wrapHtmlType": "wrap" to open panel wrapping .
2. Followed by the definitions of the Formbird components to be wrapped inside the panel.
3. Followed by a sc-static-html definition configured with "wrapHtmlType": "wrap" to close panel wrapping.
Default values for fields described in the tables below are shown in bold text.

2.1 Required System Fields

Field	Valid Values	Description
componentName		When the `st-static-html` component is used to wrap one or more Formbird components inside a panel, the `"componentName"` field needs to be specified in the `st-static-html` definition that opens panel wrapping and in the `st-static-html` definition that closes panel wrapping.
	sc-static-html	The component name. Example: `"componentName": "sc-static-html"`

2.2 Required Customizable Fields

Field	Valid Values	Description
html		When the `st-static-html` component is used to wrap one or more Formbird components inside a panel, the `"html"` field is not required and will be ignored.
	Valid html	1. Defines the html to be rendered on the form. Example: This example renders the formatted text "Results" on the form. `"html" : "<div style='color:FireBrick; font-weight:bold; font-size:100%;font-style:italic;'>Results</div>"` 2. Provides the ability to bind the html to the value of a specific field in the document or template. To bind the html to the value of the field with the name "fieldName", include {{doc[fieldName]}} in the html. Example: This example renders the text "Workflow/Action Details for:" on the form and binds it to the value of the actionId field. `"html" : "<div style='color:FireBrick; font-weight:bold; font-size:100%;font-style:italic;'>Workflow/Action Details for: {{doc['actionID']}}</div>"`
name		When the `st-static-html` component is used to wrap one or more Formbird components inside a panel, the `"name"` field needs to be specified in the `st-static-html` definition that opens panel wrapping and in the `st-static-html` definition that closes panel wrapping.
	Any value written in camel case	Defines the name of the `sc-static-html` field in the document and database and is only required when a `sc-static-html` definition is used to wrap one or more Formbird components inside a panel. Otherwise the `"name" field is not required and will be ignored. Example: `"name": "scStaticHtmlTypicalDefinitionWrappingComponentsInsideAPanel"`

2.3 Optional Customizable Fields

Field	Valid Values	Description
allowFullBarSelection		Only applicable when a `sc-static-html` definition is configured to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`). Otherwise the `"allowFullBarSelection"` field is ignored.
	true	The `"allowFullBarSelection"` and the `"collapsible"` fields work together to determine if clicking the panel heading bar will expand a collapsed panel and collapse an expanded panel. Both fields must be defined as "true" to provide the panel heading bar with this feature. Example: `"allowFullBarSelection": true`, `"collapsible": true`
	false	Default value. Clicking the panel heading bar does not expand a collapsed panel and does not collapse an expanded panel.
collapsible		Only applicable when a `sc-static-html` definition is configured to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`). Otherwise the `"collapsible"` field is ignored. The `"collapsible"` and `"wrapPanelCollapsed"` fields work together to determine if (1) the panel displays collapsed or expanded and (2) the panel heading bar displays an "Expand" button or a "Collapse" button or neither of these buttons.
	true	When `"collapsible": true`, panel behaviour is dependent on how the `"wrapPanelCollapsed"` field is defined. If `"wrapPanelCollapsed"` is: Defined `true`, then the panel displays collapsed with an "Expand" button in the panel heading bar allowing the user to expand the panel. Defined `false`, then the panel displays expanded with a "Collapse" button in the panel heading bar allowing the user to collapse the panel. Not defined, then the `"wrapPanelCollapsed"` field defaults to `true` and the panel displays collapsed with an "expand" button in the panel heading bar allowing the user to expand the panel. Example: `"collapsible": true`
	false	Default value. When `"collapsible": false` or the `"collapsible"` field defaults to `false` , the panel behaviour is dependent on how the `"wrapPanelCollapsed"` field is defined. If `"wrapPanelCollapsed"` is: Defined `true`, then `"wrapPanelCollapsed" true` is ignored and the panel displays expanded without an "Expand/Collapse" button in the panel heading bar. Defined `false`, then the panel displays expanded without an "Expand/Collapse" button in the panel heading bar. Not defined, then the `"wrapPanelCollapsed"` field defaults to `false` and the panel displays expanded without an "Expand/Collapse" button in the panel heading bar. Example: `"collapsible": false`
enabled		Only applicable when a `sc-static-html` definition is configured to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`). Otherwise the `"enabled"` field is ignored.
	false	Disables the "Expand/Collapse" button, "Link Text" field and "Link Icon" field if any are defined to display on the panel heading bar. Display a Stop icon on mouseover of the "Expand/Collapse" button, "Link Text" field and "Link Icon" field. When defined by the `"allowFullBarSelection"` and the `"collapsible"` fields, the ability to expand/collapse a panel by clicking the panel heading bar is disabled. 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. Does not disable the "Expand/Collapse" button, "Link Text" field, "Link Icon" field if any are defined to display on the panel heading bar. Does not display a Stop icon on mouseover of the "Expand/Collapse" button, "Link Text" field and "Link Icon" field. When defined by the `"allowFullBarSelection"` and the `"collapsible"` fields, the ability to expand/collapse a panel by clicking the panel heading bar is not disabled.
fullWidth	true	The `sc-static-html` field displays full width on the form. Example: `"fullWidth": true`
	false	Default value. The `sc-static-html` field does not display full width on the form.
label		Only applicable when a `sc-static-html` definition is configured to wrap html inside a panel (i.e. when `"wrapHtmlType": "panelWrap"`) or to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`). Otherwise the `"label"` field is ignored.
	Any value	Defines the name of the `sc-static-html` field defined as a panel on the form i.e. the field label. The field label is displayed left justified in the panel heading bar. Example: `"label": "sc-static-html Typical Definition wrapping 5 components inside a panel"` The "label" field value can be html, providing the ability to style the panel label. Example: `"<div>sc-static-html Definition wrapping html inside a panel</div><div style='color:hsl(0,100%,25%)'>Line 2 of a html styled panel header label</div><div style='color:hsl(0,0%,25%);font-style:italic;font-size:smaller;font-weight:lighter'>Line 3 of a html styled panel header label</div>"`
		Defaults to the `sc-panel` field displays without a field label on the form i.e. the panel heading bar is displayed without a field label.
linkIcon		Only applicable when a `sc-static-html` definition is configured to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`). Otherwise the `"linkIcon"` field is ignored. The `"linkIcon"`, `"linkText"`, `"overrideTemplate"`, `"url"` and `"urlOpenIn"` fields provide the ability to include a link field in the panel heading bar. The `"linkIcon"` and/or the `"linkText"` field are used to define the appearance of the link field. The `"overrideTemplate"` or the `"url"` field are used to define the target of the link. The `"overrideTemplate"` field is used to define how the target of the link field will display e.g. in a popup.
	A valid Angular Material Icon name	The icon to display as a link field and positioned about 30px to the right of the link text in the panel heading bar. If `"linkText"` field is not defined then the link icon is positioned about 30px to the right of the panel label. On mouseover of the link icon, the cursor changes to a hand pointer . Clicking the link icon will open the the target of the link, assuming the target of the link has been defined by either the `"overrideTemplate"` or the `"url"` field. Example: Display the Open Browser Icon . `"linkIcon": "open_in_browser"` Note: The 900+ Angular Material Icons and their names are listed here. As shown is the above example, these icon names are written in lower case with multiple words separated by an underscore.
		Defaults to no link icon is displayed in the panel heading bar.
linkText		Only applicable when a `sc-static-html` definition is configured to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`). Otherwise the `"linkText"` field is ignored. The `"linkIcon"`, `"linkText"`, `"overrideTemplate"`, `"url"` and `"urlOpenIn"` fields provide the ability to include a link field in the panel heading bar. The `"linkIcon"` and/or the `"linkText"` field are used to define the appearance of the link field. The `"overrideTemplate"` or the `"url"` field are used to define the target of the link. The `"overrideTemplate"` field is used to define how the target of the link field will display e.g. in a popup.
	Text value	The text to display as a link field and positioned about 30px to the right of the panel label in the panel heading bar. The cursor changes to a hand pointer on mouseover of the link text. Clicking the link text will open the the target of the link, assuming the target of the link has been defined by either the `"overrideTemplate"` or the `"url"` field. Example: `"linkText": "Formbird Makes it Possible"`
		Defaults to no link text is displayed in the panel heading bar.
overrideTemplate		Only applicable when a `sc-static-html` definition is configured to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`). Otherwise the `"overrideTemplate"` field is ignored. The `"linkIcon"`, `"linkText"`, `"overrideTemplate"`, `"url"` and `"urlOpenIn"` fields provide the ability to include a link field in the panel heading bar. The `"linkIcon"` and/or the `"linkText"` field are used to define the appearance of the link field. The `"overrideTemplate"` or the `"url"` field are used to define the target of the link. The `"overrideTemplate"` field is used to define how the target of the link field will display e.g. in a popup.
	Valid templateId	The concatenation of the current document URL and the `"0verideTemplateId"` value is used to define the target of a link field, assuming a link field has been defined by either the `"linkIcon"` and/or the `"linkText"` field. Example: `"overrideTemplate": "72d38500-5de9-11eb-8762-9f1ae10bf111"` Note: Either the `"url"` field or the `"overrideTemplate"` field, but not both, can be used to define the target of the link. If both are provided then `"url"` field will take presidence. If neither is defined then on clicking the link text or link icon, nothing will happen.
		Defaults to the `"overrideTemplate"` field is not defined.
url		Only applicable when a `sc-static-html` definition is configured to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`). Otherwise the `"url"` field is ignored. The `"linkIcon"`, `"linkText"`, `"overrideTemplate"`, `"url"` and `"urlOpenIn"` fields provide the ability to include a link field in the panel heading bar. The `"linkIcon"` and/or the `"linkText"` field are used to define the appearance of the link field. The `"overrideTemplate"` or the `"url"` field are used to define the target of the link. The `"overrideTemplate"` field is used to define how the target of the link field will display e.g. in a popup.
	Valid url	Used to define the target of a link field i.e. the URL to open when the link field is clicked, assuming a link field has been defined by either the `"linkIcon"` and/or the `"linkText"` field. The URL is either relative to the current server or an absolute url with a https tag. Example: `"url": "https://www.formbird.com"` Note: Either the `"url"` field or the `"overrideTemplate"` field, but not both, can be used to define the target of the link. If both are provided then `"url"` field will take presidence. If neither is defined then on clicking the link text or link icon, nothing will happen.
		Defaults to the `"url"` field is not defined.
urlOpenIn		Only applicable when a `sc-static-html` definition is configured to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`). Otherwise the `"urlOpenIn"` field is ignored. The `"linkIcon"`, `"linkText"`, `"overrideTemplate"`, `"url"` and `"urlOpenIn"` fields provide the ability to include a link field in the panel heading bar. The `"linkIcon"` and/or the `"linkText"` field are used to define the appearance of the link field. The `"overrideTemplate"` or the `"url"` field are used to define the target of the link. The `"overrideTemplate"` field is used to define how the target of the link field will display e.g. in a popup.
	newWindow	The target of the link field opens in a new browser window or tab (the browser determines whether its new tab or window). Example: `"openIn": "newWindow"`
	overlay	Note: Only use when the target of the link field is an internal web address of a Formbird document i.e. do not use when the the target of the link field is an external web address. Opens a Formbird document in a popup window overlaying the current page. Example: `"openIn": "overlay"`
	popup	The target of the link field opens in a browser pop-up. Example: `"openIn": "popup"`
	currentWindow	Default value. The target of the link field opens opens in the current browser window or tab (the browser determines whether its new tab or window). Example: `"openIn": "currentWindow"`
visible	false	The `sc-static-html` field is not visible on the form. Example: `"visible": false`
	true	Default value. The `sc-static-html` field is visible on the form.
wrapAction		Only applicable when a `sc-static-html` definition is configured to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`). Otherwise the `"wrapAction"` field is ignored.
	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"`
wrapClass		Only applicable when a `sc-static-html` definition is configured to wrap html inside a panel (i.e. when `"wrapHtmlType": "panelWrap"`) or to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`). Otherwise the `"wrapClass"` field is ignored.
	panel-primary	Panel heading colours: white text, blue background. Example: `"wrapClass": "panel-primary"`
	panel-success	Panel heading colours: green text, light green background. Example: `"wrapClass": "panel-success"`
	panel-info	Panel heading colours: blue text, light sky blue background. Example: `"wrapClass": "panel-info"`
	panel-warning	Panel heading colours: brown text, light yellow background. Example: `"wrapClass": "panel-warning"`
	panel-danger	Panel heading colours: red text, light red background. Example: `"wrapClass": "panel-danger"`
	panel-default	Default value. Panel heading colours: black text, light grey background. Example: `"wrapClass": "panel-default"`
	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>"` `}`s" value can be a user defined style. Example: `"wrapClass": "panel-A"` where panel-A was defined within the template as: `{` `"componentName": "sc-static-html",` `"name": "panelStyle",` `"fullWidth": true,` `"html": "<style>.panel-A {background: #ffffff;border:0px} .panel-A > .panel-heading {font-weight:normal;font-size:1.25em;height:35px;line-height:16px; color:white; background: linear-gradient(to right, rgba(0,37,170,1) 0%,rgba(21,15,38,1) 70%)} .btnA{margin-left:6px;margin-top:10px} .formbirdIcon{height:auto;width:5%;margin-left:10px;margin-top:-50px;margin-bottom:-30px;float:right} </style>"` `}`
wrapHeading		Only applicable when a `sc-static-html` definition is configured to wrap html inside a panel (i.e. when `"wrapHtmlType": "panelWrap"`) or to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`). Otherwise the `"wrapHeading"` field is ignored.
	false	Hide the panel heading bar. Example: `"wrapHeading": false`
	true	Default value. Show the panel heading bar.
wrapHeadingBackground		Only applicable when a `sc-static-html` definition is configured to wrap html inside a panel (i.e. when `"wrapHtmlType": "panelWrap"`) or to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`). Otherwise the `"wrapHeadingBackground"` field is ignored.
	Colour name or Hex value	Overrides the wrapClass heading background colour. Examples: `"wrapHeadingBackground": "yellow"` `"wrapHeadingBackground": "#FFFF00"`
		Defaults to the `"wrapClass"` field's heading background colour.
wrapHeadingColor		Only applicable when a `sc-static-html` definition is configured to wrap html inside a panel (i.e. when `"wrapHtmlType": "panelWrap"`) or to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`). Otherwise the `"wrapHeadingColor"` field is ignored.
	Colour name or Hex value	Overrides the `"wrapClass"` field's heading text colour. Examples: `"wrapHeadingColor": "darkRed"` `"wrapHeadingColor": "#8B0000"`
		Defaults to the `"wrapClass"` field's heading text colour.
wrapHtmlType		Only applicable when a `sc-static-html` definition is configured to wrap html inside a panel (i.e. when `"wrapHtmlType": "panelWrap"`) or to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`).
	panelWrap	Wrap the html inside a panel. Example: `"wrapHtmlType": "panelWrap"`
	wrap	Wrap one or more Formbird components inside a panel. Example: `"wrapHtmlType": "wrap"`
	noWrap	Default value. Do not wrap html or Formbird components inside a panel.
wrapPanelCollapsed		Only applicable when a `sc-static-html` definition is configured to wrap one or more Formbird components inside a panel (i.e. when `"wrapHtmlType": "wrap"`). Otherwise the `"wrapPanelCollapsed"` field is ignored. The `"collapsible"` and `"wrapPanelCollapsed"` fields work together to determine if (1) the panel displays collapsed or expanded and (2) the panel heading bar displays an "Expand" button or a "Collapse" button or neither of these buttons.
	true	When `"wrapPanelCollapsed": true`, panel behaviour is dependent on how the `"collapsible"` field is defined. If `"collapsible"` is: Defined `true`, then the panel displays collapsed with an "Expand" button in the panel heading bar allowing the user to expand the panel. Defined `false`, then the panel displays expanded with no "Expand/Collapse" button . Not defined, then the `"collapsible"` field defaults to `"false` and the panel displays expanded with no "Expand/Collapse" button. Example: `"wrapPanelCollapsed": true`
	false	When `"wrapPanelCollapsed": false`, panel behaviour is dependent on how the `"collapsible"` field is defined. If `"collapsible"` is: Defined `true`, then the panel displays expanded with a "Collapse" button in the panel heading bar allowing the user to expand the panel. Defined `false`, then the panel displays expanded without an "Expand/Collapse" button in the panel heading bar. Not defined, then the `"collapsible"` field defaults to `false` and the panel displays expanded without an "Expand/Collapse" button in the panel heading bar. Example: `"wrapPanelCollapsed": false`
		When `"wrapPanelCollapsed"` is not defined then panel behaviour is dependent on how the `"collapsible"` field is defined. If `"collapsible"` is: Defined `true`, then the panel displays collapsed with an "Expand" button in the panel heading bar allowing the user to expand the panel. Defined `false`, then the panel displays expanded without an "Expand/Collapse" button in the panel heading bar. Not defined, then the `"collapsible"` field and the `"wrapPanelCollapsed"` both default to `false` and the panel displays expanded without an "Expand/Collapse" button in the panel heading bar.

3 Using Handlebars in sc-static-html

Handlebars can be used in the sc-static-html component by using the parameter "useFormbirdHandlebars": true
Execute functions in the html definition and configure handlebarsHelpers array functions as per examples below. Refer to Appendix E for more information on handlebars

{
    "componentName": "sc-static-html",
    "fullWidth": true,
    "html": "<div class='intrayNameClass'>Intrays: {{getAccountNames account.intraysRel}}<div>",
    "name": "intrayNameHtml",
    "useFormbirdHandlebars": true,
    "handlebarsHelpers": [
        {
            "name": "getAccountNames",
            "function": "function(arg) { if(arg?.length){ let str = arg.map(function(item){return item.name }); return str.toString().replace(/,/g,' / ') }}"
        }
    ]
}

4 Typical Definition

Below are typical sc-static-html definitions, defined with their required fields plus any optional field whose value is typically other than its default value.

4.1 Typical Definition: place html on a form

Below is a typical sc-static-html definition to place html on a form, configured with its required fields plus any optional field whose value is typically other than its default value.

        {
            "componentName": "sc-static-html",
            "html": "<div style='font-weight:normal;font-style:italic;font-size:1.5em;color:#9400D3;'>Formatted html on a form.</div>",
            "fullWidth": true
        }

The optional field shown below can be included in the above sc-static-html definition should a value other than its default value be required.

            "visible": false,

4.2 Typical Definition: html wrapped inside a panel

Below is a typical sc-static-html definition to place html wrapped inside a panel on a form, configured with its required fields plus any optional field whose value is typically other than its default value.

        {
            "componentName": "sc-static-html",
            "html": "<div style='font-weight:normal;font-style:italic;font-size:1.5em;color:#9400D3;'>Formatted html wrapped inside a panel.</div>",
            "fullWidth": true,
            "wrapHtmlType": "panelWrap",
            "label": "sc-static-html Typical Definition (wrap html inside a panel)"
        }

One or more of the optional fields shown below can be included in the above sc-static-html definition should a value other than their default value be required.

            "visible": false,
            "wrapClass": "panel-info",
            "wrapHeading": false,
            "wrapHeadingBackground": "yellow",
            "wrapHeadingColor": "darkRed"

4.3 Typical Definition: formbird components wrapped inside a panel.

Below is a typical sc-static-html definition to wrap one or more Formbird components inside a panel on a form, defined with its required fields plus any optional field whose value is typically other than its default value.

        {
            "componentName": "sc-static-html",
            "name": "scStaticHtmlTypicalDefinitionWrapFormbirdComponentsInsideAPanel",
            "wrapHtmlType": "wrap",
            "wrapAction": "open",
            "label": "sc-static-html Typical Definition (wrap Formbird components inside a panel)",
            "fullWidth": true
        },

INSERT one or more component definitions here
        {
            "componentName": "sc-static-html",
            "name": "scStaticHtmlTypicalDefinitionWrapFormbirdComponentsInsideAPanel",
            "wrapHtmlType": "wrap",
            "wrapAction": "close"
        }

One or more of the optional fields shown below can be included sc-static-html definition used to open the panel, should a value other than their default value be required.

            "allowFullBarSelection": true,
            "collapsible": true,
            "enabled": false,
            "linkIcon": "open_in_browser",
            "linkText": "Formbird Makes it Possible",
            "overrideTemplate": "72d38500-5de9-11eb-8762-9f1ae10bf111",
            "url": "/form/34eaf970-6add-11e6-a8ec-73bc02e91916",
            "url": "https://www.formbird.com",
            "urlOpenIn": "newWindow",
            "visible": false,
            "wrapClass": "panel-primary",
            "wrapHeading": false,
            "wrapHeadingBackground": "yellow",
            "wrapHeadingColor": "darkRed",
            "wrapPanelCollapsed": true,

5 Examples

Example 1

HTML defined by a sc-static-html definition configured with the typically needed fields.

        {
            "componentName": "sc-static-html",
            "html": "<div style='font-weight:normal;font-style:italic;font-size:1.5em;color:#9400D3;'>Formatted html on a form.</div>",
            "fullWidth": true
        }

Resulting field on the form:

sc-static-html-field-Ex-1-Image-1

Example 2

HTML wrapped inside a panel defined by a sc-static-html definition configured with the typically needed fields.

        {
            "componentName": "sc-static-html",
            "html": "<div style='font-weight:normal;font-style:italic;font-size:1.5em;color:#9400D3;'>Formatted html wrapped inside a panel.</div>",
            "wrapHtmlType": "panelWrap",
            "label": "sc-static-html Typical Definition (wrap html inside a panel)",
            "fullWidth": true
        }

Resulting field on the form:

sc-static-html-field-Example-2-Image-1

Example 3

HTML wrapped inside a panel defined by a sc-static-html definition configured with the typically needed fields plus the following optional fields:

The "wrapHeadingBackground" field configuring the colour of the panel heading text as yellow.
The "wrapHeadingColor" field configuring the colour of the panel heading text as dark red.

        {
            "componentName": "sc-static-html",
            "html": "<div style='font-weight:normal;font-style:italic;font-size:1.5em;color:#008000;'>Formatted html wrapped inside a panel.</div>",
            "wrapHtmlType": "panelWrap",
            "label": "sc-static-html Non-Typical Definition (wrap html inside a panel)",
            "fullWidth": true,
            "wrapHeadingBackground": "yellow",
            "wrapHeadingColor": "darkRed"
        }

Resulting field on the form:

sc-static-html-field-Example-3-Image-1

Example 4

Five Formbird components wrapped inside a panel defined by two sc-static-html definitions (one to open the panel and one to close the panel ), each configured with their typically needed fields.

        {
            "componentName": "sc-static-html",
            "name": "scStaticHtmlTypicalDefinitionWrapFormbirdComponentsInsideAPanel",
            "wrapHtmlType": "wrap",
            "wrapAction": "open",
            "label": "sc-static-html Typical Definition (wrap Formbird components inside a panel)",
            "fullWidth": true
        },
        {
            "componentName": "sc-party",
            "name": "scPart1",
            "label": "sc-party Inside a Panel",
            "fullWidth": true,
            "xmandatory": true
        },
        {
            "componentName": "sc-text-box",
            "label": "sc-text-box inside a panel",
            "name": "textBox1"
        },
        {
            "componentName": "sc-drop-down",
            "name": "ScDropDown1",
            "label": "sc-drop-down inside a panel",
            "dropDownList": [
                "Less than 1 year",
                "1 to 12 years",
                "13 to 19 years",
                "Over 19 years"
            ]
        },
        {
            "componentName": "sc-check-list",
            "name": "scCheckList1",
            "label": "sc-check-list inside a panel",
            "list": [
                "Father",
                "Mother",
                "Son",
                "Daughter",
                "Brother",
                "Sister"
            ],
            "fullWidth": true
        },
        {
            "componentName": "sc-static-html",
            "fullWidth": true,
            "html": "<div style='font-weight:normal;font-style:italic;font-size:1.5em;color:blue;'> sc-static-html  inside a panel</div>"
        },
        {
            "componentName": "sc-static-html",
            "name": "scStaticHtmlTypicalDefinitionWrapFormbirdComponentsInsideAPanel",
            "wrapHtmlType": "wrap",
            "wrapAction": "close"
        }

Resulting field on the form:

sc-static-html-field-Example-4-Image-1

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

sc-static-html-field-Example-4-Image-2

Resulting fields in document and database after saving the values entered inside the panel:

    "scPart1": {
        "title": "Miss",
        "firstName": "Anne",
        "surname": "McQuaid"
    },
    "textBox1": "1843 immigrated to Australia",
    "ScDropDown1": "13 to 19 years",
    "scCheckList1": [
        "Daughter"
    ]

Example 5

Five Formbird components wrapped inside a panel defined by two sc-static-html definitions (one to open the panel and one to close the panel), each configured with their typically needed fields plus the following optional fields included in the open panel definition:

The"allowFullBarSelection" field to expand/collapse the panel on clicking the panel heading bar.
The"collapsible" field configuring the panel as collapsible.
The"linkText" field to display the text ""Formbird Makes it Possible" icon as a link field in the panel heading bar.
The"linkIcon" field to display the "open Browser" icon as a link field in the panel heading bar.
The"url" field defining the target for the above link fields.
The"urlOpenIn" field to open the target of the link fields in pop-up.
The"wrapClass" field to format the panel heading colours as blue text on a light sky blue background.

        {
            "componentName": "sc-static-html",
            "fullWidth": true,
            "wrapHtmlType": "wrap",
            "wrapAction": "open",
            "name": "scStaticHtmlNonTypicalDefinitionWrapComponentsInsideAPanel",
            "label": "sc-static-html Non-Typical Definition (wrap  components inside a panel)",
            "linkText": "Formbird Makes it Possible",
            "urlOpenIn": "popup",
            "linkIcon": "open_in_browser",
            "url": "https://www.formbird.com",
            "allowFullBarSelection": true,
            "collapsible": true,
            "wrapClass": "panel-info"
        },
        {
            "componentName": "sc-party",
            "name": "scParty2",
            "label": "sc-party Inside a Panel",
            "fullWidth": true,
            "xmandatory": true
        },
        {
            "componentName": "sc-text-box",
            "label": "sc-text-box inside a panel",
            "name": "textBox2"
        },
        {
            "componentName": "sc-drop-down",
            "name": "ScDropDown2",
            "label": "sc-drop-down inside a panel",
            "dropDownList": [
                "Less than 1 year",
                "1 to 12 years",
                "13 to 19 years",
                "Over 19 years"
            ]
        },
        {
            "componentName": "sc-check-list",
            "name": "scCheckList2",
            "label": "sc-check-list inside a panel",
            "list": [
                "Father",
                "Mother",
                "Son",
                "Daughter",
                "Brother",
                "Sister"
            ],
            "fullWidth": true
        },
        {
            "componentName": "sc-static-html",
            "fullWidth": true,
            "html": "<div style='font-weight:normal;font-style:italic;font-size:1.5em;color:blue;'> sc-static-html inside a panel</div>"
        },
        {
            "componentName": "sc-static-html",
            "wrapHtmlType": "wrap",
            "wrapAction": "close",
            "name": "scStaticHtmlNonTypicalDefinitionWrapComponentsInsideAPanel"
        }

Resulting panel field on the form:

sc-static-html-field-Example-5-Image-1

Resulting panel field after clicking the "Expand" button to expand the panel showing its contents:

sc-static-html-field-Example-5-Image-2

Result after clicking the link text (or link icon field) to open the target of the link in a pop-up:

sc-static-html-field-Example-5-Image-3