ValidationError when Submitting DataGridField in Volto

Plone Support Add-on Development
, , , ,
1

Good afternoon, Plone Community!

I got the following error when trying to submit a form using DataGridFields in Plone Classic and through the Volto frontend:

2022-10-10 15:07:40,135 ERROR   [Zope.SiteErrorLog:35][waitress-1] BadRequest: http://localhost:3000/POST_application_json_
Traceback (innermost last):
  Module ZPublisher.WSGIPublisher, line 167, in transaction_pubevents
  Module ZPublisher.WSGIPublisher, line 376, in publish_module
  Module ZPublisher.WSGIPublisher, line 271, in publish
  Module ZPublisher.mapply, line 85, in mapply
  Module ZPublisher.WSGIPublisher, line 68, in call_object
  Module plone.rest.service, line 22, in __call__
  Module plone.restapi.services, line 19, in render
  Module plone.restapi.services.content.add, line 79, in reply
  Module plone.restapi.deserializer.dxcontent, line 60, in __call__
zExceptions.BadRequest: [{'message': 'Wrong contained type', 'field': 'references', 'error': 'ValidationError'}]

Here is the code I was using in Volto:

import React from 'react';
import DataGridFieldWidget from '../../../../volto-yc-datagridfield/src/Widgets/DataGridFieldWidget';

const ItemSchema = {
  title: 'References',
  properties: {
    name: {
      title: 'Name',
      description: 'Recommender',
      type: 'string',
      factory: 'Text line (String)',
    },
    email: {
      title: 'Email',
      type: 'string',
      factory: 'Text line (String)',
    },
    ioc: {
      title: 'Institution/Organization/Company',
      factory: 'Text line (String)',
      type: 'string',
    },
    address: {
      title: 'Address',
      factory: 'Text line (String)',
      type: 'string',
    },
    phoneNumber: {
      title: 'Telephone Number',
      factory: 'Text line (String)',
      type: 'string',
    },
    relationship: {
      title: 'Relationship to You',
      factory: 'Text line (String)',
      type: 'string',
    },
  },
  fieldsets: [
    {
      id: 'default',
      title: 'References',
      fields: [
        'name',
        'email',
        'ioc',
        'address',
        'phoneNumber',
        'relationship',
      ],
    },
  ],
  required: [],
};

const ReferencesWidget = (props) => {
  return (
    <DataGridFieldWidget
      schema={ItemSchema}
      {...props}
      value={props.value?.items || props.default?.items || []}
      onChange={(id, value) => props.onChange(id, { items: value })}
    />
  );
};

export default ReferencesWidget;

The DataGridFieldWidget is a customized widget I was working on using a form of the ObjectListWidget in Volto. Looking at the data structure using the Volto MixedField I see that it has the extra "items" tree and the regular DataGridField does not have one. How can I modify the Volto code so that I can still use DataGridField through Volto without having to write a migration script? We have a large number of data stored in DataGridFields in general and would like to use them in Volto in the future without having to migrate them over. Would it be possible to have this done? If not, let me know.

I thank you kindly.

Sincerely,

rbrown12

2

Update: Problem was fixed.

Here is what was done for reference:

<DataGridFieldWidget
      schema={ItemSchema}
      {...props}
      value={props.value || props.default || []}
      onChange={(id, value) => props.onChange(id, value)}
      // value={props.value?.items || props.default?.items || []}
      // onChange={(id, value) => props.onChange(id, { items: value })}
    />

Thanks for your help.

Sincerely,

rbrown12

1 Like