ginkgobioworks / react-json-schema-form-builder

Visual editor for forms based on json schema, built in React JS
Apache License 2.0
325 stars 83 forks source link

Enable the visual form builder to recognize external refs #492

Open jamieleecho opened 1 year ago

jamieleecho commented 1 year ago

The visual form builder currently is able to interpret internal refs, but not external refs. Adding external refs would allow developers to create libraries of reusable components corresponding to standardized data structures. This could be a boon for biological contexts because common biological components (NCBI organisms or something) can be defined in a common library and reused from form to form.

For Ginkgo, this would allow us to integrate the form builder to the Standardized Schema Library that we are building out for Servicely.

Here's what i mean: Link to demo of form builder: https://ginkgobioworks.github.io/react-json-schema-form-builder/

The form builder supports building common components, but these get defined as part of the JSON schema itself:

image

The definition is put directly into the definitions section of the JSON Schema

image

Which can be referenced in the main form builder:

image image

See:

    newInput1: {
      '$ref': '#/definitions/commonComponent1',
      title: 'New Input 1',
      description: ''
    }

But if i wanted to $ref an external schema:

image

See:

  properties: {
    newInput1: {
      '$ref': 'http://servicely/named/request/input/sample',
      title: 'New Input 1',
      description: ''
    }

JSON Schema Form doesn't know what to do:

image

image.png

What would be really useful is to be able to pass in a library of named schema fragments (so schema fragments that have an $id field) into the constructor of the component and then have the form builder be able to reference these schema fragments without the schema fragment actually needing to be in the schema's definition section

qw4n7y commented 11 months ago

+1