Skip to content

sc-ace-text

This document is a user guide for the sc-ace-text component version 6.5.64 .

go-to-typical-definition

sc-ace-text-field-Example-1-Image-1

 

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:

  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-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:

sc-ace-text-field-Example-1-Image-1

To enter fullscreen, click the icon Icon-enter-full-screen in the top right corner of the sc-ace-text field.

Resulting field on the form before saving the entered value:

sc-ace-text-field-Example-1-Image-2

Resulting field on the form after saving the entered value:

sc-ace-text-field-Example-1-Image-3

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:

sc-ace-text-field-Example-2-Image-1