Skip to main content
CYPEX Documentation
    Support
    v2.0.0 Latest stable release View changelog ->
    1. CYPEX — PostgreSQL Application Platform
    2. /
    3. Element Dictionary
    4. /
    5. Various
    6. /
    7. Code Field
    Various Referencegenerated

    Code Field

    Display code in a read-only format

    Technical id
    default_code_field

    Read-only source code with syntax highlighting, and optionally a copy button.

    When to use

    • Showing a stored snippet, query or payload where the highlighting and monospaced layout carry meaning.

    Examples

    • Displaying the SQL behind a saved report.

    Avoid

    • Using it for ordinary prose — a Text Field or Markdown Field reads better.
    • Using it where the user is meant to edit; that is a Code Input.

    Use instead

    • Code Input — Use instead when the code should be editable.

    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
    ValuerequiredText or Custom expression (text)
    Configuration for value.
    Default: SELECT COUNT(*);
    Optional
    Is CopyoptionalYes / no or Custom expression (yes/no)
    Configuration for is Copy.
    Default: false
    LanguageoptionalText or Custom expression (text)
    Configuration for language.
    Default: sql
    Show Line NumbersoptionalYes / no or Custom expression (yes/no)
    Configuration for show Line Numbers.
    Default: none
    ThemeoptionalOne of: vs, vscDarkPlus, okaidia, tomorrow, coy, coyWithoutShadows, darcula, dracula, solarizedlight, solarizedDarkAtom, materialLight, materialDark, materialOceanic, a11yDark, atomDark, base16AteliersulphurpoolLight, cb, coldarkCold, coldarkDark, duotoneDark, duotoneLight, duotoneEarth, duotoneForest, duotoneSea, duotoneSpace, ghcolors, gruvboxDark, gruvboxLight, holiTheme, hopscotch, lucario, nightOwl, nord, oneDark, oneLight, pojoaque, shadesOfPurple, synthwave84, twilight, xonokai, zTouch
    Configuration for theme.
    Choices
    • vs
    • vscDarkPlus
    • okaidia
    • tomorrow
    • coy
    • coyWithoutShadows
    • darcula
    • dracula
    • solarizedlight
    • solarizedDarkAtom
    • materialLight
    • materialDark
    • materialOceanic
    • a11yDark
    • atomDark
    • base16AteliersulphurpoolLight
    • cb
    • coldarkCold
    • coldarkDark
    • duotoneDark
    • duotoneLight
    • duotoneEarth
    • duotoneForest
    • duotoneSea
    • duotoneSpace
    • ghcolors
    • gruvboxDark
    • gruvboxLight
    • holiTheme
    • hopscotch
    • lucario
    • nightOwl
    • nord
    • oneDark
    • oneLight
    • pojoaque
    • shadesOfPurple
    • synthwave84
    • twilight
    • xonokai
    • zTouch
    Default: none

    Sizing

    • No size of its own: dropped at the platform default of 1 × 1 grid cells and resized on the page.

    Values you can read in expressions

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

    elements.myCodeField.<property>

    value string The current value. elements.myCodeField.value

    When The code currently displayed, if another element needs the same text.

    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.myCodeField.value

    Replace myCodeField 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.

    Where you can place it

    Drag this element into one of these containers:

    1
2
3
4
5

    {
  "config": {
    "value": "value"
  }
}

    1
2
3
4
5
6
7
8
9

    {
  "config": {
    "value": "value",
    "language": "language",
    "isCopy": false,
    "theme": "vs",
    "showLineNumbers": false
  }
}