@plone/volto 18.10.1 → 18.11.0

package/src/components/manage/Widgets/SchemaWidget.jsx

@@ -8,17 +8,21 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import PropTypes from 'prop-types';
 import concat from 'lodash/concat';
+import find from 'lodash/find';
 import findIndex from 'lodash/findIndex';
+import isArray from 'lodash/isArray';
 import isString from 'lodash/isString';
-import map from 'lodash/map';
+import keys from 'lodash/keys';
 import omit from 'lodash/omit';
 import slice from 'lodash/slice';
 import without from 'lodash/without';
 import move from 'lodash-move';
 import { Confirm, Form, Grid, Icon, Message, Segment } from 'semantic-ui-react';
 import { defineMessages, injectIntl } from 'react-intl';
+import config from '@plone/volto/registry';
 import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
 import { slugify } from '@plone/volto/helpers/Utils/Utils';
+import { getVocabulary } from '@plone/volto/actions/vocabularies/vocabularies';
 
 import SchemaWidgetFieldset from '@plone/volto/components/manage/Widgets/SchemaWidgetFieldset';
 import { Field, ModalForm } from '@plone/volto/components/manage/Form';
@@ -52,6 +56,14 @@ const messages = defineMessages({
     id: 'Default',
     defaultMessage: 'Default',
   },
+  defaultValue: {
+    id: 'Default value',
+    defaultMessage: 'Default value',
+  },
+  placeholder: {
+    id: 'Placeholder',
+    defaultMessage: 'Placeholder',
+  },
   idTitle: {
     id: 'Short Name',
     defaultMessage: 'Short Name',
@@ -96,6 +108,15 @@ const messages = defineMessages({
     id: 'Description',
     defaultMessage: 'Description',
   },
+  queryParameterName: {
+    id: 'Query Parameter Name',
+    defaultMessage: 'Query Parameter Name',
+  },
+  queryParameterNameDescription: {
+    id: 'Fills the value of the form field with the value supplied by a query parameter inside the URL with the given name.',
+    defaultMessage:
+      'Fills the value of the form field with the value supplied by a query parameter inside the URL with the given name.',
+  },
   required: {
     id: 'Required',
     defaultMessage: 'Required',
@@ -116,6 +137,14 @@ const messages = defineMessages({
     id: 'maximum',
     defaultMessage: 'End of the range (including the value itself)',
   },
+  size: {
+    id: 'size',
+    defaultMessage: 'Maximum size of the file in bytes',
+  },
+  accept: {
+    id: 'accept',
+    defaultMessage: 'File types allowed',
+  },
   deleteFieldset: {
     id: 'Are you sure you want to delete this fieldset including all fields?',
     defaultMessage:
@@ -142,160 +171,607 @@ const makeFieldsetList = (listOfFieldsets, intl) => {
   return result;
 };
 
-/**
- * schemaField used for modal form, when editing a field
- * - based on the factory a set of fields is presented
- * - fields can be moved to another fieldset
- * @param {string} factory - the kind of field
- * @param {Object} intl
- * @param {*} fieldsets
- * @return {Object} - schema
- */
-const schemaField = (factory, intl, fieldsets) => ({
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'default',
-      fields: [
-        ...['title', 'description', 'parentFieldSet'],
-        ...((factory) => {
-          switch (factory) {
-            case 'Rich Text':
-              return ['maxLength'];
-            case 'URL':
-            case 'Password':
-            case 'label_password_field':
-            case 'Email':
-            case 'label_email':
-              return ['minLength', 'maxLength'];
-            case 'Integer':
-            case 'label_integer_field':
-              return ['minimum', 'maximum'];
-            case 'Floating-point number':
-            case 'label_float_field':
-            case 'Date/Time':
-            case 'label_datetime_field':
-            case 'Date':
-            case 'label_date_field':
-            case 'File':
-            case 'File Upload':
-            case 'Image':
-            case 'Yes/No':
-            case 'label_boolean_field':
-            case 'JSONField':
-            case 'Relation Choice':
-            case 'Relation List':
-              return [];
-            case 'Multiple Choice':
-            case 'label_multi_choice_field':
-            case 'Choice':
-            case 'label_choice_field':
-              return ['values'];
-            default:
-              return ['minLength', 'maxLength'];
-          }
-        })(factory),
-        ...['required'],
-      ],
+// Register field factory properties utilities
+
+config.registerUtility({
+  name: 'Rich Text',
+  type: 'fieldFactoryProperties',
+  method: (intl) => ({
+    maxLength: {
+      type: 'integer',
+      title: intl.formatMessage(messages.maxLength),
     },
-  ],
-  properties: {
-    title: {
+    default: {
+      title: intl.formatMessage(messages.defaultValue),
+      widget: 'richtext',
       type: 'string',
-      title: intl.formatMessage(messages.title),
     },
-    description: {
+  }),
+});
+
+['URL', 'Password', 'label_password_field', 'Email', 'label_email'].forEach(
+  (factory) => {
+    config.registerUtility({
+      name: factory,
+      type: 'fieldFactoryProperties',
+      method: (intl) => ({
+        minLength: {
+          type: 'integer',
+          title: intl.formatMessage(messages.minLength),
+        },
+        maxLength: {
+          type: 'integer',
+          title: intl.formatMessage(messages.maxLength),
+        },
+        default: {
+          type: 'string',
+          title: intl.formatMessage(messages.defaultValue),
+        },
+      }),
+    });
+  },
+);
+
+['Integer', 'label_integer_field'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryProperties',
+    method: (intl) => ({
+      minimum: {
+        type: 'integer',
+        title: intl.formatMessage(messages.minimum),
+      },
+      maximum: {
+        type: 'integer',
+        title: intl.formatMessage(messages.maximum),
+      },
+      default: {
+        type: 'integer',
+        title: intl.formatMessage(messages.default),
+      },
+    }),
+  });
+});
+
+[
+  'Floating-point number',
+  'label_float_field',
+  'JSONField',
+  'Relation Choice',
+  'Relation List',
+].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryProperties',
+    method: (intl) => ({}),
+  });
+});
+
+['Yes/No', 'label_boolean_field'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryProperties',
+    method: (intl) => ({
+      default: {
+        type: 'string',
+        title: intl.formatMessage(messages.defaultValue),
+      },
+    }),
+  });
+});
+
+['Date/Time', 'label_datetime_field'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryProperties',
+    method: (intl) => ({
+      default: {
+        type: 'string',
+        widget: 'datetime',
+        title: intl.formatMessage(messages.defaultValue),
+      },
+    }),
+  });
+});
+
+['Date', 'label_date_field'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryProperties',
+    method: (intl) => ({
+      default: {
+        type: 'string',
+        widget: 'date',
+        title: intl.formatMessage(messages.defaultValue),
+      },
+    }),
+  });
+});
+
+['time'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryProperties',
+    method: (intl) => ({
+      default: {
+        type: 'string',
+        widget: 'time',
+        title: intl.formatMessage(messages.defaultValue),
+      },
+    }),
+  });
+});
+
+['File', 'File Upload', 'Image'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryProperties',
+    method: (intl) => ({
+      size: {
+        type: 'integer',
+        title: intl.formatMessage(messages.size),
+      },
+      accept: {
+        type: 'string',
+        title: intl.formatMessage(messages.accept),
+      },
+    }),
+  });
+});
+
+['Multiple Choice', 'label_multi_choice_field', 'checkbox_group'].forEach(
+  (factory) => {
+    config.registerUtility({
+      name: factory,
+      type: 'fieldFactoryProperties',
+      method: (intl) => ({
+        values: {
+          type: 'string',
+          title: intl.formatMessage(messages.choices),
+          widget: 'textarea',
+        },
+        default: {
+          type: 'string',
+          widget: 'textarea',
+          title: intl.formatMessage(messages.defaultValue),
+        },
+      }),
+    });
+  },
+);
+
+['Choice', 'label_choice_field', 'radio_group'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryProperties',
+    method: (intl) => ({
+      values: {
+        type: 'string',
+        title: intl.formatMessage(messages.choices),
+        widget: 'textarea',
+      },
+      default: {
+        type: 'string',
+        title: intl.formatMessage(messages.defaultValue),
+      },
+    }),
+  });
+});
+
+config.registerUtility({
+  name: 'static_text',
+  type: 'fieldFactoryProperties',
+  method: (intl) => ({
+    default: {
+      title: intl.formatMessage(messages.text),
+      widget: 'richtext',
+      type: 'string',
+    },
+  }),
+});
+
+config.registerUtility({
+  name: 'number',
+  type: 'fieldFactoryProperties',
+  method: (intl) => ({
+    default: {
+      type: 'number',
+      title: intl.formatMessage(messages.defaultValue),
+    },
+  }),
+});
+
+config.registerUtility({
+  name: 'hidden',
+  type: 'fieldFactoryProperties',
+  method: (intl) => ({
+    default: {
+      type: 'string',
+      title: intl.formatMessage(messages.defaultValue),
+    },
+  }),
+});
+
+config.registerUtility({
+  name: 'textarea',
+  type: 'fieldFactoryProperties',
+  method: (intl) => ({
+    minLength: {
+      type: 'integer',
+      title: intl.formatMessage(messages.minLength),
+    },
+    maxLength: {
+      type: 'integer',
+      title: intl.formatMessage(messages.maxLength),
+    },
+    default: {
       type: 'string',
       widget: 'textarea',
-      title: intl.formatMessage(messages.description),
+      title: intl.formatMessage(messages.defaultValue),
     },
-    parentFieldSet: {
+    placeholder: {
       type: 'string',
-      title: intl.formatMessage(messages.parentFieldSet),
-      choices: makeFieldsetList(fieldsets),
+      title: intl.formatMessage(messages.placeholder),
     },
-    required: {
+  }),
+});
+
+// Register field factory initial data utilities
+
+['Date/Time', 'label_datetime_field'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryInitialData',
+    method: (intl) => ({
+      type: 'string',
+      widget: 'datetime',
+      factory,
+    }),
+  });
+});
+
+['Date', 'label_date_field'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryInitialData',
+    method: (intl) => ({
+      type: 'string',
+      widget: 'date',
+      factory,
+    }),
+  });
+});
+
+config.registerUtility({
+  name: 'time',
+  type: 'fieldFactoryInitialData',
+  method: (intl) => ({
+    type: 'string',
+    widget: 'time',
+    factory: 'time',
+  }),
+});
+
+['Email', 'label_email'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryInitialData',
+    method: (intl) => ({
+      type: 'string',
+      widget: 'email',
+      id: 'email',
+      factory,
+    }),
+  });
+});
+
+['File', 'File Upload'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryInitialData',
+    method: (intl) => ({
+      type: 'object',
+      factory,
+    }),
+  });
+});
+
+['Floating-point number', 'label_float_field'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryInitialData',
+    method: (intl) => ({
+      type: 'number',
+      factory,
+    }),
+  });
+});
+
+['Integer', 'label_integer_field'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryInitialData',
+    method: (intl) => ({
+      type: 'integer',
+      factory,
+    }),
+  });
+});
+
+config.registerUtility({
+  name: 'Image',
+  type: 'fieldFactoryInitialData',
+  method: (intl) => ({
+    type: 'object',
+    factory: 'Image',
+  }),
+});
+
+config.registerUtility({
+  name: 'JSONField',
+  type: 'fieldFactoryInitialData',
+  method: (intl) => ({
+    type: 'dict',
+    widget: 'json',
+    factory: 'JSONField',
+  }),
+});
+
+['Multiple Choice', 'label_multi_choice_field'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryInitialData',
+    method: (intl) => ({
+      type: 'array',
+      factory,
+    }),
+  });
+});
+
+config.registerUtility({
+  name: 'Relation List',
+  type: 'fieldFactoryInitialData',
+  method: (intl) => ({
+    type: 'array',
+    factory: 'Relation List',
+  }),
+});
+
+['Choice', 'label_choice_field'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryInitialData',
+    method: (intl) => ({
+      type: 'string',
+      choices: [],
+      factory,
+    }),
+  });
+});
+
+config.registerUtility({
+  name: 'Relation Choice',
+  type: 'fieldFactoryInitialData',
+  method: (intl) => ({
+    type: 'string',
+    factory: 'Relation Choice',
+  }),
+});
+
+['Password', 'label_password_field'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryInitialData',
+    method: (intl) => ({
+      type: 'string',
+      widget: 'password',
+      factory,
+    }),
+  });
+});
+
+config.registerUtility({
+  name: 'Rich Text',
+  type: 'fieldFactoryInitialData',
+  method: (intl) => ({
+    type: 'string',
+    widget: 'richtext',
+    factory: 'Rich Text',
+  }),
+});
+
+config.registerUtility({
+  name: 'URL',
+  type: 'fieldFactoryInitialData',
+  method: (intl) => ({
+    type: 'string',
+    widget: 'url',
+    factory: 'URL',
+  }),
+});
+
+['Yes/No', 'label_boolean_field'].forEach((factory) => {
+  config.registerUtility({
+    name: factory,
+    type: 'fieldFactoryInitialData',
+    method: (intl) => ({
       type: 'boolean',
-      title: intl.formatMessage(messages.required),
-    },
-    ...((factory) => {
-      switch (factory) {
-        case 'Rich Text':
-          return {
-            maxLength: {
-              type: 'integer',
-              title: intl.formatMessage(messages.maxLength),
-            },
-          };
-        case 'URL':
-        case 'Password':
-        case 'label_password_field':
-        case 'Email':
-        case 'label_email':
-          return {
-            minLength: {
-              type: 'integer',
-              title: intl.formatMessage(messages.minLength),
-            },
-            maxLength: {
-              type: 'integer',
-              title: intl.formatMessage(messages.maxLength),
-            },
-          };
-        case 'Integer':
-        case 'label_integer_field':
-          return {
-            minimum: {
-              type: 'integer',
-              title: intl.formatMessage(messages.minimum),
-            },
-            maximum: {
-              type: 'integer',
-              title: intl.formatMessage(messages.maximum),
-            },
-          };
-        case 'Floating-point number':
-        case 'label_float_field':
-        case 'Date/Time':
-        case 'label_datetime_field':
-        case 'Date':
-        case 'label_date_field':
-        case 'File':
-        case 'File Upload':
-        case 'Image':
-        case 'Yes/No':
-        case 'label_boolean_field':
-        case 'JSONField':
-        case 'Relation Choice':
-        case 'Relation List':
-          return {};
-        case 'Multiple Choice':
-        case 'label_multi_choice_field':
-        case 'Choice':
-        case 'label_choice_field':
-          return {
-            values: {
+      factory,
+    }),
+  });
+});
+
+config.registerUtility({
+  name: 'static_text',
+  type: 'fieldFactoryInitialData',
+  method: (intl) => ({
+    type: 'object',
+    widget: 'static_text',
+    factory: 'static_text',
+  }),
+});
+
+config.registerUtility({
+  name: 'hidden',
+  type: 'fieldFactoryInitialData',
+  method: (intl) => ({
+    type: 'string',
+    widget: 'hidden',
+    factory: 'hidden',
+  }),
+});
+
+config.registerUtility({
+  name: 'number',
+  type: 'fieldFactoryInitialData',
+  method: (intl) => ({
+    type: 'number',
+    factory: 'number',
+  }),
+});
+
+config.registerUtility({
+  name: 'radio_group',
+  type: 'fieldFactoryInitialData',
+  method: (intl) => ({
+    type: 'string',
+    choices: [],
+    widget: 'radio_group',
+    factory: 'radio_group',
+  }),
+});
+
+config.registerUtility({
+  name: 'checkbox_group',
+  type: 'fieldFactoryInitialData',
+  method: (intl) => ({
+    type: 'array',
+    widget: 'checkbox_group',
+    factory: 'checkbox_group',
+  }),
+});
+
+config.registerUtility({
+  name: 'textarea',
+  type: 'fieldFactoryInitialData',
+  method: (intl) => ({
+    type: 'string',
+    widget: 'textarea',
+    factory: 'textarea',
+  }),
+});
+
+/**
+ * schemaField used for modal form, when editing a field
+ * - based on the factory a set of fields is presented
+ * - fields can be moved to another fieldset
+ * @param {string} factory - the kind of field
+ * @param {Object} intl
+ * @param {*} fieldsets
+ * @param {Boolean} allowEditId
+ * @param {Boolean} allowEditQueryParameter
+ * @param {Boolean} allowEditPlaceholder
+ * @param {Object} extraFields
+ * @return {Object} - schema
+ */
+const schemaField = (
+  factory,
+  intl,
+  fieldsets,
+  allowEditId,
+  allowEditQueryParameter,
+  allowEditPlaceholder,
+  extraFields = {},
+) => {
+  const utility = config.getUtility({
+    name: factory,
+    type: 'fieldFactoryProperties',
+  });
+
+  const properties = utility.method
+    ? utility.method(intl)
+    : {
+        minLength: {
+          type: 'integer',
+          title: intl.formatMessage(messages.minLength),
+        },
+        maxLength: {
+          type: 'integer',
+          title: intl.formatMessage(messages.maxLength),
+        },
+        default: {
+          type: 'string',
+          title: intl.formatMessage(messages.defaultValue),
+        },
+        ...(allowEditPlaceholder
+          ? {
+              placeholder: {
+                type: 'string',
+                title: intl.formatMessage(messages.placeholder),
+              },
+            }
+          : {}),
+      };
+
+  return {
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'default',
+        fields: [
+          ...keys(extraFields),
+          ...(allowEditId ? ['id'] : []),
+          ...['title', 'description', 'parentFieldSet'],
+          ...(allowEditQueryParameter ? ['queryParameterName'] : []),
+          ...keys(properties),
+          ...['required'],
+        ],
+      },
+    ],
+    properties: {
+      ...extraFields,
+      ...(allowEditId
+        ? {
+            id: {
               type: 'string',
-              title: intl.formatMessage(messages.choices),
-              widget: 'textarea',
+              title: intl.formatMessage(messages.idTitle),
             },
-          };
-        default:
-          return {
-            minLength: {
-              type: 'integer',
-              title: intl.formatMessage(messages.minLength),
-            },
-            maxLength: {
-              type: 'integer',
-              title: intl.formatMessage(messages.maxLength),
+          }
+        : {}),
+      title: {
+        type: 'string',
+        title: intl.formatMessage(messages.title),
+      },
+      description: {
+        type: 'string',
+        widget: 'textarea',
+        title: intl.formatMessage(messages.description),
+      },
+      parentFieldSet: {
+        type: 'string',
+        title: intl.formatMessage(messages.parentFieldSet),
+        choices: makeFieldsetList(fieldsets),
+      },
+      ...(allowEditQueryParameter
+        ? {
+            queryParameterName: {
+              type: 'string',
+              title: intl.formatMessage(messages.queryParameterName),
+              description: intl.formatMessage(
+                messages.queryParameterNameDescription,
+              ),
             },
-          };
-      }
-    })(factory),
-  },
-  required: ['type', 'title'],
-});
+          }
+        : {}),
+      required: {
+        type: 'boolean',
+        title: intl.formatMessage(messages.required),
+      },
+      ...properties,
+    },
+    required: ['type', 'title'],
+  };
+};
 
 /**
  * schema for adding a new field
@@ -427,13 +903,34 @@ class SchemaWidget extends Component {
      * List of error messages
      */
     error: PropTypes.arrayOf(PropTypes.string),
