Skip to content

sc-button

1 Purpose

sc-button places a button field on a form.

The sc-button definition provides fields for setting the properties of a button field and is fully described below.

 

2 Definition

sc-button 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

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

2.2 Required Customizable Fields

Field Valid Values Description
name Any value written in camel case. Defines the name of the button field in the document and database.
Example: "name": "testScButton"

2.3 Optional Customizable Fields

Field Valid Values Description
caption Any value The text to show on the button.
Example: "caption": "Click to Activate"
"label" field value Defaults to the value defined for the "label" field.
enabled false The button field is greyed out.
A Stop icon appears on mouseover.
The button field cannot be clicked.
Example: "enabled": false
true Default value. The button field is not greyed out, a Stop icon does not appear on mouseover and the button field can be clicked.
fullWidth true The button field displays full width on the form.
Example: "fullWidth": true
false Default value. The button field does not display full width on the form.
label Any value Defines the name of the button field on the form i.e. the field label.
Example: "label": "Test sc-button"
Defaults to no field label is displayed.
mandatory true The button field displays as mandatory (i.e. label in red text with an asterisk).
Example: "mandatory": true
false Default value. The field displays as optional (i.e. label in black text).
Recommend omitting the mandatory field from the sc-button definition as it serves no practical purpose.
onClick function definition Defines the function to perform on clicking the button field.
Example: "onClick": "function() { alert('Button Click'); }"
Default behaviour triggers the "OnFieldChange" event on clicking the button field.
style Use to define the button style e.g. background colour, font colour.
btn btn-default Example: "style": "btn btn-default displays the button field as sc-button-btn-default-style
btn btn-primary Example: "style": "btn btn-primary displays the button field as sc-button-btn-primary-style
btn btn-success Example: "style": "btn btn-success displays the button field as sc-button-btn-success-style
btn btn-info Example: "style": "btn btn-info displays the button field as sc-button-btn-info-style
btn btn-warning Example: "style": "btn btn-warning displays the button field as sc-button-btn-warning-style
btn btn-danger Example: "style": "btn btn-danger displays the button field as sc-button-btn-danger-style
btn btn-link Example: "style": "btn btn-link displays the button field as sc-button-btn-link-style
btn btn-block The button spans the full width of the space allocated to the button field.
Example: See the 6th button of Example 1
Customized Style To use a customized style, first define the style using the sc-static-html field. Then the style value should contain btn-link and the custom style.
Example: See the 8th button of Example 1
btn btn-default Default value.
visible false The button field is not visible on the form.
Example: "visible": false
true Default value. The button field is visible on the form.

 

3 Typical sc-button Definition

Below is a typical sc-button definition, defined with its required fields plus any optional field whose value is typically other than its default value.

        {
            "componentName": "sc-button",
            "name": "testScButton",
            "caption": "Click to Activate",
            "style": "btn btn-default",
            "onClick": "function() {alert('Hello World');}"
        },

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.
Two examples of the "onclick" field are given.

            "enabled":false,
            "fullWidth":true,
            "label": "Test sc-button",
            "onClick": "function() {alert('Hello World');}",
            "onClick": "function() {window.open('https://fb.formbird.com/#/public','popup','width=400,height=450');}"
            "visible": false,

 

4 Examples

Example 1

Eight sc-button fields defined with different styles and/or behaviours:

  1. The 1st button has the style "btn-default" and the button click opens a modal message dialog.
  2. The 2nd button with the style "btn-success" and the button click opens a modal message dialog.
  3. The 3rd button with the style "btn-info" and the button click opens a modal message dialog.
  4. The 4th button with the style "btn-warning" and the button click opens a modal message dialog.
  5. The 5th button with the style "btn-danger" and the button click opens a modal message dialog.
  6. The 6th button with the style "btn-danger btn block" and the button click opens a modal message dialog.
  7. The 7th button with the style "btn-link" and the button click opens a web page in a pop-up.
  8. The 8th button with the customized style "btn btn-link customstyle1" and the button click opens a web page in a pop-up.
        {
            "componentName": "sc-button",
            "label": "Test sc-button Style btn-default",
            "name": "testScButtonStyleDefault",
            "style": "btn btn-default",
            "caption": "Click to Activate",
            "onClick": "function() {alert('Hello World');}"
        },
        {
            "componentName": "sc-button",
            "label": "Test sc-button Style btn-success",
            "name": "testScButtonStyleSuccess",
            "onClick": "function() {alert('Hello World');}",
            "style": "btn btn-success",
            "caption": "Click to Activate"
        },
        {
            "componentName": "sc-button",
            "label": "Test sc-button Style btn-info",
            "name": "testScButtonStyleInfo",
            "onClick": "function() {alert('Hello World');}",
            "style": "btn btn-info",
            "caption": "Click to Activate"
        },
        {
            "componentName": "sc-button",
            "label": "Test sc-button Style btn-warning",
            "name": "testScButtonStylWarning",
            "onClick": "function() {alert('Hello World');}",
            "style": "btn btn-warning",
            "caption": "Click to Activate"
        },
        {
            "componentName": "sc-button",
            "name": "testScButtonStyleDanger",
            "caption": "Click to Activate",
            "label": "Test sc-button Style btn-danger",
            "style": "btn btn-danger",
            "onClick": "function() {alert('Hello World');}"
        },
        {
            "componentName": "sc-button",
            "name": "testScButtonDangerBlock",
            "caption": "Click to Activate",
            "label": "Test sc-button Style btn-danger btn-block",
            "style": "btn btn-danger btn-block",
            "onClick": "function() {alert('Hello World');}",
            "fullWidth": true
        },
        {
            "componentName": "sc-static-html",
            "html": "<br/>",
            "fullWidth": true
        },
        {
            "componentName": "sc-button",
            "onClick": "function() {window.open('https://fb.formbird.com/#/public','popup','width=400,height=450');}",
            "style": "btn btn-link",
            "label": "Test sc-button Style btn-link",
            "caption": "Formbird makes it possible",
            "name": "testScButtonLink"
        },
        {
            "componentName": "sc-static-html",
            "html": "&lt:style>.btn.customstyle1 {text-decoration: none; border-style: solid; border-color: blue; font-weight: bold; color:black; background-color:hsl(180,100%,50%)}&lt:/style>",
            "visible": false,
            "name": "buttonStyleCustom1"
        },
        {
            "componentName": "sc-button",
            "name": "testButtonCustomStyle1",
            "label": "Test sc-button style btn-link customstyle1",
            "caption": "Formbird makes it possible",
            "style": "btn btn-link customstyle1",
            "onClick": "function() {window.open('https://fb.formbird.com/#/public','popup','width=400,height=450');}"
        },

Resulting 8 sc-button fields on the form:

sc-button-field-Example-1-Image-1

Resulting modal message pop-up on clicking any one of the first 6 buttons:

sc-button-field-Example-1-Image-2

Resulting web page displayed in a pop-up on clicking either of the last 2 buttons:

The pop up can be enlarged by dragging its sides or corners.

sc-button-field-Example-1-Image-3