sc-url
The typical sc-url definition shown later in this document will place a signature field on a form similar to the one shown above.
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:
- 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 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: