First thanks for this great library.
We are building a feature with json forms, we are trying to achieve something like the below. We have an array of objects e.g. Property. Each Property will have a list of questions. There is a boolean field i.e Is loan on property? If the user clicks yes then the user should be navigated to a different screen with the Array of Loan section. There is a list of questions similar to the property section. There is a boolean field i.e. Co-Debtor? If user selects true then user should be navigated to a different screen with the Array of Co-Debtors. Each screen has a Back button, when clicked should navigate user to previous screen.
What is the correct way to achieve this? I have tried wrapping the array with the stepper without any luck. Please suggest an approach.
Usually we suggest to implement such a “form wizard” not within JSON Forms but with JSON Forms. What I mean by that is that instead of mapping a single JSON Schema and UI Schema somehow to such a wizard you use multiple JSON Forms instead.
So here you could have a propscreen using a JSON Form, proploanscreen using a JSON Forms and a proploancodebtorscreen using a JSON Form.
The forward/back buttons could then be rendered outside of JSON Forms and initialize the corresponding screen.
Your case is a little bit special however as you explicitly mention that you have nested data structures. In this special case this could also be handled within JSON Forms. For this you want a custom object renderer and/or array renderer. These customized renderers are then able to show/hide their own controls and dispatch to their nested structures if needed to. This would give you a “dynamic” effect within a form and has the benefit that you don’t need to sync data over multiple JSON Forms instances. However that method is not that great if you actually want to replace the whole form instead of only a part of it.
So having said that I could see both approaches work here. The first one is more generic and can be used to implement any kind of form wizard. The second one is more specialized and clearly presents nested editing of a single structure.
Thanks Stefan for quick reply. I am currently thinking of an approach something like below
<GenericFormRenderer {…props}/>
Wizard is a react-use-wizard stepper library. Which will manage next and previous steps and pass the required schema conditionally to GenericFormRenderer.
GenericFormRenderer is a a wrapper for , which will handle events generated from a CustomRadio control and will decide which schema should be rendered next based on the CustomRadio event.
My question is, how can we maintain relation between different schema?
Maintaining the data and schema relationships falls into your custom management. I could for example imagine a data format which is basically a graph. Each node has an associated JSON Schema (and maybe UI Schema) and a path to retrieve/store data into the overall data management. Each node also has edges with a condition to select between them.
