Json Input

Tips & examples

An interactive code input interface container panel outfitted with structural workspace controls to append property objects, clear array items, edit dictionary keys, and copy data configurations.

When to use

Allowing users to interactively construct, edit, and manipulate complex hierarchical JSON datasets inside a form context.
Providing an interface for creating dynamic structural payloads where keys can be added, nested arrays built, or values assigned on the fly.

What you need

Deactivated by default until a default_form is present on the page layout viewports. Requires establishing a connection path linking Element ID and Field Path references.

Form-bound text or JSON object attributes that accept multi-tier schema properties, document maps, and arrays.
Data Source section control links stay locked until a valid default_form structure layer is dropped into the current workspace canvas layout.

Examples

A developer portal configuration dashboard input where administrators add custom system parameters, metadata keys, and feature flags dynamically.
An advanced request payload creation screen bound directly to database text fields tracking structured document arrays.

Avoid

Using for static, read-only JSON code payloads display, use the read-only json_field instead.
Attempting to test or initialize the editor panel’s inline menu mock payload while an active Data Source connection is running, as form bounds completely lock independent field manipulations.
Configuring the element data bindings on the page layout before establishing a valid parent default_form container element.

Use instead

Json Field — The nested data structure is purely read-only informational visualization and does not accept user modifications or key deletions.

Pairs well with

Form — Optional dataset coordinator. When actively linked, it intercepts state changes, pushes structural schema validations, and binds output payloads directly into the global form submission data model.

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.

Data Source

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

Input

Default ValueoptionalNot set (null): The initial JSON value loaded into the editor before user interaction.
Default: none
DisabledoptionalYes / no or Custom expression (yes/no): When true, the control cannot be edited.
Example false
Default: none
NullableoptionalYes / no or Custom expression (yes/no): Whether the field may be left empty.
Example false
Default: none

Advanced

CollapsedoptionalYes / no: Controls initial tree folding behavior when the editor opens.
Default: none
Enable ClipboardoptionalYes / no: Adds a one-click copy action for the current JSON value.
Default: none

Sizing

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

Translatable labels

label — The localized heading text string block displayed prominently directly above the interactive editing workspace canvas perimeter lines.

Accessibility

Each interactive tree header command and add/delete key control switch maps keyboard tab focus states, broadcasting context level transformations to screen readers as object structure weights adjust.

Tab cycles focus through tree properties, input blocks, and action selectors.
Enter or Spacebar triggers creation or key removal routines on active operation keys.

Expressions

Values you can read in expressions

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

elements.myJsonInput.<property>

value any Current input value of this control. elements.myJsonInput.value

When The parsed object, not the raw text — read a property straight off it. Empty while the editor content is not valid JSON.

errors any Field-level validation errors after submit or blur. elements.myJsonInput.errors

When Populated while the content cannot be parsed. Use it to block a Save button rather than letting an invalid document reach the server.

disabled boolean True while the control is locked and cannot be edited. elements.myJsonInput.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.myJsonInput.value

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

Placement notes

Form — Can be nested directly inside or placed alongside form layouts. When a form is linked as a data source, it transitions behavior from local state management to form-bound schema state tracking.
Grid — Can operate as an independent component placed anywhere on the page grid layout canvas when managing data via local expressional references without a direct form connection.

Sample configuration

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

Ready-made setups

Interactive Metadata Object Builder ↕

Configures a wide structural input area inside a form, leveraging automated expand controls, copy utilities, and dynamic data-binding parameters.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
{
  "config": {
    "dataSource": {
      "elementId": "systemConfigFormWrapper",
      "fieldPath": [
        "customPropertiesManifest"
      ]
    },
    "input": {
      "defaultValue": {},
      "disabled": "@@expression: false",
      "nullable": true
    },
    "advanced": {
      "collapsed": false,
      "enableClipboard": true
    }
  }
}