sc-button

This document is a user guide for the sc-button component version 5.13, released October 31, 2019.

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

2.2 Required Customizable Fields

2.3 Optional Customizable Fields

Field	Valid Values	Description
caption	Any value	The text to show on the button. Example: "caption": "Click to Activate"
		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 default value for the caption field i.e. the default value for the caption to show on the button. Example: "label": "Test sc-button"
		Defaults to null i.e. if a value is not defined for both the label and caption fields, then the button will display without caption.
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	Displays the button field as Example: "style": "btn btn-default
	btn btn-primary	Displays the button field as Example: "style": "btn btn-primary
	btn btn-success	Displays the button field as *Example: "style": "btn btn-success
	btn btn-info	Displays the button field as Example: "style": "btn btn-info
	btn btn-warning	Displays the button field as Example: "style": "btn btn-warning
	btn btn-danger	Displays the button field as Example: "style": "btn btn-danger
	btn btn-link	Displays the button field as Example: "style": "btn btn-link
	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 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://www.formbird.com','popup','width=400,height=450');}""
            "visible": false,

sc-button can also be configured to trigger a document save by setting the onClick function as follows:

            "onClick": "function() { var MainDocumentListService = $injector.get('MainDocumentListService'); MainDocumentListService.save(); }",

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://www.formbird.com','popup','width=400,height=450');}"
        },

Resulting 8 sc-button fields on the form:

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

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.