Skip to content

sc-static-html

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

1 Purpose

sc-static-html can be used for one or more of the following:

  1. Insert html on a form.
  2. Insert html wrapped inside a panel on a form.
  3. Insert one or more components wrapped inside a panel on a form.

The sc-static-html definition provides fields for setting the properties of a 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:

  1. Default values for fields described in the tables below are shown in bold text.
  2. To wrap the html inside a panel, define a sc-static-html with "wrapHtmlType": "panelWrap" and a "label" field (e.g. "label": "Test sc-static-html Panel Label").
  3. To wrap one or more components inside a panel:

    • To start the panel wrapping, define a sc-static-html with "wrapHtmlType": "wrap" and "wrapAction: "open" and a "name" field (e.g. "name": ""panel1") and a "label" field (e.g. "label": "Test sc-static-html Panel Label").
    • Define the one or more components that are to be wrapped.
    • To end the panel wrapping, define a sc-static-html with "wrapHtmlType": "wrap" and "wrapAction": "close" and the "name" field (e.g. "name": ""panel1").

2.1 Required System Fields

Field Valid Values Description
componentName sc-static-html The component name.
Example: "componentName": "sc-static-html"

2.2 Required Customizable Fields

Field Valid Values Description
html Valid html Defines the html to be rendered on the form.
The "html" field is not required and will be ignored when using sc-static-html to start or end wrapping one or more components inside a panel (i.e. when "wrapHtmlType": "wrap").
Example: This example renders the text "Results" on the form.
"html" : "<div style='color:FireBrick; font-weight:bold; font-size:100%;font-style:italic;'>Results</div>"
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>"
label Any value Defines the panel label and is only required when the sc-static-html is used to wrap html inside a panel (i.e. "wrapHtmlType": "panelWrap") or to start wrapping one or more components inside a panel (i.e. when "wrapHtmlType": "wrap"). See "wrapHtmlType" field and Examples 2, 3 and 4 below.
Otherwise the "label" field is not required and will be ignored.
Example: "label": "Test sc-static-html panel label"
The "label" field value can be html, providing the ability to style the panel label.
Example:
"label": "<div style='color:hsl(0,100%,25%)'>Line 1 of HTML styled panel label</div><div style='color:hsl(0,0%,25%);font-size:smaller;font-weight:lighter'>Line 2 of HTML styled panel label</div>"
undefined Default value. Panel label displays the text 'undefined' when using sc-static-html to wrap html inside a panel (i.e. "wrapHtmlType": "panelWrap") or to start wrapping one or more components inside a panel (i.e. when "wrapHtmlType": "wrap").
name 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 using sc-static-html to start or end wrapping one or more components inside a panel (i.e. when "wrapHtmlType": "wrap"). See "wrapHtmlType" field and Examples 3 and 4 below.
Otherwise the "label" field is not required and will be ignored.
Example: "name": "testSimpleComponentWrapping"

2.3 Optional Customizable Fields

Field Valid Values Description
fullWidth true The html displays full width on the form.
Example: "fullWidth": true
false Default value. The html does not display full width on the form.
visible false The html is not visible on the form.
Example:'"visible": false'
true Default value. The html is visible on the form.
wrapAction open Begin wrapping one of more components in a panel.
Example: "wrapAction": "open"
close End wrapping one of more components in a panel.
Example: "wrapAction": "close"
wrapBorderColor Colour name or Hex value Overrides the wrapClass heading background colour.
Example: "wrapBorderColor": "black"
Example: "wrapBorderColor": "#000000"
Defaults to the "wrapClass" border colour.
wrapClass 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"
panel-default Default value. Panel heading colours: black text, light grey background.
Example: "wrapClass": "panel-default"
Alternatively, the "wrapClass" 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>"
}
wrapFullWidth true Panel is displayed full width on the form.
Example: "wrapFullwidth": true
false Default value. Panel is not displayed full width on the form.
wrapHeading false Hide the panel heading.
Example: "wrapHeading": false
true Default value. Show the panel heading.
wrapHeadingBackground Colour name or Hex value Overrides the wrapClass heading background colour.
Example: "wrapHeadingBackground": "yellow"
Example: "wrapHeadingBackground": "#FFFF00"
Defaults to the wrapClass heading background colour.
wrapHeadingColor Colour name or Hex value Overrides the wrapClass heading text colour.
Example: "wrapHeadingColour": "darkRed"
Example: "wrapHeadingColour": "#8B0000"
Defaults to the wrapClass heading text colour.
wrapHtmlType panelWrap Wrap the html inside a panel.
Example: "wrapHtmlType": "panelWrap"
wrap Wrap one or more components inside a panel.
Example: "wrapHtmlType": "wrap"
noWrap Default value. Do not wrap the html inside a panel.
Example: "html" : "<div style='color:FireBrick; font-weight:bold; font-size:100%;font-style:italic;'>Workflow/Action Details for {{doc['actionID']}}</div>","

 

3 Typical sc-static-html 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.

