InputfieldJson

JSON viewer and editor

Supports five display/edit modes. The value is always stored and returned as a JSON string, but may be set as a PHP array or object (auto-encoded on assignment).

$f = $modules->get('InputfieldJson');
$f->attr('name', 'my_json');
$f->label = 'My JSON';
$f->mode = InputfieldJson::modeTree; // editable tree (default)
$f->val('{"key":"value"}');
$form->add($f);

See Inputfield for the shared Inputfield API.

Expand all API reference

Value model

The value is always a JSON string. Setting it as an array or object auto-encodes it. An invalid JSON string is silently rejected and the previous value is kept.

// Set as a string
$f->val('{"a":1,"b":2}');

// Set as an array (auto-encoded)
$f->val(['a' => 1, 'b' => 2]);

// Get always returns a string
$json = $f->val(); // '{"a":1,"b":2}'

When a form is submitted, the incoming value is validated with json_decode(). If parsing fails, an error is added and the previous value is restored.

Modes

Constant	Value	Description
`InputfieldJson::modeTree`	`'tree'`	Editable tree with add/remove/move (default)
`InputfieldJson::modeForm`	`'form'`	Editable form view of the tree
`InputfieldJson::modeText`	`'text'`	Raw text editor
`InputfieldJson::modeCode`	`'code'`	Raw text editor with syntax highlighting
`InputfieldJson::modeView`	`'view'`	Read-only tree (also used by `renderValue()`)

$f->mode = InputfieldJson::modeCode;  // raw editor with syntax help
$f->mode = InputfieldJson::modeView;  // read-only tree

Properties

Property	Type	Default	Description
`mode`	string	`'tree'`	Editor mode — one of the mode constants above
`useMainMenuBar`	bool	`false`	Show the jsoneditor main menu bar
`useNavigationBar`	bool	`false`	Show the jsoneditor navigation bar
`useSearch`	bool	`false`	Enable search (requires `useMainMenuBar`; avoid in PW admin)

View-only rendering

renderValue() always uses modeView (read-only tree) regardless of the configured mode, making it safe to use in contexts where editing is not intended.

echo $f->renderValue();

Notes

The editor validates that submitted input is valid JSON, but does not sanitize the content. Treat values from editable instances as untrusted input.
useSearch requires useMainMenuBar to be enabled and does not render well in the ProcessWire admin due to z-index conflicts.
Source file: wire/modules/Inputfield/InputfieldJson/InputfieldJson.module.php

API reference: methods, properties, hooks

$json = json_encode([
  'array' => [1, 2, 3],
  'boolean' => true,
  'null' => null,
  'number' => 123,
  'object' => ['a' => 'b', 'c' => 'd'],
  'string' => 'Hello World'
]);

// Example of viewable JSON
$f = $modules->get('InputfieldJson');
$f->attr('name', 'view_json');
$f->label = 'View JSON';
$f->mode = 'view'; // options: tree, form, text, code, view
$f->val($json);
$form->add($f);

// Example of editable JSON
$f = $modules->get('InputfieldJson');
$f->attr('name', 'edit_json');
$f->label = 'Edit JSON';
$f->mode = 'tree'; // options: tree, form, text, code, view
$f->val($json);
$form->add($f);

Warning: editable JSON can contain anything. This Inputfield only validates that it is valid JSON, not that it is safe JSON for your intended purpose.

Click any linked item for full usage details and examples. Hookable methods are indicated with the icon. In addition to those shown below, the InputfieldJson class also inherits all the methods and properties of: Inputfield, WireData and Wire.

Common
Properties

Common

Name	Return	Summary
InputfieldJson::getConfigInputfields() InputfieldJson::getConfigInputfields() InputfieldJson::getConfigInputfields()	`InputfieldWrapper`	Configuration
InputfieldJson::getModuleInfo() InputfieldJson::getModuleInfo() InputfieldJson::getModuleInfo()	None
InputfieldJson::isBadJson() InputfieldJson::isBadJson(string $json) InputfieldJson::isBadJson(string $json)	`string`	Is given JSON bad?
InputfieldJson::processInput() InputfieldJson::processInput(WireInputData $input) InputfieldJson::processInput(WireInputData $input)	`self` `Inputfield`	Process input
InputfieldJson::render() InputfieldJson::render() InputfieldJson::render()	`string`	Render Inputfield
InputfieldJson::renderValue() InputfieldJson::renderValue() InputfieldJson::renderValue()	`string`	Render just the value (not input) in text/markup for presentation purposes
InputfieldJson::setAttribute() InputfieldJson::setAttribute($key, string $value) InputfieldJson::setAttribute($key, string $value)	`self`	Set attribute

Properties

Name	Return	Summary
InputfieldJson::mode	`string`	One of: 'tree', 'form', 'text', 'code', 'view'. See mode* constants. DEFAULT: tree
InputfieldJson::useMainMenuBar	`bool` `int`	Show a main menu bar? DEFAULT: false
InputfieldJson::useNavigationBar	`bool` `int`	Show a navigation bar? DEFAULT: false
InputfieldJson::useSearch	`bool` `int`	Enable search function? Requires $useMainMenuBar, doesn't work well in PW admin. DEFAULT: false
InputfieldJson::value	`string` `array`	JSON value always returned as a string, but may be optionally set as an array.

Additional methods and properties

In addition to the methods and properties above, InputfieldJson also inherits the methods and properties of these classes:

API reference based on ProcessWire core version 3.0.269