1Hi everyone, currently I need to create quite a few Forms, based on already existing data. JSONForms has this nice ability to just dump in data and it generates a schema and uiSchema which usually are pretty good for a start.
But as always things need to be tweaked, so my question is, is there a way to get the fully generated uiSchema by JsonForms?
I found the generateDefaultUISchema() but it seems to only give me a partial generated uiSchema.
Hi @benjamin-b-s(benjamin-b-s), the generateDefaultUISchema is the one which is also used internally in JSON Forms. You don’t need to import it directly, we export it via Generate.uiSchema(schema).
It produces a simple vertical layout where each property is handled by a control. Nested objects are then handled by the respective renderer. For example when a control points to a type: object element, the object control renderer will itself generate a simple vertical layout (actually using the same functionality) for each of its properties. Therefore the generated ui schemas can be flat.
If you’d like a different behavior I would recommend just copying the the ui schema generation code and adjust it for your needs. You can also take a look at this PR where a “deep ui schema generator” was also suggested for JSON Forms.
As the discussion on the PR points out, the Generate.uiSchema only returns root-level schema elements. So, in the short term, while the PR is being processed, is there a way for me to get the full UI Schema for a complex data structure?
JSONForms is awesome, regardless - it got from data to UI for a complex use-case in just a few minutes, thanks!
Hi @nmandyam, we currently don’t consider merging the PR as it only solves this specific sub problem with usually requires additional changes anyway. Also it circumvents the usual way JSON Forms operates which is to let the renderers generate the next level of UI schema themselves. For example it’s not clear whether such a “deep” generator should generate “detail” UI schemas or avoid them, which would require further customization options.
However it would be interesting to generalize the contribution so all invocations of UI Schema generations in JSON Forms can be customized.
If you want to generate the full UI Schema you can copy the generator code from the PR.
What is the use case for which you need the full UI Schema beforehand?
@sdirix thank you for that explanation - I completely agree with the approach. But I do have a challenge: our use-case is this (maybe very specific): We have a product configurator that currently spits out JSON and works well. But as we expand what’s configurable, every change needs rework on the UI. Replacing that whole thing with a JSONForms UI would be terrific because then, enhancements would only mean tweaking the schemata. The JSON is currently so complex (18 root nodes, 8 to 10 sub-levels in each node), though, that building a UI schema from it is a non-trivial task.
Hope that helps!
Yes that makes sense. I just don’t yet understand what you need the deeply generated UI Schema for? Are you intending to use it as a base and then manually modify it? The UI Schema generator code is just about 100 very sparse LOC. You can easily copy and adapt it to your needs. For the deep generation you can even just use the code from the PR.
Replacing that whole thing with a JSONForms UI would be terrific because then, enhancements would only mean tweaking the schemata. The JSON is currently so complex (18 root nodes, 8 to 10 sub-levels in each node), though, that building a UI schema from it is a non-trivial task.
Is it actually one huge form or is it rather multiple separate forms? You might want to consider to use multiple JSON Forms instances which would then reduce the size of the JSON Schema and UI Schemas.
I need the deeply-generated default UI so I can start off with a basic structure that I can modify.
I took your advice, copied the PR code over (just the deep-generator, converted to JS ) and got the deeply-generated UI Schema. Learnt from (your reference to) the Schema Editor and now have a basic, good-looking UI for our configurator up and running in an hour. I have some work to do, in terms of pulling server-side data and so on, but I couldn’t have dreamed of getting this far this quickly with ANY tech. This is phenomenal, thank you!
Happy to paste the JS code, if that’s appropriate.
) and got the deeply-generated UI Schema. Learnt from (your reference to) the Schema Editor and now have a basic, good-looking UI for our configurator up and running in an hour. I have some work to do, in terms of pulling server-side data and so on, but I couldn’t have dreamed of getting this far this quickly with ANY tech. This is phenomenal, thank you!