Working with DataGrid Fields in Volto?

Development Plone 6 UI (Volto)
,
1

HI!

I'm assisting a colleague with a Volto project and I can't seem to find anything about using dataGridFields in Volto.

Does that work at present? How would I get started at adding that to our project?

Thoughts & comments appreciated, thanks in advance.

-est2

2

You can find a description in chapter Dexterity: Reference of the Mastering Plone Development Training.
https://training.plone.org/5/mastering-plone/dexterity_reference.html#mixedfield

2 Likes
3

Ahaha! :slightly_smiling_face:

I knew it was called something other than what it's called elsewhere, if that makes sense.

Thanks!

Tomorrow, report back progress!

In health, -est2

4

See this for a live demo of the widget: Storybook

1 Like
5

thanks!

I've got so much to catch up on! My hat's off to the Volto team/squad... so much in a short time.

-est2

1 Like
6

Thanks again for pointing us in the mixedfield direction.

We're sorta stumped on creating this type of field.

We have an admissions form with a school field and we'd like the user to fill out "School, Location, Year, GPA, Major".

So we created an ItemSchema with those attributes. Then using the example have a const called SchoolWidget using the example in the training with schema=ItemSchema.

When we render in the browser I get Object | object reference instead of the nice widget in the storybook or code example. The browser console displays "Warning: Failed prop type: Invalid prop value of type object supplied to TextWidget, expected string." which leads me to think that we're trying to pass something as a value to the wrong object type?

What do you think? any comments/suggestions appreciated.

-est2

7

Maybe you've missed the step where you register the new widget?

In pseudo-python steps, what we're trying to do is something like:

widget = customize(ObjectListWidget)
config.widgets.admission_widget = widget

So you may be missing (or maybe it's not properly done) the part in the training that says:

Register this widget for the backend field of your choice in your apps configuration config.js . The following config code registers the custom Plone HistoryWidget for Plone Classic fields with widget “history_widget”.

8

Good afternoon, Plone community!

This is the current configuration I have for my addon in Volto:

import {FinAidView, StudentView, SectionView} from './components/Views/MainViews';
import {DocListView, GradAppList, RecommendationsList} from './components/Views/ListingViews';
import '@plone/volto/config';
import SchoolWidget from "./components/CTViews/ApplicationForm/SchoolWidget";
import ReferencesWidget from "./components/CTViews/ApplicationForm/ReferencesWidget";
import EmployerWidget from "./components/CTViews/ApplicationForm/EmployerWidget";
import ApplicationForm from "./components/CTViews/ApplicationForm";


export default function applyConfig(config) {
    config.settings.bbb_getContentFetchesFullobjects = true;
    config.views = {
        ...config.views,
        layoutViews: {
            'fin-aid-view': FinAidView,
            'section-view': SectionView,
            'student-view': StudentView,
            view: DocListView,
            grad_app_list: GradAppList,
            recommendations_list: RecommendationsList,
        },
        contentTypesViews:{
            applicationform: ApplicationForm,
        },
    };
    config.widgets.widget.school_widget = SchoolWidget;
    config.widgets.widget.references_widget = ReferencesWidget;
    config.widgets.widget.employer_widget = EmployerWidget;
    return config;
}

I would like to know what needs to be done differently?

I thank you kindly.

Sincerely,

rbrown12

9

I don't know if that's the problem, but I'll draw your attention to this comment in the scaffolding: volto/packages/generator-volto/generators/app/templates/src/config.js at main · plone/volto · GitHub

10

Thank you for responding! I have been modeling my widget according to the history widget example in the plone 6 tutorial. Here is some of the code below:

import React from 'react';
import ObjectListWidget from "../../../../../../../omelette/src/components/manage/Widgets/ObjectListWidget";

const ItemSchema = {
    title: 'School',
    properties: {
        school: {
            title: 'School',
        },
        location: {
            title: 'Location',
        },
        year: {
            title: 'Year of Graduation',
        },
        gpa: {
            title: 'GPA',
        },
        major: {
            title: 'Major',
        },
    },
    fieldsets: [
        {
            id: 'default',
            title: 'School',
            fields: [
                'school',
                'location',
                'year',
                'gpa',
                'major',
            ],
        },
    ],
    required: [],
};

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

export default SchoolWidget;

Unfortunately, I am still getting [object Object] in the datagridfield/mixedfield positions when opening the add content type for the content type i would like to create. What else would I need to do here?

I thank you kindly.

Sincerely,

rbrown12

11

do you have some place online where the code and the configuration can be viewed? To understand it better...

12

I have the code and configuration running from a localhost for now.

13

thanks for pointing out!

i remember having big troubles to get datagrids to work with more complex data then strings or ints; like objects and references. which made me jump over to yafowil.

any news on that area?

14

Warning: Failed prop type: Invalid prop value of type object supplied to TextWidget, expected string."

I had the same issue following the example provided here.

As @tiberiuichim suggested the problem was that the widget had not been properly registered in config.js.
Registering it via the field ID as explained here solved the issue for me.

1 Like
15

Please be sure to use plone.restapi version >= 7.3.0
The feature "Adjust JSONField adapter to include widget name to use in serialization" is introduced in version 7.3.0

4 Likes
16

Nice, thank you for this hint - updating plone.restapi fixed it for me as well :wink: