How to register a new field type?

Hi,

Thanks for this great tool, I’m trying to create a new field type (input type=file) in order to attach files to the form, but I can not found a good documentation for it.

I checked how to create Custom Renderers here Custom Renderers - JSON Forms
And also this issue about a similar topic how to define custom field type in jsonforms · Issue #1553 · eclipsesource/jsonforms · GitHub

Nut none of them were clear enough

I know you don’t offer any special integration features like an “Upload” button, but I just want to know how to create a Custom Field like type=string|boolean|integer|number that you already have.

Could you give me a specific example of how to create this kind of fields?

Thank you very much.

Hi @Alorse,

JSON Forms employs a tester based system. The registry consists of Tester/Renderer Pairs. By default for each UI Schema element all testers are invoked and the corresponding renderer wins.

The testers have the following type: (uischema, schema) => number. Your tester can inspect the corresponding uischema and schema and return a corresponding number. Therefore you can react on any custom property in your JSON Schema or UI Schema. You don’t even need a custom property but can also react on certain patterns, e.g. a special renderer for all attributes which end in name.

For example let’s say you have a special string format for which you want to have a custom renderer. Then your JSON Schema might look like this: { type: 'string', format: 'my-custom' } and you have a control pointing to that property.

Then your tester could look like this (without any safeguarding against invalid inputs):

const myTester = (uischema, schema) => {
  if(!uischema.scope || uischema.type !== 'Control' ){
    return -1:
  }
  const resolvedSchema = resolveSchema(schema, uischema.scope);
  if(resolvedSchema.type === 'string' && resolvedSchema.format === 'my-custom'){
    return 100;
  }
  return -1;
}

Or a bit shorter with our helper methods:

const myTester = rankWith(100, and(isStringControl, formatIs('my-custom')));

So to summarize: You can define arbitrary properties in JSON Schema and/or UI Schema and react to them in your tester.

Awesome, thank you very much.

I only added one more thing to create my custom format

const ajv = new Ajv()
ajv.addFormat('media-capture', {
  type: 'string'
})

If someone is interested, this is a JSON Forms React Media Capture Component, feel free to use it.

1 Like

That’s pretty cool! Good job!