Vue Vanilla and AllOf

Hello, I’m having issues with JSONForms and the default VueVanilla renderers when passing schemas containing a root “allOf” element.

Basically when I try and use the default json-forms component, it simply prints “No applicable renderer”, presumably because there’s no renderer for “allOf” types. (If I’m wrong here and VueVanilla does support allOf, please let me know!)

I tried to implement one myself based on the other integrations in the github repo but that’s also giving me issues where the sub-elements (which use $refs) aren’t resolvable (within createCombinatorRenderInfos) because there’s no “rootSchema” property on any of the renderer components after the initial DispatchRenderer.

I’m pretty new to Vue so following the props/data/computed has been tricky, it looks like DispatchRenderer gets the rootSchema (computed) value from the call to useJsonFormsRenderer but it doesn’t pass it down to the sub-renderers?

That was a bit of a brain dump, apologies if it didn’t make sense.

I’d appreciate any help/suggestions, many thanks in advance!

Try the Vuetify renderer set GitHub - eclipsesource/jsonforms-vuetify-renderers

Hi @TaskMaster,

Basically when I try and use the default json-forms component, it simply prints “No applicable renderer”, presumably because there’s no renderer for “allOf” types. (If I’m wrong here and VueVanilla does support allOf, please let me know!

No that’s right :wink:

I tried to implement one myself based on the other integrations in the github repo but that’s also giving me issues where the sub-elements (which use $refs) aren’t resolvable (within createCombinatorRenderInfos) because there’s no “rootSchema” property on any of the renderer components after the initial DispatchRenderer.

I’m pretty new to Vue so following the props/data/computed has been tricky, it looks like DispatchRenderer gets the rootSchema (computed) value from the call to useJsonFormsRenderer but it doesn’t pass it down to the sub-renderers?

Yes the dispatch renderer just hands over the “local” props to the renderer which is dispatched to, i.e. props which are needed to determine which part of the form is rendered. Global props like the root schema are store in the form-wide storage and can be easily accessed by the renderer itself. Therefore it’s not handed over.

The renderer should then reuse some of the binding utils of JSON Forms (plus maybe some customized ones) in its setup to derive all the properties it needs to render a proper UI. These utils take the “local” props and the form-wide storage and then hand back a number of useful props like label, enabled etc.

Just like @kchobantonov did, I would like to point to the Vuetify renderer set. There you can find an implementation of an allOf renderer for Vue.