sc-url
This document is a user guide for the sc-url component version 6.5.84.
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 
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 is 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:
- 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:
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:
Resulting field on the form after entering and saving a value:
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:
Resulting pop-up on the form after clicking the sc-url field icon :
