sc-url

1 Purpose

This document is a user guide for the sc-url component as of version 5.11.

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

The sc-url definition provides fields for setting the properties of a 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 URL field in the document and database.
		Example: "name": "testScUrl"

2.3 Optional Customizable Fields

Field	Valid Values	Description
defaultValue	Any value	The value to initially load in the URL field. This can be a relative URL, a fully specified URL and even things like tel:0399991234 to call a phone number when clicked.
		Example: "defaultValue": "https://www.google.com.au"
		Defaults to no value is initially loaded.
disableSave	true	Entering a value in the URL field does not trigger the Save icon to flash.
		Exiting the form without saving the entered value does not trigger a warning message to display.
		Example: "disableSave": true
	false	Default value. Entering a value in the URL field does trigger the Save icon to flash.
		Exiting the form without saving the entered value does trigger a warning message to display.
enabled	false	The URL field is greyed out.
		A Stop icon appears on mouseover.
		A value cannot be entered in the URL field.
		Example: "enabled": false
	true	Default value. A value can be entered in the URL field.
fullWidth	true	The URL field displays full width on the form.
		Example: "fullWidth": true
	false	Default value. The URL field does not display full width on the form.
label	Any value	Defines the name of the URL field on the form i.e. the field label.
		Example: "label": "Test sc-url"
	"name" field value	Defaults to the value defined for the 'name' field, with the first letter displayed in upper case and any upper case letters displayed in lower case prefixed with an underscore.
		Example: "Test_sc_url" is the default value if the "name" field value was "testScUrl".
mandatory	true	The 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 URL field.
		Example: "mandatory": true
	false	Default value. The field displays as optional (i.e. label in black text).
openIn	newWindow	The URL opens in a new browser window or tab (the browser determines whether its new tab or window).
		Example: "openIn": "newWindow"
	overlay	Uses a popup window to overlay the URL over the current page.
		Example: "openIn": "overlay"
	popup	The URL opens in a browser pop-up.
		Example: "openIn": "popup"
	currentWindow	Default value. The URL opens in the current browser window or tab (the browser determines whether its new tab or window).
		Example: "openIn": "currentWindow"
visible	false	The URL field is not visible on the form.
		Example: "visible": false
	true	Default value. The URL field is visible on the form.

 

3 Typical sc-url 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": "testScUrl",
    "label": "Test 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.google.com",
    "disableSave":true,
    "enabled":false,
    "visible":false,

 

4 Examples

Example 1

sc-url defined with the typically needed fields.

        {
            "componentName": "sc-url",
            "name": "testScUrl",
            "label": "Test sc-url",
            "openIn": "newWindow"
        }

Resulting field on the form:

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

Resulting field in the document and database:

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

Example 2

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

        {
            "componentName": "sc-url",
            "name": "testScUrl",
            "label": "Test sc-url",
            "defaultValue": "https://www.google.com.au",
            "openIn": "newWindow"
        }

Resulting field on the form: