Hi, The context of this question is the Vue-Vanilla version of Json-Forms.
The flexibility that Json-Forms provides in being able to create our own renderers is powerful. And we’ve been utilizing this in a project.
However, we have, unfortunately, found ourselves re-implementing some of the base renderers, such as the StringControl, CheckboxRenderer, etc in order to gain control over the control-wrapper. We wish to expose some new behaviour in the titles of some fields, for example, a hover ‘description’ badge if the schema contains a description, see the image below:
The only way we have found to make changes to the control-wrapper ourselves is to re-implement each of the base-renderers and inject our own control-wrapper. This is not a pattern I am happy with as it’s duplicating a lot of the behaviour already existing in Json-Forms, and makes our upgrade path much more difficult.
So I was wondering if there is something that we have overlooked, that can help us make changes to this level of the form without having to re-implement all the base renderers.
I don’t think that there is something which you overlooked, the control-wrapper is currently not modifiable. However if you would like to add a contribution to make it configurable, then this is certainly welcomed.
For example a good approach could be to inject a jsonforms-control-wrapper into the Vue Vanilla control bindings. If it’s undefined (i.e. not customized) then we use the default control-wrapper as before. If it’s actually there, then we use the customized one. Would this be sufficient for your use cases?
We had a good look through the source this week and it’s the same conclusion we came to!
Do you have any resources you can share on injecting in vue? It’s not an approach I’ve used before.
If we can find some time then we’ll happily add this in a contribution. It would make our lives much easier, and hopefully the lives of your other json-forms users!
Do you have any resources you can share on injecting in vue? It’s not an approach I’ve used before.
That’s straightforward. Every component can declare to provide whatever it likes with an associated key. All sub-components can then inject whatever was provided by some parent by using the same key.
The idea is then to unconditionally inject a wrapper into JSON Forms. If it exists, then a parent has provided it as a customization. If not, then there is no customization and the default can be used.
If you know React: it’s basically the equivalent pattern to React contexts.
