Definitive list describing how to assign available renderer controls to data schema?

General
1

I don’t see anywhere to find a definitive list of how to assign available renderer controls to my data schema? Where do I find how to assign the various available React Vanilla (or React Material) controls to my data?

Where do I find docs that reveal that the below JSON Schema syntax will map to a date picker component? Which doc lets me see how to assign a Material Slider control to my JSON Schema… or whatever control definition?

"due_date": {
      "type": "string",
      "format": "date"
    },

The render API docs like React Vanilla Renderer API docs or for Material renderer etc do not seem to have this info?

PS: It looks like someone else was having this docs problem as well.

Thanks.

2

Or stated more simply: where do I find information on how to assign a Material Slider or a Material Autocomplete… or any Material control to my data model (or UI schema)?

And same question for React Vanilla renderer: where do I find how to assign the available controls if I choose to use this renderer set? (I prefer to use Tailwind, but I want to compare the out-of-the-box controls.)

I see an overview of Renderer Sets laying out which controls are available for the different sets, and I see various README’s and APIs for the individual sets, but I do not see a simple list of the syntax needed for my JSON Schema to use those controls.

Thanks.

3

Why has the community flagged / hidden this question?

4

Hi @hellosilver, thanks for your interest in JSON Forms.

I don’t see anywhere to find a definitive list of how to assign available renderer controls to my data schema? Where do I find how to assign the various available React Vanilla (or React Material) controls to my data?

That’s true we don’t have an exhaustive list how each renderer is mapped. At the moment I can only point you to the existing docs, e.g. the time and time picker docs, and the examples, e.g. all control options, including the slider option where you can inspect schema and UI Schema. Overall the docs should be improved but they already cover most of the available options in some way.

We’re improving our documentation all the time and also try to improve it further in the future. The docs are open source, so feel free to contribute when you have time.

Or stated more simply: where do I find information on how to assign a Material Slider or a Material Autocomplete… or any Material control to my data model (or UI schema)?

Yes the autocomplete ones are sadly not yet documented. For <3.0.0 they are in a special extended renderer set and need to be enabled with autocomplete: true. Starting with 3.0.0 there is no more special renderer set and they are just in the normal renderer set.

And same question for React Vanilla renderer: where do I find how to assign the available controls if I choose to use this renderer set? (I prefer to use Tailwind, but I want to compare the out-of-the-box controls.)

The React Vanilla renderers are much more basic, as you can also see in the overview of the renderer sets. Just using a normal JSON Schema with all basic primitive types + arrays and all basic UI Schema types is all there is.

You can also go through the code. Each renderer usually sits in its own file.

In the end the off-the-shelf renderer set are only starters to help you tailor your forms. So most users just apply them to the JSON Schemas they have and check what they can do, writing custom renderers for all the rest.

Why has the community flagged / hidden this question?

The system automatically flagged the posts as you were a new user and seemed to rapidly post with many external links. I unflagged them and improved the settings so that links to jsonforms.io no longer trigger the flags. Sorry for the inconvenience!

5

Thanks a lot @sdirix. I’ll look into the info you provided above.

And yes, if I get deep into JSON Forms, which on first blush looks like may be the case, I’d love to contribute to the docs.

1 Like