Skip to content

sc-url

This document is a user guide for the sc-url component version 6.5.84.

go-to-typical-definition

sc-url-field-Example-1-Image-2

The typical sc-url definition shown later in this document will place a sc-url field on a form similar to the one shown above.

1 Purpose

sc-url places a URL field on a form, allowing the user to enter or edit the URL address of a resource on the Internet.

The URL address can be a relative URL address or a fully specified URL address.

The URL address can be a web address of an external Internet page or the web address of an internal Formbird document. Clicking the sc-url field icon Icon-sc-url-Open-URL will open the resouce located at the web address.

The URL address can even be things like tel:0399991234 to call a phone number when sc-url field icon Icon-sc-url-Open-URLis clicked.

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

2 Definition

sc-url 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-url The component name.
Example:
"componentName": "sc-url"

2.2 Required Customizable Fields

Field Valid Values Description
name Any value written in camel case. Defines the name of the sc-url field in the document and database.
Example:
"name": "typicalDefnScUrl"

2.3 Optional Customizable Fields

Field Valid Values Description
defaultValue Any value The URL address to initially load in the sc-url field.
The URL address can be:
  • A relative URL or a fully specified URL.
  • The web address of an external Internet page or the web address of an internal Formbird document. Clicking the sc-url field icon Icon-sc-url-Open-URL will open the resouce located at the web address.
  • Even be things like tel:0399991234 to call a phone number when sc-url field icon Icon-sc-url-Open-URLis clicked.

    • Example:
      "defaultValue": "https://www.formbird.com"

      Example:
      "defaultValue": "https://comp-dev-ng.formbird.com/form/7424dc20-ab0d-11ec-8a9d-fbca7c14cfdb"
    Defaults to no value is initially loaded.
    disableSave true Changing the sc-url field value (i.e. entering or editing a url value) does not trigger the Save icon to flash.
    Exiting the form without saving changes to the sc-url field value does not trigger a warning message to display.
    In the Angular version of the sc-url component, clicking the Save icon will not save the sc-url field value to the document.
    In the AngularJS version of the sc-url component, clicking the Save icon will save the sc-url field value to the document.

    Example:
    "disableSave": true
    false Default value.
    Changing the sc-url field value (i.e. entering or editing a url value) does trigger the Save icon to flash.
    Exiting the form without saving changes to the sc-url field value does trigger a warning message to display.
    In both the Angular and AngularJS versions of the sc-url component, clicking the Save icon will save the sc-url field value to the document.
    enabled false The sc-url field is greyed out.
    A Stop icon appears on mouseover of the sc-url field.
    A value cannot be entered in the sc-url field.
    Example:
    "enabled": false
    true Default value.
    The sc-url field is not greyed out.
    A Stop icon does not appear on mouseover of the sc-url field.
    A value can be entered in the sc-url field.
    fullWidth true The sc-url field displays full width on the form.
    Example:
    "fullWidth": true
    false Default value.
    The sc-url field does not display full width on the form.
    label Any value Defines the name of the sc-url field on the form i.e. the field label.
    Example:
    "label": "Typical Defn sc-url"
    Defaults to the sc-url field displays on the form without a field label.
    mandatory true The sc-url field displays as mandatory (i.e. label in red text with an asterisk).
    Saving without a value, a message prompts the user to enter a value for the sc-url field.
    Example:
    "mandatory": true
    false Default value.
    The field displays as optional (i.e. label in black text).
    Saving without a value, a message does not prompt the user to enter a value for the sc-url field.
    openIn newWindow The sc-url web address 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 sc-url value is an internal web address of a Formbird document i.e. do not use when the sc-url value is an external web address.
    Opens a Formbird document in a popup window overlaying the current page.
    Example:
    "openIn": "overlay"
    popup The sc-url web address opens in a browser pop-up.
    Example:
    "openIn": "popup"
    currentWindow Default value.
    The sc-url web address opens in the current browser window or tab (the browser determines whether its new tab or window).
    Example:
    "openIn": "currentWindow"
    visible false The sc-url field is not visible on the form.
    Example:
    "visible": false
    true Default value.
    The sc-url field is visible on the form.

    3 Typical Definition

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

    {
        "componentName": "sc-url",
        "name": "typicalDefnScUrl",
        "label": "Typical Defn sc-url",
        "openIn": "newWindow"
    }
    

    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.

        "mandatory": true,
        "fullWidth": true,
        "defaultValue":"https://www.formbird.com",
        "disableSave":true,
        "enabled":false,
        "visible":false,
    

    4 Examples

    Example 1

    sc-url defined with the typically needed fields.

            {
                "componentName": "sc-url",
                "name": "typicalDefnScUrl",
                "label": "Typical Defn sc-url",
                "openIn": "newWindow"
            }
    

    Resulting field on the form:

    sc-url-field-Example-1-Image-1

    Resulting field on the form after entering and saving a value:

    sc-url-field-Example-1-Image-2

    Resulting field in the document and database:

    "typicalDefnScUrl": "https://www.formbird.com"

    Example 2

    sc-url defined with the typically needed fields plus the optional field "defaultValue".

            {
                "componentName": "sc-url",
                "name": "nonTypicalDefnScUrl",
                "label": "Nontypical Defn sc-url",
                "defaultValue": "https://www.formbird.com",
                "openIn": "popup"
            }
    
    

    Resulting field on the form:

    sc-url-field-Example-2-Image-1

    Resulting pop-up on the form after clicking the sc-url field icon Icon-sc-url-Open-URL:

    sc-url-field-Example-2-Image-2