I have a very complex form which has a lot of select components. Now the thing is the enums in the schema needs to be fetched from an API. That is one, but the bigger challenge is when there is a select whose values needs to be fetched based on the value of some other field.
E.g There is two select boxes.
Category
Subcategory
Sub-sub-category
Now the thing is values to be shown in the category are static. but values in subcategory should be fetched based on the category selected by the user. Similarly, values in the sub-sub-category need to be fetched based on the value selected in the subcategory field.
Even if I want to create the custom renderer what is the suggested way to write such schemas and uischemas
One approach would be to go with custom renderer(s). For example you could look at this as one huge custom renderer for “category”. This way you would model the schema and uischema as if only “category” exists and then customize the enum renderer of it where you render the three enums instead. Within your custom renderer you should be able to basically “just” call three times the existing MaterialEnumControl with your respective data. Alternatively you could have “stub” enums / strings in your schema and basically register two custom controls, one for subcategory and subsubcategory which render themselves as enums and fetch their options based on the previously chosen category/subcategory.
Another approach could be to listen to data changes and setting a new schema (and maybe uischema) whenever one of the enum values change. This way you would not even need a custom renderer.
I was also thinking on the lines of the last solution that you proposed, listening to data changes and change the schema/uischema accordingly.
Though I could not understand the second solution to an extent. But If I am not mistaken, I will have to write custom renderer for all the dependent fields even though they are of the same type. But the alternate to this approach that i was thinking is to design one custom renderer and pass the api url and dependency scopes(selected category and subcategory) to fetch data from in ui schema. But error handling will have to be handled in the custom renderer anyway.
It is practically impossible in the actual scenario to go with solution 1 as there are 5-6 dependent fields on one field. Through this approach I will end up having the whole form in one renderer and will have to handle all the validations on my own.
Though I could not understand the second solution to an extent. But If I am not mistaken, I will have to write custom renderer for all the dependent fields even though they are of the same type.
The idea is that you model your dependent fields as ordinary strings in the schema. For subcategory, sub-sub-category etc. you use a custom renderer which just invokes the JSON Forms’ provided MaterialEnumControl. There you provide the options (enum list) yourself instead of letting JSON Forms resolve them out of the schema. Depending on your requirements you probably only need a single custom renderer implementation which you register for all of the categories. If you need to configure some data, for example the fetch URL, you can put that into the uischema as an option.