Code Input

Tips & examples

A code editor bound to a form field, with syntax highlighting for the configured language.

When to use

Editing a stored snippet, template or query where indentation and highlighting matter.

Examples

Editing an email template stored on the record.

Avoid

Using it for structured JSON that should be validated — a JSON Input reports parse errors.
Using it for short single-line values, where the editor chrome outweighs the benefit.

Use instead

Json Input — Use instead for JSON, to get parse validation and a parsed value rather than raw text.

Properties

Editor properties

Configure these in the Application Designer property panel. Group headings mirror the editor where possible. Data Source is where the element gets its rows or field binding (a view/query, a connector operation, or a parent form field). References appear only for view-backed sources and map foreign-key ID columns to readable labels from another view.

Required

LanguagerequiredOne of: javascript, typescript, css, sql, xml, yaml, markdown, python, regex, text/x-regex, html, text, text/css

Configuration for language.

Choices

javascript
typescript
css
sql
xml
yaml
markdown
python
regex
text/x-regex
html
text
text/css

Default: sql

Optional

Can Change LanguageoptionalYes / no: Configuration for can Change Language.
Default: false
Data SourceoptionalSettings group: Where this element loads its data (view, query, connector, or element).
Default: none
Default ValueoptionalNot set (null): Configuration for default Value.
Default: {}
DisabledoptionalYes / no or Custom expression (yes/no): When true, the control cannot be edited.
Default: none
NullableoptionalYes / no or Custom expression (yes/no): Whether the field may be left empty.
Default: none
Show Status BaroptionalYes / no: Configuration for show Status Bar.
Default: false
Show ToolbaroptionalYes / no: Configuration for show Toolbar.
Default: false

Inside dataSource: (dataSource)

Element IDrequiredNumber or Text: Another element on the page whose data backs this field.
Default: none
Field PathrequiredList of Text or Number: Path into the source element’s data (property segments).
Default: none

Sizing

Minimum size: 1 × 1 grid cells (width × height).
Default size when dropped on a page: 2 × 3.

Expressions

Values you can read in expressions

Other parts of your app can read live values from this element in custom expressions:

elements.myCodeInput.<property>

value string Current input value of this control. elements.myCodeInput.value

When The edited source as text, before the form is saved. Pair it with a Code Field to show a read-only preview.

disabled boolean True while the control is locked and cannot be edited. elements.myCodeInput.disabled

To use one of these, open the property you want to drive on the other element, switch it to expression mode in the Expression Editor, and enter:

1
elements.myCodeInput.value

Replace myCodeInput with this element’s unique id. Select the element in Application Designer and copy the id chip at the top of the right-hand property panel.

Composition

Where you can place it

Drag this element into one of these containers:

Sample configuration

Minimal example — required fields only ↕

1
2
3
4
5
{
  "config": {
    "language": "javascript"
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{
  "config": {
    "dataSource": {
      "elementId": "myElement",
      "fieldPath": [
        "fieldPath"
      ]
    },
    "defaultValue": "defaultValue",
    "disabled": false,
    "nullable": false,
    "language": "javascript",
    "showToolbar": false,
    "showStatusBar": false,
    "canChangeLanguage": false
  }
}