Feature Request: Object and Array Folding
Closed this issue · 9 comments
Request to have sub-objects/arrays automatically fold/hide with a button.
A folded array could display the number of items in the array along with the label.
A folded object might display the values of 1 or more fields configured - for example a Person object might display alongside the label the values of the firstName and lastName properties when folded.
Another option might be to allow also a mid-fold (radio-button like control to choose full/mid fold) that displays a partial array/object, say for example the first n fields or items where the n is a parameter that is configurable. A folded object might display the values of 1 or more fields configured - for example a Person object might display firstName and lastName properties when folded. Folded items would need to be un-folded to edit.
An option on the top-level schema would be a setting to by default fold sub-objects/arrays.
Great request, I've implemented this before on the React version of this, so I reworked it and added a simple implementation to the latest version. Later I'll add a general title generation functionality from data in the record. I made the fold optionality a prop on the component rather than a schema issue.
I have tested this and don't see the collapse/expand controls on arrays (didn't try objects yet).
When there are no items in an array this means that there is no way to add new ones.
Couple of questions, you did set the collapsible={true} prop right? Also, are you using the NPM package? Looking at this I think I'm not exporting the images it needs to the package, could it be that?
What I am seeing is that even without the collapsible property the controls do not appear in the HTML generated.
In the following image 'Partners' and 'Features' should have at least an add button, the button is not being generated.
Hi, still not clear what's happening for you. The default is no collapser controls, you need to add the prop collapsible={true} to theSchemaForm or SubmitForm element. It should then render the element at least for the collapser. It's a span which comes before the legend element.
That's by design, so you don't have to have collapsers if you don't want them. I felt that was a. a global concern and b. a display detail, so I thought it would be better as a prop on the component than a custom schema property.
What I mean by it doesn't work is that the '+' add button doesn't display when collapsible != true.
How would you add new entries in an array without the '+' control?
That's fixed now, I'll leave this issue open for a few days in case you find issues with the fix.