Volto Form View

Development Plone 6 UI (Volto)
1

Hey Community,

I am wondering what's the recommended way to do a Form View in Volto. As in the classic UI you do with plone.autoform

My use case is a Form that needs to be shown in all Offer objects, a custom contenttype. So I did a custom view for Offer type like:

const Offer = (props) => {
  const { content } = props;

  return (
    <>

      {hasBlocksData(content) ? (
        <Container>
          <RenderBlocks {...props} />
        </Container>
      ): null}

      <OfferForm />

    </>
  );
};

Then the OfferForm component is pretty much a modified copy of the ContactForm of Volto changing the schema.
Relevant Code of OfferForm

import { Form, Toast } from '@plone/volto/components';
import { applyOffer } from '../../actions';

const OfferForm = () => {

  const onSubmit = (data) => {
    dispatch(applyOffer(getBaseUrl(pathname), data));
  };

  return (

        <Form
          onSubmit={onSubmit}
          schema={...}
        />
  )
}

But I have some doubts regarding validation. Can I add a custom validation for a field?

I see there is the FormValidation but I guess things here are global and I'm interested in adding validation only in the context of this Form

Like for instance don't allow to upload files bigger than 2 MB.

Right now I am either thinking in adding a new widget / type of field and figure out how to add a global validation for it in FormValidation or either do a raw Form not using the Volto Form component at all

Any recommedation is appreciated

Thanks!

2

I don't know if I like the idea of creating a new widget for each validation I want to do but that's just what I did and it works:

  1. Copy Paste the FileWidget and rename to FileCustomWidget. There instead of importing the validateFileUploadSize, redefine and set the desired maxUploadSize
  2. Register the widget in the config: config.widgets.widget.file_custom_widget = FileCustomWidget
  3. Apply it on the desired field of the Form schema:
file: {
  title: intl.formatMessage(messages.file),
  widget: 'file_custom_widget',
},