Json Field

Tips & examples

A read-only interactive code viewer tree containing collapsible object nesting hierarchies and visual type-specific markers.

When to use

Presenting structured data payloads, complex nested records, or configuration logs in a clean, expandable tree structure.
Providing developers or administrative users with readable debugging viewports that indicate property data types (string, number, boolean) explicitly.

What you need

Sourced strictly through custom expressions capable of invoking direct structural data objects, dynamic API queries, or active field value references.

JSON objects, multidimensional arrays, raw metadata text strings, or dynamic element values evaluated in expression mode.

Examples

Rendering an incoming webhook response payload or an external system integration response array.
Displaying dynamic system configurations parsed directly out of a parent input control’s current state.

Avoid

Using for simple, flat text data presentation, use standard text layouts or markdown-enabled data displays instead.
Allocating small horizontal widths under 6 grid column boxes, which causes deep nested trees to wrap heavily and break visibility thresholds.

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.

JSON

ValuerequiredCustom expression: A custom expression textbox referencing a valid JSON block, a network query output, or an active element value track.
Example elements.default_json_input_55f209791cb9.value
Default: buildCustomExpressionValue("{}")

Advanced

CollapsedoptionalYes / no: A boolean switch that controls the initial layout rendering state. When turned on, all nested node blocks are tucked closed until manually clicked open.
Default: true
Enable ClipboardoptionalYes / no: A boolean switch that appends a convenient one-click utility badge allowing users to copy the entire raw data block onto their local clipboard instantly.
Default: false

Sizing

Minimum size: 2 × 1 grid cells (width × height).

Accessibility

Renders tree layout elements using appropriate screen structures. Collapsible node headers toggle expand states using focus hooks to keep assistive screen software updated on dynamic code shifts.

Up and Down arrows scroll focused nodes.
Left and Right arrows collapse or open nested object hierarchies.

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": {
    "value": "@@expression:'value'"
  }
}

1
2
3
4
5
6
7
{
  "config": {
    "value": "@@expression:'value'",
    "collapsed": false,
    "enableClipboard": false
  }
}

Ready-made setups

Interactive Code Payload Inspector ↕

Configures a wide JSON viewer field that references an active form entry value, initializing the property structure in a tidy collapsed format with clipboard utilities active.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{
  "config": {
    "json": {
      "jsonExpression": "@@expression: elements.default_json_input_55f209791cb9.value"
    },
    "advanced": {
      "collapsed": true,
      "enableClipboard": true
    }
  }
}