@gluonjs/json-forms / packages/json-forms/src / JsonFormsMessageOverrides
Interface: JsonFormsMessageOverrides
Partial overrides accepted by createJsonFormsMessageProvider.
Properties
addItemLabel?
readonlyoptionaladdItemLabel?:string
configurationMessage?
readonlyoptionalconfigurationMessage?: (error,locale,formatNumber) =>string|null|undefined
Parameters
error
locale
string
formatNumber
(value, options?) => string
Returns
string | null | undefined
itemLabel?
readonlyoptionalitemLabel?: (index,locale) =>string|null|undefined
Parameters
index
number
locale
string
Returns
string | null | undefined
removeItemLabel?
readonlyoptionalremoveItemLabel?: (index,locale) =>string|null|undefined
Parameters
index
number
locale
string
Returns
string | null | undefined
rootLabel?
readonlyoptionalrootLabel?:string
selectPlaceholder?
readonlyoptionalselectPlaceholder?: (required,locale) =>string|null|undefined
Parameters
required
boolean
locale
string
Returns
string | null | undefined
validationMessage?
readonlyoptionalvalidationMessage?: (error,locale,formatNumber) =>string|null|undefined
Parameters
error
locale
string
formatNumber
(value, options?) => string
Returns
string | null | undefined
Example
Override only the JSON Forms infrastructure messages owned by an application while retaining per-key defaults:
import {
createJsonFormsMessageProvider,
createJsonFormsRendererRegistry,
isJsonFormsRendererRegistry,
JsonForm,
JsonSchemaResolutionError,
jsonFormsTag,
registerJsonForms,
resolveJsonSchema,
type JsonFormChangeDetail,
type JsonFormField,
type JsonFormOptions,
type JsonFormsElement,
type JsonFormsMessageOverrides,
type JsonFormsMessageProvider,
type JsonFormsMessageProviderOptions,
type JsonFormsRendererContext,
type JsonFormsRendererControl,
type JsonFormsRendererKind,
type JsonFormsRendererRegistration,
type JsonFormsRendererSelector,
type JsonFormsUiSchema,
type JsonFormValidationChangeDetail,
type JsonFormValidationError,
type JsonObject,
type JsonSchema,
type JsonSchemaResolutionOptions,
type JsonValue,
} from '@gluonjs/json-forms';
const schema = { type: 'object', properties: { email: { $ref: '#/$defs/email' }, delivery: { type: 'string', enum: ['morning', 'afternoon'] } }, required: ['email'], $defs: { email: { type: 'string', format: 'email' } } } satisfies JsonSchema;
const referenceOptions = { maxDepth: 8, maxNodes: 64 } satisfies JsonSchemaResolutionOptions;
const resolvedSchema = resolveJsonSchema(schema, referenceOptions);
const referenceError = new JsonSchemaResolutionError('ref-pointer', 'Invalid reference.');
const uischema = { type: 'VerticalLayout', elements: [{ type: 'Control', scope: '#/properties/email', label: 'Email address' }, { type: 'Control', scope: '#/properties/delivery' }] } satisfies JsonFormsUiSchema;
const data = { email: 'hello@example.test', delivery: 'morning' } satisfies JsonObject;
const value: JsonValue = data.delivery;
const errors: readonly JsonFormValidationError[] = [];
const change: JsonFormChangeDetail = { data, errors };
const validation: JsonFormValidationChangeDetail = { valid: true, errors };
const messageOverrides = { selectPlaceholder: (required: boolean) => required ? 'Choose one' : 'No selection' } satisfies JsonFormsMessageOverrides;
const messageOptions = { locale: 'en-GB', messages: messageOverrides } satisfies JsonFormsMessageProviderOptions;
const messages: JsonFormsMessageProvider = createJsonFormsMessageProvider(messageOptions);
const rendererKind: JsonFormsRendererKind = 'select';
const rendererSelector = { kind: rendererKind, path: ['delivery'] } satisfies JsonFormsRendererSelector;
const rendererRegistration = { id: 'delivery-summary', selector: rendererSelector, priority: 10, render: (context: JsonFormsRendererContext) => String(context.value ?? '') } satisfies JsonFormsRendererRegistration;
const rendererRegistry = createJsonFormsRendererRegistry([rendererRegistration]);
registerJsonForms();
const element = document.createElement(jsonFormsTag) as JsonFormsElement;
element.schema = schema;
element.uischema = uischema;
element.data = data;
element.messages = messages;
element.rendererRegistry = rendererRegistry;
const rendererControl: JsonFormsRendererControl | undefined = undefined;
const field: JsonFormField | undefined = undefined;
const options = { schema, uischema, data, messages, rendererRegistry, onChange: (event) => console.log(event.detail.data), onValidationChange: (event) => console.log(event.detail.valid) } satisfies JsonFormOptions;
const view = JsonForm(options);
console.log(element.value, value, change, validation, isJsonFormsRendererRegistry(rendererRegistry), rendererControl, field, view, resolvedSchema, referenceError.keyword);