Skip to content

WidgetJson

Overview

A JSON editor widget backed by CodeMirror. It edits real JSON values, not stringified copies, so JSONField submissions keep their object/scalar shape.

Theme entry: WidgetJson

Props

NameTypeRequiredDefaultDescription
nameStringundefinedThe widget name; falls back to the field context value when omitted.
labelStringundefinedThe label displayed next to the widget; falls back to the field context value when omitted.
helpStringundefinedHelp text displayed alongside the widget; falls back to the field context value when omitted.
readOnlyBooleanfalseWhether the widget is read-only; falls back to the field context value when omitted.
requiredBooleanundefined, // let the default from field context take overWhether the widget is required; falls back to the field context value when undefined.
modelValueString|Number|Boolean|Array|ObjectundefinedThe widget's bound value (v-model); used only in contextless mode.
fieldToWidgetObject|FunctionnullAdapter that converts the form model value into a value suitable for the widget UI.
widgetToFieldObject|FunctionnullAdapter that converts the widget UI value back into a form model value for validation and submission.
invalidBooleanundefinedManually set the invalid state when not in a field context.
warningBooleanundefinedManually set the warning state when not in a field context.
disabledBooleanfalseWhether the widget is disabled.
disabledFnFunctionnullA function that returns whether the widget should be disabled; takes precedence over the disabled prop.
contextlessBooleanfalseWhen true, the widget ignores any surrounding field or form context and manages its own state.
displayDependenciesArray() => []Field paths whose values the widget needs for display logic; registered with the field context.
themeOverrideString|Object|ArraynullA partial theme object merged with the component's default theme; accepts a class string, class array, or theme object.
prettyPrintbooleantrueWhether values should be serialized with indentation.
indentnumber2Number of spaces to use when prettyPrint is true.
formatOnBlurbooleantrueWhether valid JSON should be reformatted when the editor loses focus.

Events

NameDescription
update:modelValueEmitted when the widget value changes.

Full event reference

Source

client/lib/widgets/WidgetJson.vue

Documents matching: server v3.0.0a1.post1client v3.0.0-alpha.2