sc-ace-text
This document is a user guide for the sc-ace-text component version 6.5.64 .
1 Purpose
sc-ace-text places an Ace code editor field on a form. Ace is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. Ace is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.
The sc-ace-text definition provides fields for setting the properties of an ace text field and is fully described below.
2 Definition
sc-ace-text 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-ace-text | The component name. Example: "componentName": "sc-ace-text" |
2.2 Required Customizable Fields
| Field | Valid Values | Description |
|---|---|---|
| name | Any value written in camel case | Defines the name of the sc-ace-text field in the document and database. Example: "name": "typicalDefnScAceText" |
2.3 Optional Customizable Fields
| Field | Valid Values | Description |
|---|---|---|
| defaultValue | Any text | The value to initially load in the sc-ace-text field. Example: "defaultValue": "this is a comment\nnext line\nnext line\n\nfunction test(){}" |
| Defaults to no value is initially loaded in the sc-ace-text field. | ||
| disableSave | true | Changing the sc-ace-text field value (i.e. entering or editing a value) does not trigger the Save icon to flash. Exiting the form without saving changes to the sc-ace-text field value does not trigger a warning message to display. In the Angular version of the sc-ace-text component, clicking the Save icon will not save the sc-ace-text field value to the document. In the AngularJS version of the sc-ace-text component, clicking the Save icon will save the sc-ace-text field value to the document. Example: "disableSave": true |
| false | Default value. Changing the sc-ace-text field value (i.e. entering or editing a value) does trigger the Save icon to flash. Exiting the form without saving changes to the sc-ace-text field value does trigger a warning message to display. In both the Angular and AngularJS versions of the sc-ace-text component, clicking the Save icon will save the sc-ace-text field value to the document. |
|
| enabled | false | The sc-ace-text field is greyed out. A Stop icon appears on mouseover. A value cannot be entered in the sc-ace-text field. Example: "enabled": false |
| true | Default value. The sc-ace-text field is not greyed out. A Stop icon does not appear on mouseover. A value can be entered in the sc-ace-text field. |
|
| fontSize | Any numeric pixel value | The sc-ace-text field text font size on the form. Example: "fontSize": "22px" |
| 18px | Default value. | |
| fullWidth | true | The sc-ace-text field displays full width on the form. Recommend displaying the sc-ace-text field in full width. Example: "fullWidth": true |
| false | Default value. The sc-ace-text field does not display full width on the form. |
|
| label | Any value | Defines the name of the sc-ace-text field on the form i.e. the field label. Example: "label": "Typical Defn sc-ace-text" |
| Defaults to no field label is displayed. | ||
| liveUpdates | true | As changes occur to the sc-ace-text field value, they are automatically saved to the document. Example: "liveUpdates": true |
| false | Default value. As changes occur to the sc-ace-text field value, they are not automatically saved to the document. |
|
| mandatory | true | The sc-ace-text field displays as mandatory (i.e. label in red text with an asterisk). Saving without a sc-ace-text field value, a pop-up message displays prompting the user to enter a value for the sc-ace-text field. Removing the sc-ace-text field value, "This field is required" in red text will display below the sc-ace-text field Example: "mandatory": true |
| false | Default value. The sc-ace-text field displays as optional (i.e. label in black text). Saving without a value, a pop-up message does not display prompting the user to enter a value for the sc-ace-text field. Removing a sc-ace-text field value, "This field is required" in red text will not display below the sc-ace-text field |
|
| scriptEditMode | Any supported ace editor Mode | Language used for checking if entered text complies with the coding rules. Refer to GitHub:ace editor mode Example: "scriptEditMode": nools |
| javascript | Default value. | |
| scriptEditTheme | Any supported ace editor theme | Theme to be applied to sc-ace-text field. Refer to GitHub:ace editor theme Examples: "scriptEditTheme": "dawn""scriptEditTheme": "twighlight" |
| terminal | Default value. | |
| showGutter | false | The sc-ace-text field does not display line numbers at the left hand side. Example: "showGutter": false |
| true | Default value. The sc-ace-text field displays line numbers at the left hand side. |
|
| textFormat | Sets how the entered data is saved to the resulting document. | |
| json | The entered value will be treated as a stringified json field and saved in the document as a json text field with delimited quotes and newlines. Example: "textFormat": "json" |
|
| raw-json | The entered value is saved in the document as a json object. Example: "textFormat": "raw-json" |
|
| text | Default value. The entered value is saved in the document as a text field. |
|
| visible | false | The sc-ace-text field is not visible on the form. Example: "visible": false |
| true | Default value. The sc-ace-text field is visible on the form. |
3 Typical Definition
Below is a typical sc-ace-text definition, defined with its required fields plus any optional field whose value is typically other than its default value.
{
"componentName": "sc-ace-text",
"name": "typicalDefnScAceText",
"label": "Typical Defn sc-ace-text",
"fullWidth": true
}
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.
"defaultValue": "this is a comment\nnext line\nnext line\n\nfunction test(){}",
"disableSave": true,
"enabled": false,
"fontSize": "22px"
"liveUpdates": true,
"mandatory": true,
"scriptEditMode": "nools",
"scriptEditTheme": "dawn",
"showGutter": false,
"textFormat": "raw-json",
"visible": false,
4 Examples
Example 1
sc-ace-text defined with the typically needed fields.
{
"componentName": "sc-ace-text",
"name": "typicalDefnScAceText",
"label": "Typical Defn sc-ace-text",
"fullWidth": true
}
Resulting field on the form:
To enter fullscreen, click the icon 
in the top right corner of the sc-ace-text field.
Resulting field on the form before saving the entered value:
Resulting field on the form after saving the entered value:
Resulting field in the document and database after saving the document:
"typicalDefnScAceText": "{\"type\": \"vehicle\", \"vehicleType\": \"bus\", \"isElectric\": true, \"seats\": 34}"
Example 2
sc-ace-text defined as:
{
"componentName": "sc-ace-text",
"name": "nonTypicalDefnScAceText",
"label": "Nontypical Defn sc-ace-text",
"fontSize": "22px",
"mandatory": true,
"scriptEditMode": "nools"
"scriptEditTheme": "dawn",
"textFormat": "raw-json"
}
Resulting field on the form:
