Fixed Length ListWithDetails

Hi There,

I’m playing around with JSONForms for a proof-of-concept where we can use it to quickly define the layout for a configuration layer on our tool. The data modelled from the form is stored and parsed to determine what configurations within the system need to change. Ideally I would like to group the configurations for each module together for visual purposes.

Mapping this to the angular-material playground, I want to prevent the addition of new orders to the ListWithDetail object and I’m not sure the correct approach. I’ve tried adding a rule with the effect “DISABLE”, and it correctly removes the add button, but this has the side-effect of making all of the form data within disabled as well. What is my best approach here?

[original thread by Brendan]

Hi @tarrnobi, thanks for your interest in JSON Forms. As you noticed, at the moment the add button can only be removed by disabling the whole control. You’ll need to register a custom renderer in which you also remove / disable the add button for other conditions. In your case I would model this with the maxItems property for arrays.

If you’d like to contribute this feature to JSON Forms we’ll definitely take a look :wink:


Hi Stefan, Just thought I’d provide an update - I’ve been able to partially create a custom renderer for a separate issue where unlike the react version, the VerticalLayout grid when passed an array doesn’t provide the ability to add and delete array items, so I’m happy.

A followup question; should there be alignment in the functional behaviour between the different frameworks in this regard?

Great :wink:

Regarding your question: Ideally we would have feature parity across all our renderer sets however that is already not the case and is also not a major goal for us. Most important is that all basic functionality and major use cases are supported in each set, so its fine that support for minor use cases differs between them.