+    /**
+     * Filter for factory choices
+     */
+    filterFactory: PropTypes.arrayOf(PropTypes.string),
+    /**
+     * Additional factories
+     */
+    additionalFactory: PropTypes.arrayOf(PropTypes.object),
+    /**
+     * Allow editing of the id
+     */
+    allowEditId: PropTypes.bool,
+    /**
+     * Allow editing of the query parameter
+     */
+    allowEditQueryParameter: PropTypes.bool,
+    /**
+     * Allow editing of the placeholder
+     */
+    allowEditPlaceholder: PropTypes.bool,
     /**
      * On change handler
      */
     onChange: PropTypes.func.isRequired,
     /**
-     * Intl object
+     * Get vocabulary action
      */
+    getVocabulary: PropTypes.func.isRequired,
   };
 
   /**
@@ -445,6 +942,11 @@ class SchemaWidget extends Component {
     required: false,
     value: {},
     error: [],
+    filterFactory: null,
+    additionalFactory: null,
+    allowEditId: false,
+    allowEditQueryParameter: false,
+    allowEditPlaceholder: false,
   };
 
   /**
@@ -485,6 +987,19 @@ class SchemaWidget extends Component {
     };
   }
 
+  /**
+   * Component did mount
+   * @method componentDidMount
+   * @returns {undefined}
+   */
+  componentDidMount() {
+    this.props.getVocabulary({
+      vocabNameOrURL: 'Fields',
+      size: -1,
+      subrequest: 'schemawidget',
+    });
+  }
+
   /**
    * Add field handler
    * @method onAddField
@@ -492,7 +1007,10 @@ class SchemaWidget extends Component {
    * @returns {undefined}
    */
   onAddField(values) {
-    const fieldId = slugify(values.title);
+    const fieldId = slugify(
+      values.id || values.title,
+      keys(this.props.value.properties),
+    );
     const currentFieldsetFields =
       this.props.value.fieldsets[this.state.currentFieldset].fields;
     const hasChangeNote = currentFieldsetFields.indexOf('changeNote') > -1;
@@ -504,6 +1022,22 @@ class SchemaWidget extends Component {
         ]
       : [...currentFieldsetFields, fieldId];
 
+    const utility = config.getUtility({
+      name: values.factory,
+      type: 'fieldFactoryInitialData',
+    });
+
+    const multiple =
+      values.factory === 'Multiple Choice' ||
+      values.factory === 'label_multi_choice_field';
+
+    const initialData = utility.method
+      ? omit(utility.method(this.props.intl), ['id'])
+      : {
+          type: 'string',
+          factory: values.factory,
+        };
+
     this.onChange({
       ...this.props.value,
       fieldsets: [
@@ -517,121 +1051,17 @@ class SchemaWidget extends Component {
       properties: {
         ...this.props.value.properties,
         [fieldId]: {
-          title: values.title,
-          description: values.description,
           id: fieldId,
-          ...((factory) => {
-            switch (factory) {
-              case 'Date/Time':
-              case 'label_datetime_field':
-                return {
-                  type: 'string',
-                  widget: 'datetime',
-                  factory,
-                };
-              case 'Date':
-              case 'label_date_field':
-                return {
-                  type: 'string',
-                  widget: 'date',
-                  factory,
-                };
-              case 'Email':
-              case 'label_email':
-                return {
-                  type: 'string',
-                  widget: 'email',
-                  factory,
-                };
-              case 'File':
-              case 'File Upload':
-                return {
-                  type: 'object',
-                  factory,
-                };
-              case 'Floating-point number':
-              case 'label_float_field':
-                return {
-                  type: 'number',
-                  factory,
-                };
-              case 'Integer':
-              case 'label_integer_field':
-                return {
-                  type: 'integer',
-                  factory,
-                };
-              case 'Image':
-                return {
-                  type: 'object',
-                  factory,
-                };
-              case 'JSONField':
-                return {
-                  type: 'dict',
-                  widget: 'json',
-                  factory,
-                };
-              case 'Multiple Choice':
-              case 'label_multi_choice_field':
-                return {
-                  type: 'array',
-                  factory,
-                };
-              case 'Relation List':
-                return {
-                  type: 'array',
-                  factory,
-                };
-              case 'Choice':
-              case 'label_choice_field':
-                return {
-                  type: 'string',
-                  choices: [],
-                  factory,
-                };
-              case 'Relation Choice':
-                return {
-                  type: 'string',
-                  factory,
-                };
-              case 'Password':
-              case 'label_password_field':
-                return {
-                  type: 'string',
-                  widget: 'password',
-                  factory,
-                };
-              case 'Rich Text':
-                return {
-                  type: 'string',
-                  widget: 'richtext',
-                  factory,
-                };
-              case 'URL':
-                return {
-                  type: 'string',
-                  widget: 'url',
-                  factory,
-                };
-              case 'Yes/No':
-              case 'label_boolean_field':
-                return {
-                  type: 'boolean',
-                  factory,
-                };
-              default:
-                return {
-                  type: 'string',
-                  factory,
-                };
-            }
-          })(values.factory),
+          ...omit(initialData, ['required']),
+          ...omit(values, ['factory', 'required', 'id', 'parentFieldset']),
+          ...formatTextareaToArray(values.values),
+          ...formatTextareaToChoices(values.values, multiple),
         },
       },
-      required: values.required
-        ? [...this.props.value.required, fieldId]
-        : this.props.value.required,
+      required: [
+        ...this.props.value.required,
+        ...(values.required || initialData.required ? [fieldId] : []),
+      ],
     });
     this.onCancel();
   }
@@ -748,7 +1178,7 @@ class SchemaWidget extends Component {
         ...slice(fieldsets, 0, currentFieldset),
         {
           ...fieldsets[currentFieldset],
-          fields: map(fieldsets[currentFieldset].fields, (field) =>
+          fields: fieldsets[currentFieldset].fields.map((field) =>
             field === oldfieldId ? newfieldId : field,
           ),
         },
@@ -777,7 +1207,7 @@ class SchemaWidget extends Component {
     listOfProp.forEach((prop) => {
       formattedValues = {
         ...formattedValues,
-        ...{ [prop]: values[prop] ? parseFloat(values[prop]) : null },
+        ...{ [prop]: values[prop] ? parseFloat(values[prop]) : undefined },
       };
     });
 
@@ -786,22 +1216,42 @@ class SchemaWidget extends Component {
         'Multiple Choice' ||
       this.props.value.properties[this.state.editField.id]?.factory ===
         'label_multi_choice_field';
+
+    let fieldsets = this.props.value.fieldsets;
+
+    if (this.state.editField.id !== formattedValues.id) {
+      this.props.value.fieldsets[this.state.currentFieldset].fields =
+        this.props.value.fieldsets[this.state.currentFieldset].fields.map(
+          (field) =>
+            field === this.state.editField.id ? formattedValues.id : field,
+        );
+      const index = isArray(this.props.value.required)
+        ? this.props.value.required.indexOf(formattedValues.id)
+        : -1;
+
+      if (index > -1) {
+        this.props.value.required[index] = formattedValues.id;
+      }
+    }
+
+    if (formattedValues.parentFieldSet) {
+      fieldsets = this.editFieldset(
+        this.props.value.fieldsets,
+        formattedValues.parentFieldSet,
+        this.state.currentFieldset,
+        this.state.editField.id,
+        formattedValues.id,
+      );
+    }
+
     const result = {
       ...this.props.value,
-      fieldsets: formattedValues.parentFieldSet
-        ? this.editFieldset(
-            this.props.value.fieldsets,
-            formattedValues.parentFieldSet,
-            this.state.currentFieldset,
-            this.state.editField.id,
-            formattedValues.id,
-          )
-        : this.props.value.fieldsets,
+      fieldsets,
       properties: {
         ...omit(this.props.value.properties, [this.state.editField.id]),
         [formattedValues.id]: {
           ...this.props.value.properties[this.state.editField.id],
-          ...omit(formattedValues, ['id', 'parentFieldSet']),
+          ...omit(formattedValues, ['parentFieldSet']),
           ...formatTextareaToArray(formattedValues.values),
           ...formatTextareaToChoices(formattedValues.values, multiple),
         },
@@ -863,6 +1313,10 @@ class SchemaWidget extends Component {
         ...slice(this.props.value.fieldsets, this.state.currentFieldset + 1),
       ],
       properties: omit(this.props.value.properties, [this.state.deleteField]),
+      required: without(
+        this.props.value.required || [],
+        this.state.deleteField,
+      ),
     });
     this.onCancel();
   }
@@ -926,7 +1380,7 @@ class SchemaWidget extends Component {
    */
   onShowAddField(event) {
     this.setState({
-      addField: true,
+      addField: '',
     });
     event.preventDefault();
   }
@@ -1080,11 +1534,34 @@ class SchemaWidget extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const { error, reactBeautifulDnd } = this.props;
+    const { additionalFactory, error, reactBeautifulDnd, filterFactory } =
+      this.props;
     const { Draggable, DragDropContext, Droppable } = reactBeautifulDnd;
     if (!this.props.value) {
       return '';
     }
+    const choices = [
+      ...this.props.fields,
+      ...(this.props.additionalFactory || []),
+    ];
+    let editFieldType = '';
+    if (this.state.editField) {
+      let factory =
+        this.props.value.properties[this.state.editField.id].factory;
+
+      if (factory.value) {
+        factory = factory.value;
+      }
+      const fieldType = find(choices, {
+        value: factory !== '' ? factory : 'label_text_field',
+      });
+      editFieldType = fieldType
+        ? this.props.intl.formatMessage({
+            id: fieldType.value,
+            defaultMessage: fieldType.label,
+          })
+        : '';
+    }
     const nonUserCreatedFields = this.props.value.fieldsets[
       this.state.currentFieldset
     ].fields.filter(
@@ -1102,12 +1579,9 @@ class SchemaWidget extends Component {
       : this.props.value.fieldsets[this.state.currentFieldset].fields.length;
     // fields that were not created by the user, but are part of a behavior
     const makeNonUserFields = () =>
-      map(
-        this.props.value.fieldsets[this.state.currentFieldset].fields.slice(
-          0,
-          userCreatedFieldsStartingIndex,
-        ),
-        (field, index) => (
+      this.props.value.fieldsets[this.state.currentFieldset].fields
+        .slice(0, userCreatedFieldsStartingIndex)
+        .map((field, index) => (
           <div
             style={{ background: '#c7d5d859' }}
             key={`${field}-${this.state.currentFieldset}-${index}`}
@@ -1116,6 +1590,7 @@ class SchemaWidget extends Component {
               {...this.props.value.properties[field]}
               id={field}
               required={this.props.value.required.indexOf(field) !== -1}
+              widgets={this.props.widgets}
               onEdit={this.onShowEditField}
               draggable={false}
               isDisabled={true}
@@ -1125,16 +1600,12 @@ class SchemaWidget extends Component {
               value={this.props.value.properties[field].default}
             />
           </div>
-        ),
-      );
+        ));
     // fields created by the user
     const makeUserFields = () =>
-      map(
-        this.props.value.fieldsets[this.state.currentFieldset].fields.slice(
-          userCreatedFieldsStartingIndex,
-          lastUserCreatedFieldsIndex,
-        ),
-        (field, index) => (
+      this.props.value.fieldsets[this.state.currentFieldset].fields
+        .slice(userCreatedFieldsStartingIndex, lastUserCreatedFieldsIndex)
+        .map((field, index) => (
           <Draggable
             draggableId={field}
             index={userCreatedFieldsStartingIndex + index}
@@ -1153,7 +1624,11 @@ class SchemaWidget extends Component {
                 <Field
                   {...this.props.value.properties[field]}
                   id={field}
-                  required={this.props.value.required.indexOf(field) !== -1}
+                  required={
+                    this.props.value.required &&
+                    this.props.value.required.indexOf(field) !== -1
+                  }
+                  widgets={this.props.widgets}
                   onEdit={this.onShowEditField}
                   draggable={true}
                   isDisabled={false}
@@ -1166,8 +1641,7 @@ class SchemaWidget extends Component {
               </div>
             )}
           </Draggable>
-        ),
-      );
+        ));
 
     const canAddFields =
       this.state.currentFieldset === 0 ||
@@ -1176,6 +1650,13 @@ class SchemaWidget extends Component {
         'generated',
       );
 
+    const utility = config.getUtility({
+      name: this.state.addField,
+      type: 'fieldFactoryInitialData',
+    });
+
+    const id = utility?.method ? utility.method(this.props.intl).id : undefined;
+
     return (
       <div>
         <Segment.Group
@@ -1184,7 +1665,7 @@ class SchemaWidget extends Component {
           }}
         >
           {error.length > 0 &&
-            map(error, (err, index) => (
+            error.map((err, index) => (
               <Message
                 icon="warning"
                 key={`${err}-${index}`}
@@ -1204,7 +1685,7 @@ class SchemaWidget extends Component {
                   {...provided.draggableProps}
                   style={getTabStyle(snapshot.isDraggingOver)}
                 >
-                  {map(this.props.value.fieldsets, (fieldset, index) => (
+                  {this.props.value.fieldsets.map((fieldset, index) => (
                     <SchemaWidgetFieldset
                       key={`${fieldset.id}-${this.state.currentFieldset}-${index}`}
                       title={fieldset.title}
@@ -1283,7 +1764,7 @@ class SchemaWidget extends Component {
           ) : null}
 
           {canAddFields && (
-            <Form.Field inline>
+            <Form.Field inline className="addfield">
               <Grid>
                 <Grid.Row stretched>
                   <Grid.Column width="12">
@@ -1312,21 +1793,31 @@ class SchemaWidget extends Component {
           <ModalForm
             onSubmit={this.onAddField}
             onCancel={this.onCancel}
+            className={`field-${slugify(isString(this.state.addField) && this.state.addField !== '' ? this.state.addField : 'label_text_field')}`}
+            onChangeFormData={(data) => {
+              this.setState({
+                addField: data.factory,
+              });
+            }}
             title={this.props.intl.formatMessage(messages.addField)}
             formData={{
-              type: '',
-              id: '',
-              title: '',
+              factory:
+                find(choices, { value: 'label_text_field' }) || undefined,
+              id,
             }}
-            schema={{
-              fieldsets: [
-                {
-                  id: 'default',
-                  title: this.props.intl.formatMessage(messages.default),
-                  fields: ['factory', 'title', 'description', 'required'],
-                },
-              ],
-              properties: {
+            schema={schemaField(
+              this.state.addField,
+              this.props.intl,
+              this.props.value.fieldsets.filter(
+                (fieldset) =>
+                  !fieldset.behavior ||
+                  fieldset.id === 'default' ||
+                  fieldset.behavior.includes('generated'),
+              ),
+              this.props.allowEditId,
+              this.props.allowEditQueryParameter,
+              this.props.allowEditPlaceholder,
+              {
                 factory: {
                   type: 'string',
                   factory: 'Choice',
@@ -1334,30 +1825,20 @@ class SchemaWidget extends Component {
                   vocabulary: {
                     '@id': `Fields`,
                   },
-                },
-                title: {
-                  type: 'string',
-                  title: this.props.intl.formatMessage(messages.title),
-                },
-                description: {
-                  type: 'string',
-                  widget: 'textarea',
-                  title: this.props.intl.formatMessage(messages.description),
-                },
-                required: {
-                  type: 'boolean',
-                  title: this.props.intl.formatMessage(messages.required),
+                  filterChoices: filterFactory,
+                  additionalChoices: additionalFactory,
+                  sort: true,
                 },
               },
-              required: ['type', 'title'],
-            }}
+            )}
           />
         )}
         {this.state.editField !== null && (
           <ModalForm
             onSubmit={this.onEditField}
             onCancel={this.onCancel}
-            title={this.props.intl.formatMessage(messages.editField)}
+            title={`${this.props.intl.formatMessage(messages.editField)}: ${editFieldType}`}
+            className={`factory-${slugify(editFieldType)}`}
             formData={{
               ...this.props.value.properties[this.state.editField.id],
               id: this.state.editField.id,
@@ -1379,6 +1860,9 @@ class SchemaWidget extends Component {
                   fieldset.id === 'default' ||
                   fieldset.behavior.includes('generated'),
               ),
+              this.props.allowEditId,
+              this.props.allowEditQueryParameter,
+              this.props.allowEditPlaceholder,
             )}
           />
         )}
@@ -1433,7 +1917,9 @@ export default compose(
   connect(
     (state, props) => ({
       value: isString(props.value) ? JSON.parse(props.value) : props.value,
+      fields:
+        state.vocabularies?.Fields?.subrequests?.schemawidget?.items || [],
     }),
-    {},
+    { getVocabulary },
   ),
 )(SchemaWidget);