HTML NOT WRAPPED INSIDE A PANEL
{
    "componentName": "sc-static-html",
    "html": "Test sc-static-html not wrapped inside a Panel"
}

HTML WRAPPED INSIDE A PANEL
{ 
    "componentName": "sc-static-html", 
    "html": "Test sc-static-html wrapped inside a panel", 
    "wrapHtmlType": "panelWrap", 
     "label": "Test sc-static-html wrapped inside a Panel" 
}

DEFINITIONS TO OPEN AND CLOSE WRAPPING OF ONE OR MORE COMPONENTS INSIDE A PANEL
{
    "componentName": "sc-static-html",
    "fullWidth": true,
    "label": "Currently Assigneed To Me",
    "name": "panel1",
    "wrapHtmlType": "wrap",
    "wrapAction": "open",
    "wrapClass": "panel-class-definition"
},

Insert one or more component definitions here

{
    "componentName": "sc-static-html",
    "name": "panel1",
    "wrapAction": "close",
    "wrapHtmlType": "wrap"
},

One or more of the optional fields shown below can be included in the above definitions should a value other than their default value be required.

NO PANEL WRAPPING - OPTIONAL CUSTOMIZABLE FIELDS:
    "fullWidth":true,
    "visible":false,


PANEL WRAPPING - OPTIONAL CUSTOMIZABLE FIELDS:
    "wrapBorderColor": "black",
    "wrapClass": "panel-warning",
    "wrapClass": "panel-class-definition",
    "wrapHeading": false,
    "wrapHeadingBackground": "yellow",
    "wrapHeadingColour": "darkRed",

 

4 Examples

Example 1

Two sc-static-html, each defined as not wrapped inside a panel.

Note: As these two sc-static-html are not wrapped inside a panel, the "name" and "label" fields are not required in their definitions.

    {
        "componentName": "sc-static-html",
        "html": "Test unformatted sc-static-html not wrapped inside a Panel"
    },
    {
        "componentName": "sc-static-html",
        "html": "<div style='font-weight:bold; font-size:1.5em;color:red;'>Test formatted sc-static-html not wrapped inside a Panel</div>",
        "fullWidth": true
    }

Resulting fields on the form:

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

Example 2

Three sc-static-html, each defined as wrapped inside a panel.

The first is full width and uses the "wrapHeadingBackground" field to define the panel heading background colour.

The second is full width and uses the "wrapHeadingBackground" field to define the panel heading background colour and HTML to style the panel label

The third is not full width and uses the "wrapClass" field to define the panel heading text and background colours.

    {
        "componentName": "sc-static-html",
        "html": "<div style='font-weight:normal;font-style:italic;font-size:2.0em;color:#100;'>Test formatted sc-static-html wrapped inside a panel</div>",
        "wrapHtmlType": "panelWrap",
        "label": "Panel label for formatted sc-static-html wrapped inside a Panel",
        "wrapHeadingBackground": "yellow",
        "fullWidth": true
    },
    {
        "componentName": "sc-static-html",
        "html": "Test unformatted sc-static-html wrapped inside a Panel that has a HTML styled panel label",
        "wrapHtmlType": "panelWrap",
        "label": "<div style='color:hsl(0,100%,25%)'>Line 1 of HTML styled panel label</div><div style='color:hsl(0,0%,25%);font-size:smaller;font-weight:lighter'>Line 2 of HTML styled panel label</div>",
        "wrapHeadingBackground": "lightGreen",
        "fullWidth": true
    },
    {
        "componentName": "sc-static-html",
        "html": "<div style='font-weight:normal;font-style:italic;font-size:2.0em;color:#100;'>Test formatted sc-static-html wrapped inside a panel</div>",
        "wrapHtmlType": "panelWrap",
        "label": "Panel label for formatted sc-static-html wrapped inside a Panel",
        "wrapClass": "panel-info",
    }

Resulting fields on the form:

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

Example 3

Simple example of multiple components wrapped inside a panel. This example has 3 components wrapped inside a panel, sc-static-html, sc-note-box and sc-email.

        {
            "componentName": "sc-static-html",
            "fullWidth": true,
            "wrapClass": "panel-primary",
            "label": "Panel label for multiple components wrapped inside a Panel (Simple Example)",
            "wrapHtmlType": "wrap",
            "name": "testSimpleComponentWrapping",
            "wrapAction": "open"
        },
        {
            "componentName": "sc-static-html",
            "html": "Unformatted sc-static-html inside a Panel"
        },
        {
            "componentName": "sc-note-box",
            "name": "simpleComponentWrappingScNoteBox",
            "label": "sc-note-box inside a Panel"
        },
        {
            "componentName": "sc-email",
            "label": "sc-email inside a Panel",
            "name": "simpleComponentWrappingScEmail",
            "mandatory": true
        },
        {
            "componentName": "sc-static-html",
            "wrapHtmlType": "wrap",
            "wrapAction": "close",
            "name": "testSimpleComponentWrapping"
        }

Resulting fields on the form:

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