Need a list of available controls and Vue help

Having a really hard time figuring out how to use this, and tbh if my boss hadn’t asked me to I would have moved on to something else a while ago. Is there any kind of list of controls available for use that I can reference? I’m also having a hell of a time trying to figure out how in the world to implement custom renders using Vue. The docs are extremely vague on this matter and so far I haven’t been able to find any examples of anyone implementing this. would like to be able to render my own components for each input control if anyone has managed to get this working in Vue I would greatly appreciate some guidance! Thanks!

[original thread by Josh Willems]

1 Like

Hi @jwillems(jwillems), did you check our JSON Forms Vue seed and the Readmes for the Vue bindings as well as our basic Vanilla renderer set?

If yes, can you elaborate what you are struggling with? It would be of great help to know where our documentation is lacking so more people can get started with JSON Forms Vue.

Note that just of today we released a new prerelease, so you probably want to update your code base to it, for example via npm install @jsonforms/core@next @jsonforms/vue@next @jsonforms/vue-vanilla@next. The full release will probably come within this or next week.

This is something that I can’t seem to track down either (but for React Material and Vanilla renderer controls.) There does not seem to be a list of available controls and the JSON Schema (or UI Schema?) property value syntax used to assign the data fields to those types of controls.

I’m using a React seed / example project and have tested both Material and Vanilla… which is fine. But the seed does not seem to have use an exhaustive list of controls. Where do you find the exhaustive list of controls?

Thanks.

For example: how do I add a React Vanilla Table Array control to my JSON Forms?

(I tried to post a link to your own website: jsonforms dot io/api/vanilla/classes/tablearraycontrol.html but Discourse said I wasn’t allowed.)

Expected = docs that show how to add this and other controls (beyond the basic ones I see in the seed example) to my JSON Form (and ideally) a demo within the docs of the control - what it looks like and how the interactions work.)

Another example of difficult docs: adding custom styles to Vanilla React. Docs are here github dot com/eclipsesource/jsonforms/blob/master/packages/vanilla/Styles.md

But they describe how to assign class names to only a few of the control elements. Even the doc’s example “name: ‘control.input’” is not defined in the docs… but rather inferred.

And so are things like name: ‘control.label’…

And how to target the <input type="checkbox > control, separate from other text inputs? It’s not clear.

Any clarity on how to find definitive info for these things would be great.

Thanks.

I’m using a React seed / example project and have tested both Material and Vanilla… which is fine. But the seed does not seem to have use an exhaustive list of controls. Where do you find the exhaustive list of controls?

At the moment all there is are the examples and docs of the website. I would like there to be such a an exhaustive list and our goal at the moment is to cover at least everything we already offer and is not yet documented.

For example: how do I add a React Vanilla Table Array control to my JSON Forms?

You can just reuse the React Material table example. We try to not introduce any inconsistencies between renderer sets, so most examples work for all renderer sets (when the renderer set actually suppports that feature).

Another example of difficult docs: adding custom styles to Vanilla React. Docs are here github dot com/eclipsesource/jsonforms/blob/master/packages/vanilla/Styles.md
But they describe how to assign class names to only a few of the control elements. Even the doc’s example “name: ‘control.input’” is not defined in the docs… but rather inferred.

Another example of difficult docs: adding custom styles to Vanilla React. Docs are here github dot com/eclipsesource/jsonforms/blob/master/packages/vanilla/Styles.md

But they describe how to assign class names to only a few of the control elements. Even the doc’s example “name: ‘control.input’” is not defined in the docs… but rather inferred.).

Yes the docs could also be better here. This part shows how you can customize the styling
Also linked is this file in which you can find an entry for checkbox. However in the end you need to check the HTML output and/or the source code to find all styles.

Any documentation improvement contributions are welcomed :wink: