Vanilla renderers and Array example problem

[ketysek]

Hi, because material-renderers don't work with MUI beta v.41, which I am using in my project, I've migrated to your vanilla renderers. When I try to reproduce this array example, following bugs occur:

• there's no checkboxes and delete button so I'm unable to delete some row
• add "row" button hasn't got type="button" so the onClick event submits the whole reduxForm instead of just adding new "row"

[edgarmueller]

Thanks, we'll look into it (and also updating the MUI dependency)

[ketysek]

when do you except this will be resolved? thank you!

[edgarmueller]

@ketysek We hope by the end of this or next week with the 2.0.1. release.

[WolfeLogic]

Should the array example code work within the jsonforms-react-seed code? I've been able to replicate everything but the array control. I'm using the renderer that comes with the ...react-seed, no alterations.

I've toyed with the scope, but when I drill down to medName for instance, I get a TypeError: Cannot read property 'medName' of undefined. Any help would be greatly appreciated.

uischema.json { "type": "Control", "label": "Current medications", "scope": "#/properties/currentMeds/properties/" }

schema.json

        "type": "array",
        "items": {
          "type": "object",
          "properties": {
            "medName": {
              "type": "string"
            },
            "currentDose": {
              "type": "string"
            }
          }
        }
      }

[eneufeld]

Hi, I didn't double check but I would expect the array example to work in the seed. The uischema you attached has one small issue, the scope should end on currentMeds. So it should look like this: { "type": "Control", "label": "Current medications", "scope": "#/properties/currentMeds" } .

If this doesn't help, please let us know, we will check the seed then.

[eneufeld]

I checked the seed with material and vanilla. The array renderer is working, but your data must already contain at least an empty array, this is a bug fixed with version 2.0.1 . The vanilla array renderer could use some love though.

[WolfeLogic]

@eneufeld Thanks for getting back so quickly I've played with the scope, but it doesn't seem to help. I've used: "#/properties/currentMeds "#/properties/currentMeds/ "#/properties/currentMeds/* "#/properties/currentMeds/properties "#/properties/currentMeds/properties/ and with the wildcard I'll follow your scope pattern moving forward. For reference, while I doubt it will make a difference (but in case it does), I'm attempting to nest the array within a group.

Regarding the empty array, presumably I can use some dummy data similar to the array control example:

{ "comments": [ { "date": "2001-09-11", "message": "This is an example message" }, { "date": "2018-05-23", "message": "Get ready for booohay" } ] } If so, I'm not real sure where it goes? Do I create a third .json file (schema.json, uischema.json, and data.json?). I've noticed the <data> view in the examples, but initially thought it was the format for the data in the redux store (and what could potentially be sent down to a more permanent noSQL store as an object)... But is this not the case? In brief, how do I setup an empty array... Or if this is fixed in v2.0.1, is that out? Is there a react-seed fix? Thanks again!

[WolfeLogic]

Just for a little more reference: schema.json "currentMeds": { "type": "array", "items": { "type": "object", "properties": { "medName": { "type": "string" }, "dose": { "type": "string" } } } }

uischema.json { "type": "Control", "label": "Current medications", "scope": "#/properties/currentMeds" }

Error message

MaterialArrayControlRenderer._this.createSelection
node_modules/@jsonforms/material-renderers/lib/complex/MaterialArrayControlRenderer.js:91
  88 | _this.isSelected = function (index) {
  89 |     return _this.state.selected[index];
  90 | };
> 91 | _this.createSelection = function (selected) { return _.fill(Array(_this.props.data.length), selected); };
  92 | _this.state = {
  93 |     selected: _this.createSelection(false),
  94 |     openConfirmDelete: false
View compiled
new MaterialArrayControlRenderer
node_modules/@jsonforms/material-renderers/lib/complex/MaterialArrayControlRenderer.js:93
  90 | };
  91 | _this.createSelection = function (selected) { return _.fill(Array(_this.props.data.length), selected); };
  92 | _this.state = {
> 93 |     selected: _this.createSelection(false),
  94 |     openConfirmDelete: false
  95 | };
  96 | return _this;
View compiled
constructClassInstance
node_modules/react-dom/cjs/react-dom.development.js:6355
  6352 | var unmaskedContext = getUnmaskedContext(workInProgress);
  6353 | var needsContext = isContextConsumer(workInProgress);
  6354 | var context = needsContext ? getMaskedContext(workInProgress, unmaskedContext) : emptyObject;
> 6355 | var instance = new ctor(props, context);
  6356 | adoptClassInstance(workInProgress, instance);
  6357 | 
  6358 | // Cache unmasked context so we can avoid recreating masked context unless necessary.
View compiled
updateClassComponent
node_modules/react-dom/cjs/react-dom.development.js:7839
  7836 | if (current === null) {
  7837 |   if (!workInProgress.stateNode) {
  7838 |     // In the initial pass we might need to construct the instance.
> 7839 |     constructClassInstance(workInProgress, workInProgress.pendingProps);
  7840 |     mountClassInstance(workInProgress, renderExpirationTime);
  7841 |     shouldUpdate = true;
  7842 |   } else {
View compiled
beginWork
node_modules/react-dom/cjs/react-dom.development.js:8225```

[eneufeld]

the error you pasted is caused because your data does not contain the currentMeds property. To fix the data open the index.js . In line 15 you will find: const data = { name: 'Send email to Adrian', description: 'Confirm if you have passed the subject\nHereby ...', done: true, recurrence: 'Daily', rating: 3, }; replace it with: const data = { currentMeds:[] }; And your schema.json should look like this: { "type": "object", "properties": { "currentMeds": { "type": "array", "items": { "type": "object", "properties": { "medName": { "type": "string" }, "dose": { "type": "string" } } } } } } Alternatively if your array is on the root level and not a property of an object your files should be: schema: { "type": "array", "items": { "type": "object", "properties": { "medName": { "type": "string" }, "dose": { "type": "string" } } } } uischema: { "type": "Control", "label": "Current medications", "scope": "#" } and the data object mentioned above: const data = []

[eneufeld]

you can also simply install jsonforms 2.0.1 by doing: npm install @jsonforms/core npm install @jsonforms/material-renderers

This should also fix the error you get, as we fixed the bug in 2.0.1

[WolfeLogic]

:raised_hands: @eneufeld That did it! I had placed medName and dose into the const data, but replacing it all with currentMeds: [] did the trick... I think I had everything else correct (I just didn't provide enough code/context). I'll up update to v2.0.1 as well, but thanks again for your help!

[eneufeld]

Please reopen if you still encounter the problem with 2.0.1 or higher.