How can I modify JSON Forms Editor to allow editable JSON Schema per form

General
1

Hi, I’ve picked JSON Forms Editor as the base for my Form Builder. Works great! However I’ve hit a problem I didn’t expect.
Looks like the “JSON Schema” object is very tightly coupled with the components available in “Controls” section of the Palette. So basically, the JSON Schema defines the elements available to the user for Drag & Drop.
My use case is different though. I need:

  • the palette always exposing a set of controls (Name, Email, Age, etc) which the user can pick from
  • JSON Schema object can be empty initially (as well as UI Schema, of course)
  • Update the JSON Schema with just the properties the user picks for his form. Example: If the user decides to include the “name” and “occupation” fields in the form, then the JSON Schema becomes
{
  type: "object",
  properties: {
    name: { type: "string" },
    ocupation: { type: "string" },
  },
}
  • The Editor should accept a JSON schema object like above during initialization and allow further editing.

Has anyone else solved this problem? Can you share your approach to this ?

Going a bit technical, my approach would be:

  • keep using the “schema” property of the reducer to be responsible for generating Controls available on the palette
  • add a new property on EditorState object, generated by the Reducer, with the purpose of keeping up-to-date the form controls which have been included so far in current form. Let’s say it’s name is: usedPaths
  • when saving the form, hydrate the resulted JSON schema, using for example. schemasUtil.getFromPath(). This can be sent to the backend along with the UI Schema
  • when initializing the Editor with a given JSON Schema and UI schema representing a form, during processing of the SET_SCHEMA action, make sure to populate the new usedPaths property as well.

I feel the above is more like a workaround that’s why not really sure it’s valid. Can anyone share please their experience with similar requirements?

2 Likes
2

Hi @ptimich,

You can add arbitrary elements to the palette. At the moment we offer UI Schema elements and the JSON Schema elements but you could also add elements representing a string, boolean etc. Of course you could also not be sooo generic and just offer (or additionally offer) often used properties like mail, name etc.

Once the user drag/drops them in you can then modify both the schema and the uischema accordingly instead of only the uischema. In the same vain, editing a label within the main panel or the properties panel could also be used to not only set a label in the uischema but maybe also adjusting the property name in the schema.

I’m not super deep into the current code base but I’m not sure whether this can be accomplished just by consuming the editor. It could very well be that some more API needs to be more exposed to being able to implement all use cases without modifying the editor source. However when using the editor just as a base and forking it this should be relatively easy to implement.

You might want to look at this PR where we experimented with making the editor more generic with string, boolean etc. attributes in the palette. You could to the same way, just offer your more specialized controls instead.