@nocobase/plugin-workflow-manual 0.20.0-alpha.9 → 0.21.0-alpha.10

package/src/client/__e2e__/workflowTodo.test.ts

@@ -1,13 +1,14 @@
 import { faker } from '@faker-js/faker';
 import {
   CollectionTriggerNode,
+  ManualNode,
   apiCreateWorkflow,
   apiDeleteWorkflow,
   apiGetWorkflow,
   apiUpdateWorkflowTrigger,
   appendJsonCollectionName,
   generalWithNoRelationalFields,
-  ManualNode,
+  apiGetDataSourceCount,
 } from '@nocobase/plugin-workflow-test/e2e';
 import { expect, test } from '@nocobase/test/e2e';
 import { dayjs } from '@nocobase/utils';
@@ -69,10 +70,14 @@ test('filter task node', async ({ page, mockPage, mockCollections, mockRecords }
   await manualNode.configureUserInterfaceButton.click();
   await manualNode.addBlockButton.hover();
   await manualNode.createRecordFormMenu.hover();
+  const dataSourcesCount = await apiGetDataSourceCount();
+  if (dataSourcesCount > 1) {
+    await page.getByRole('menuitem', { name: 'Main right' }).hover();
+  }
   await page.getByRole('menuitem', { name: manualNodeCollectionDisplayName }).click();
   await page.mouse.move(300, 0, { steps: 100 });
   await page
-    .locator(`button[aria-label^="schema-initializer-Grid-FormItemInitializers-${manualNodeCollectionName}"]`)
+    .locator(`button[aria-label^="schema-initializer-Grid-form:configureFields-${manualNodeCollectionName}"]`)
     .hover();
   await page.getByLabel(`designer-schema-settings-CardItem-CreateFormDesigner-${manualNodeCollectionName}`).hover();
   await page.getByRole('menuitem', { name: 'Edit block title' }).click();
@@ -80,7 +85,7 @@ test('filter task node', async ({ page, mockPage, mockCollections, mockRecords }
   await page.getByLabel('Edit block title').getByRole('textbox').fill(blockTitle);
   await page.getByRole('button', { name: 'OK', exact: true }).click();
   await page
-    .locator(`button[aria-label^="schema-initializer-Grid-FormItemInitializers-${manualNodeCollectionName}"]`)
+    .locator(`button[aria-label^="schema-initializer-Grid-form:configureFields-${manualNodeCollectionName}"]`)
     .hover();
   await page.getByRole('menuitem', { name: manualNodeFieldDisplayName }).getByRole('switch').click();
   await page.mouse.move(300, 0, { steps: 100 });
@@ -103,7 +108,7 @@ test('filter task node', async ({ page, mockPage, mockCollections, mockRecords }
   const newPage = mockPage();
   await newPage.goto();
   await page.waitForLoadState('networkidle');
-  await page.getByLabel('schema-initializer-Grid-BlockInitializers').hover();
+  await page.getByLabel('schema-initializer-Grid-page:addBlock').hover();
   await page.getByRole('menuitem', { name: 'check-square Workflow todos' }).click();
   await page.mouse.move(300, 0, { steps: 100 });
   await page.waitForTimeout(300);
@@ -179,10 +184,14 @@ test('filter workflow name', async ({ page, mockPage, mockCollections, mockRecor
   await manualNode.configureUserInterfaceButton.click();
   await manualNode.addBlockButton.hover();
   await manualNode.createRecordFormMenu.hover();
+  const dataSourcesCount = await apiGetDataSourceCount();
+  if (dataSourcesCount > 1) {
+    await page.getByRole('menuitem', { name: 'Main right' }).hover();
+  }
   await page.getByRole('menuitem', { name: manualNodeCollectionDisplayName }).click();
   await page.mouse.move(300, 0, { steps: 100 });
   await page
-    .locator(`button[aria-label^="schema-initializer-Grid-FormItemInitializers-${manualNodeCollectionName}"]`)
+    .locator(`button[aria-label^="schema-initializer-Grid-form:configureFields-${manualNodeCollectionName}"]`)
     .hover();
   await page.getByLabel(`designer-schema-settings-CardItem-CreateFormDesigner-${manualNodeCollectionName}`).hover();
   await page.getByRole('menuitem', { name: 'Edit block title' }).click();
@@ -190,7 +199,7 @@ test('filter workflow name', async ({ page, mockPage, mockCollections, mockRecor
   await page.getByLabel('Edit block title').getByRole('textbox').fill(blockTitle);
   await page.getByRole('button', { name: 'OK', exact: true }).click();
   await page
-    .locator(`button[aria-label^="schema-initializer-Grid-FormItemInitializers-${manualNodeCollectionName}"]`)
+    .locator(`button[aria-label^="schema-initializer-Grid-form:configureFields-${manualNodeCollectionName}"]`)
     .hover();
   await page.getByRole('menuitem', { name: manualNodeFieldDisplayName }).getByRole('switch').click();
   await page.mouse.move(300, 0, { steps: 100 });
@@ -213,7 +222,7 @@ test('filter workflow name', async ({ page, mockPage, mockCollections, mockRecor
   const newPage = mockPage();
   await newPage.goto();
   await page.waitForLoadState('networkidle');
-  await page.getByLabel('schema-initializer-Grid-BlockInitializers').hover();
+  await page.getByLabel('schema-initializer-Grid-page:addBlock').hover();
   await page.getByRole('menuitem', { name: 'check-square Workflow todos' }).click();
   await page.mouse.move(300, 0, { steps: 100 });
   await page.waitForTimeout(300);

package/src/client/index.ts

@@ -3,11 +3,16 @@ import WorkflowPlugin from '@nocobase/plugin-workflow/client';
 
 import Manual from './instruction';
 
+import { NAMESPACE } from '../locale';
 import { WorkflowTodo } from './WorkflowTodo';
 import { WorkflowTodoBlockInitializer } from './WorkflowTodoBlockInitializer';
-import { NAMESPACE } from '../locale';
-import { addActionButton, addBlockButton } from './instruction/SchemaConfig';
-import { addCustomFormField } from './instruction/forms/custom';
+import {
+  addActionButton,
+  addActionButton_deprecated,
+  addBlockButton,
+  addBlockButton_deprecated,
+} from './instruction/SchemaConfig';
+import { addCustomFormField, addCustomFormField_deprecated } from './instruction/forms/custom';
 
 export default class extends Plugin {
   async afterAdd() {
@@ -22,11 +27,14 @@ export default class extends Plugin {
     const workflow = this.app.pm.get('workflow') as WorkflowPlugin;
     workflow.registerInstruction('manual', Manual);
 
+    this.app.schemaInitializerManager.add(addBlockButton_deprecated);
     this.app.schemaInitializerManager.add(addBlockButton);
+    this.app.schemaInitializerManager.add(addActionButton_deprecated);
     this.app.schemaInitializerManager.add(addActionButton);
+    this.app.schemaInitializerManager.add(addCustomFormField_deprecated);
     this.app.schemaInitializerManager.add(addCustomFormField);
 
-    const blockInitializers = this.app.schemaInitializerManager.get('BlockInitializers');
+    const blockInitializers = this.app.schemaInitializerManager.get('page:addBlock');
     blockInitializers.add('otherBlocks.workflowTodos', {
       title: `{{t("Workflow todos", { ns: "${NAMESPACE}" })}}`,
       Component: 'WorkflowTodoBlockInitializer',

package/src/client/instruction/FormBlockInitializer.tsx

@@ -4,7 +4,6 @@ import {
   CollectionProvider_deprecated,
   SchemaInitializerItem,
   SchemaInitializerItemType,
-  createFormBlockSchema,
   useRecordCollectionDataSourceItems,
   useSchemaInitializer,
   useSchemaInitializerItem,
@@ -14,6 +13,7 @@ import {
 import { JOB_STATUS, traverseSchema } from '@nocobase/plugin-workflow/client';
 
 import { NAMESPACE } from '../../locale';
+import { createManualFormBlockUISchema } from './createManualFormBlockUISchema';
 
 function InternalFormBlockInitializer({ schema, ...others }) {
   const { getTemplateSchemaByMode } = useSchemaTemplateManager();
@@ -21,8 +21,8 @@ function InternalFormBlockInitializer({ schema, ...others }) {
   const items = useRecordCollectionDataSourceItems('FormItem') as SchemaInitializerItemType[];
   async function onConfirm({ item }) {
     const template = item.template ? await getTemplateSchemaByMode(item) : null;
-    const result = createFormBlockSchema({
-      actionInitializers: 'AddActionButton',
+    const result = createManualFormBlockUISchema({
+      actionInitializers: 'workflowManual:form:configureActions',
       actions: {
         resolve: {
           type: 'void',

package/src/client/instruction/SchemaConfig.tsx

@@ -1,30 +1,28 @@
 import { FormLayout } from '@formily/antd-v5';
 import { createForm } from '@formily/core';
 import { FormProvider, ISchema, Schema, useFieldSchema, useForm } from '@formily/react';
-import { Alert, Button, Modal, Space } from 'antd';
+import { Alert, Button, Modal, Space, message } from 'antd';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
   Action,
   ActionContextProvider,
+  CompatibleSchemaInitializer,
   DefaultValueProvider,
   FormActiveFieldsProvider,
   GeneralSchemaDesigner,
   InitializerWithSwitch,
   SchemaComponent,
   SchemaComponentContext,
-  SchemaInitializer,
   SchemaInitializerItem,
   SchemaInitializerItemType,
-  SchemaSettingsBlockTitleItem,
   SchemaSettingsDivider,
   SchemaSettingsItem,
   SchemaSettingsRemove,
   VariableScopeProvider,
   css,
   gridRowColWrap,
-  useCompile,
   useDataSourceManager,
   useFormActiveFields,
   useFormBlockContext,
@@ -34,7 +32,9 @@ import {
   useSchemaOptionsContext,
 } from '@nocobase/client';
 import WorkflowPlugin, {
+  DetailsBlockProvider,
   JOB_STATUS,
+  SimpleDesigner,
   useAvailableUpstreams,
   useFlowContext,
   useNodeContext,
@@ -43,8 +43,7 @@ import WorkflowPlugin, {
 } from '@nocobase/plugin-workflow/client';
 import { Registry, lodash } from '@nocobase/utils/client';
 
-import { NAMESPACE, useLang } from '../../locale';
-import { DetailsBlockProvider } from './DetailsBlockProvider';
+import { NAMESPACE, usePluginTranslation } from '../../locale';
 import { FormBlockProvider } from './FormBlockProvider';
 import createRecordForm from './forms/create';
 import customRecordForm from './forms/custom';
@@ -85,13 +84,14 @@ export type ManualFormType = {
       [key: string]: React.FC;
     };
   };
+  validate?: (config: any) => string | null;
 };
 
 export const manualFormTypes = new Registry<ManualFormType>();
 
-manualFormTypes.register('customForm', customRecordForm);
-manualFormTypes.register('createForm', createRecordForm);
-manualFormTypes.register('updateForm', updateRecordForm);
+manualFormTypes.register('custom', customRecordForm);
+manualFormTypes.register('create', createRecordForm);
+manualFormTypes.register('update', updateRecordForm);
 
 function useTriggerInitializers(): SchemaInitializerItemType | null {
   const { workflow } = useFlowContext();
@@ -104,25 +104,11 @@ const blockTypeNames = {
   record: `{{t("Data record", { ns: "${NAMESPACE}" })}}`,
 };
 
-function SimpleDesigner() {
-  const schema = useFieldSchema();
-  const title = blockTypeNames[schema['x-designer-props']?.type] ?? '{{t("Block")}}';
-  const compile = useCompile();
-  return (
-    <GeneralSchemaDesigner title={compile(title)}>
-      <SchemaSettingsBlockTitleItem />
-      <SchemaSettingsDivider />
-      <SchemaSettingsRemove
-        removeParentsIfNoChildren
-        breakRemoveOn={{
-          'x-component': 'Grid',
-        }}
-      />
-    </GeneralSchemaDesigner>
-  );
-}
-
-export const addBlockButton: SchemaInitializer = new SchemaInitializer({
+/**
+ * @deprecated
+ * use `addBlockButton` instead
+ */
+export const addBlockButton_deprecated = new CompatibleSchemaInitializer({
   name: 'AddBlockButton',
   wrap: gridRowColWrap,
   title: '{{t("Add block")}}',
@@ -150,7 +136,7 @@ export const addBlockButton: SchemaInitializer = new SchemaInitializer({
                 {
                   name: 'nodes',
                   type: 'subMenu',
-                  title: `{{t("Node result", { ns: "${NAMESPACE}" })}}`,
+                  title: `{{t("Node result", { ns: "workflow" })}}`,
                   children: nodeBlockInitializers,
                 },
               ]
@@ -187,9 +173,78 @@ export const addBlockButton: SchemaInitializer = new SchemaInitializer({
   ],
 });
 
+export const addBlockButton = new CompatibleSchemaInitializer(
+  {
+    name: 'workflowManual:popup:configureUserInterface:addBlock',
+    wrap: gridRowColWrap,
+    title: '{{t("Add block")}}',
+    items: [
+      {
+        type: 'itemGroup',
+        name: 'dataBlocks',
+        title: '{{t("Data blocks")}}',
+        hideIfNoChildren: true,
+        useChildren() {
+          const workflowPlugin = usePlugin(WorkflowPlugin);
+          const current = useNodeContext();
+          const nodes = useAvailableUpstreams(current);
+          const triggerInitializers = [useTriggerInitializers()].filter(Boolean);
+          const nodeBlockInitializers = nodes
+            .map((node) => {
+              const instruction = workflowPlugin.instructions.get(node.type);
+              return instruction?.useInitializers?.(node);
+            })
+            .filter(Boolean);
+          const dataBlockInitializers: any = [
+            ...triggerInitializers,
+            ...(nodeBlockInitializers.length
+              ? [
+                  {
+                    name: 'nodes',
+                    type: 'subMenu',
+                    title: `{{t("Node result", { ns: "${NAMESPACE}" })}}`,
+                    children: nodeBlockInitializers,
+                  },
+                ]
+              : []),
+          ].filter(Boolean);
+          return dataBlockInitializers;
+        },
+      },
+      {
+        type: 'itemGroup',
+        name: 'form',
+        title: '{{t("Form")}}',
+        useChildren() {
+          const dm = useDataSourceManager();
+          const allCollections = dm.getAllCollections();
+          return Array.from(manualFormTypes.getValues()).map((item: ManualFormType) => {
+            const { useInitializer: getInitializer } = item.config;
+            return getInitializer({ allCollections });
+          });
+        },
+      },
+      {
+        type: 'itemGroup',
+        name: 'otherBlocks',
+        title: '{{t("Other blocks")}}',
+        children: [
+          {
+            name: 'markdown',
+            title: '{{t("Markdown")}}',
+            Component: 'MarkdownBlockInitializer',
+          },
+        ],
+      },
+    ],
+  },
+  addBlockButton_deprecated,
+);
+
 function AssignedFieldValues() {
   const ctx = useContext(SchemaComponentContext);
-  const { t } = useTranslation();
+  const { t: coreT } = useTranslation();
+  const { t } = usePluginTranslation();
   const fieldSchema = useFieldSchema();
   const scope = useWorkflowVariableOptions();
   const [open, setOpen] = useState(false);
@@ -197,7 +252,7 @@ function AssignedFieldValues() {
     fieldSchema?.['x-action-settings']?.assignedValues?.schema ?? {
       type: 'void',
       'x-component': 'Grid',
-      'x-initializer': 'CustomFormItemInitializers',
+      'x-initializer': 'assignFieldValuesForm:configureFields',
       properties: {},
     },
   );
@@ -221,7 +276,7 @@ function AssignedFieldValues() {
   }, [fieldSchema]);
   const upLevelActiveFields = useFormActiveFields();
 
-  const title = t('Assign field values');
+  const title = coreT('Assign field values');
 
   function onCancel() {
     setOpen(false);
@@ -267,9 +322,7 @@ function AssignedFieldValues() {
               <FormProvider form={form}>
                 <FormLayout layout={'vertical'}>
                   <Alert
-                    message={useLang(
-                      'Values preset in this form will override user submitted ones when continue or reject.',
-                    )}
+                    message={t('Values preset in this form will override user submitted ones when continue or reject.')}
                   />
                   <br />
                   {open && schema && (
@@ -365,7 +418,11 @@ function ActionInitializer() {
   );
 }
 
-export const addActionButton: SchemaInitializer = new SchemaInitializer({
+/**
+ * @deprecated
+ * use `addActionButton` instead
+ */
+export const addActionButton_deprecated = new CompatibleSchemaInitializer({
   name: 'AddActionButton',
   title: '{{t("Configure actions")}}',
   items: [
@@ -396,6 +453,40 @@ export const addActionButton: SchemaInitializer = new SchemaInitializer({
   ],
 });
 
+export const addActionButton = new CompatibleSchemaInitializer(
+  {
+    name: 'workflowManual:form:configureActions',
+    title: '{{t("Configure actions")}}',
+    items: [
+      {
+        name: 'jobStatusResolved',
+        title: `{{t("Continue the process", { ns: "${NAMESPACE}" })}}`,
+        Component: ContinueInitializer,
+        action: JOB_STATUS.RESOLVED,
+        actionProps: {
+          type: 'primary',
+        },
+      },
+      {
+        name: 'jobStatusRejected',
+        title: `{{t("Terminate the process", { ns: "${NAMESPACE}" })}}`,
+        Component: ActionInitializer,
+        action: JOB_STATUS.REJECTED,
+        actionProps: {
+          danger: true,
+        },
+      },
+      {
+        name: 'jobStatusPending',
+        title: `{{t("Save temporarily", { ns: "${NAMESPACE}" })}}`,
+        Component: ActionInitializer,
+        action: JOB_STATUS.PENDING,
+      },
+    ],
+  },
+  addActionButton_deprecated,
+);
+
 // NOTE: fake useAction for ui configuration
 function useSubmit() {
   // const { values, submit, id: formId } = useForm();
@@ -440,9 +531,9 @@ export function SchemaConfig({ value, onChange }) {
                 type: 'void',
                 'x-component': 'Tabs',
                 'x-component-props': {},
-                'x-initializer': 'TabPaneInitializers',
+                'x-initializer': 'popup:addTab',
                 'x-initializer-props': {
-                  gridInitializer: 'AddBlockButton',
+                  gridInitializer: 'workflowManual:popup:configureUserInterface:addBlock',
                 },
                 properties: value ?? {
                   tab1: {
@@ -454,7 +545,7 @@ export function SchemaConfig({ value, onChange }) {
                       grid: {
                         type: 'void',
                         'x-component': 'Grid',
-                        'x-initializer': 'AddBlockButton',
+                        'x-initializer': 'workflowManual:popup:configureUserInterface:addBlock',
                         properties: {},
                       },
                     },
@@ -521,15 +612,46 @@ export function SchemaConfig({ value, onChange }) {
   );
 }
 
+function validateForms(forms: Record<string, any> = {}) {
+  for (const form of Object.values(forms)) {
+    const formType = manualFormTypes.get(form.type);
+    if (typeof formType.validate === 'function') {
+      const msg = formType.validate(form);
+      if (msg) {
+        return msg;
+      }
+    }
+  }
+}
+
 export function SchemaConfigButton(props) {
   const { workflow } = useFlowContext();
   const [visible, setVisible] = useState(false);
+  const { values } = useForm();
+  const { t } = usePluginTranslation();
+  const onSetVisible = useCallback(
+    (v) => {
+      if (!v) {
+        const msg = validateForms(values.forms);
+        if (msg) {
+          message.error({
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            title: t('Validation failed'),
+            content: t(msg),
+          });
+          return;
+        }
+      }
+      setVisible(v);
+    },
+    [values.forms],
+  );
   return (
     <>
       <Button type="primary" onClick={() => setVisible(true)} disabled={false}>
-        {useLang(workflow.executed ? 'View user interface' : 'Configure user interface')}
+        {t(workflow.executed ? 'View user interface' : 'Configure user interface')}
       </Button>
-      <ActionContextProvider value={{ visible, setVisible, formValueChanged: false }}>
+      <ActionContextProvider value={{ visible, setVisible: onSetVisible, formValueChanged: false }}>
         {props.children}
       </ActionContextProvider>
     </>

package/src/client/instruction/createManualFormBlockUISchema.ts

@@ -0,0 +1,5 @@
+import { createFormBlockSchema } from '@nocobase/client';
+
+export function createManualFormBlockUISchema(options) {
+  return createFormBlockSchema(options);
+}

package/src/client/instruction/forms/create.tsx

@@ -65,7 +65,7 @@ export default {
         [allCollections],
       );
       const [openMenuKeys, setOpenMenuKeys] = useState([]);
-      const searchedChildren = useMenuSearch(childItems, openMenuKeys);
+      const searchedChildren = useMenuSearch({ data: childItems, openKeys: openMenuKeys });
 
       return {
         name: 'createRecordForm',

package/src/client/instruction/forms/custom.tsx

@@ -3,15 +3,15 @@ import React, { useContext, useMemo, useState } from 'react';
 import { ArrayTable } from '@formily/antd-v5';
 import { Field, createForm } from '@formily/core';
 import { useField, useFieldSchema, useForm } from '@formily/react';
-import lodash from 'lodash';
+import { cloneDeep, pick, set } from 'lodash';
 
 import {
   ActionContextProvider,
   CollectionProvider_deprecated,
+  CompatibleSchemaInitializer,
   FormBlockContext,
   RecordProvider,
   SchemaComponent,
-  SchemaInitializer,
   SchemaInitializerItem,
   SchemaInitializerItemType,
   SchemaInitializerItems,
@@ -95,15 +95,12 @@ function CustomFormBlockInitializer() {
             [uid()]: {
               type: 'void',
               'x-component': 'FormV2',
-              'x-component-props': {
-                // disabled / read-pretty / initialValues
-                useProps: '{{ useFormBlockProps }}',
-              },
+              'x-use-component-props': 'useFormBlockProps',
               properties: {
                 grid: {
                   type: 'void',
                   'x-component': 'Grid',
-                  'x-initializer': 'AddCustomFormField',
+                  'x-initializer': 'workflowManual:customForm:configureFields',
                 },
                 actions: {
                   type: 'void',
@@ -116,7 +113,7 @@ function CustomFormBlockInitializer() {
                       flexWrap: 'wrap',
                     },
                   },
-                  'x-initializer': 'AddActionButton',
+                  'x-initializer': 'workflowManual:form:configureActions',
                   properties: {
                     resolve: {
                       type: 'void',
@@ -161,7 +158,7 @@ function getOptions(interfaces) {
     const schema = interfaces[type];
     const { group = 'others' } = schema;
     fields[group] = fields[group] || {};
-    lodash.set(fields, [group, type], schema);
+    set(fields, [group, type], schema);
   });
 
   return Object.keys(GroupLabels)
@@ -208,33 +205,51 @@ const CustomItemsComponent = (props) => {
   const items = useCommonInterfaceInitializers();
   const collection = useCollection_deprecated();
   const { setCollectionFields } = useContext(FormBlockContext);
+  const form = useMemo(() => createForm(), [interfaceOptions]);
 
   return (
     <AddCustomFormFieldButtonContext.Provider
       value={{
         onAddField(item) {
+          const fieldInterface: Record<string, any> = pick(item, [
+            'name',
+            'group',
+            'title',
+            'default',
+            'validateSchema',
+          ]);
           const {
-            properties: { unique, type, ...properties },
-            ...options
-          } = lodash.cloneDeep(item);
-          delete properties.name['x-disabled'];
-          setInterface({
-            ...options,
-            properties,
-          });
+            properties: { unique, type, layout, autoIncrement, ...properties },
+          } = item;
+          fieldInterface.properties = properties;
+          const result = cloneDeep(fieldInterface);
+          delete result.properties.name['x-disabled'];
+          setInterface(result);
         },
         setCallback,
       }}
     >
       <SchemaInitializerItems {...props} items={items} />
-      <ActionContextProvider value={{ visible: Boolean(interfaceOptions) }}>
+      <ActionContextProvider
+        value={{
+          visible: Boolean(interfaceOptions),
+          setVisible(v) {
+            if (!v) {
+              setInterface(null);
+            }
+          },
+        }}
+      >
         {interfaceOptions ? (
           <SchemaComponent
             schema={{
               type: 'void',
               name: 'drawer',
               title: '{{t("Configure field")}}',
-              'x-decorator': 'Form',
+              'x-decorator': 'FormV2',
+              'x-decorator-props': {
+                form,
+              },
               'x-component': 'Action.Drawer',
               properties: {
                 ...interfaceOptions.properties,
@@ -266,7 +281,7 @@ const CustomItemsComponent = (props) => {
                       'x-component-props': {
                         type: 'primary',
                         useAction() {
-                          const { values, query } = useForm();
+                          const { values, query, reset } = useForm();
                           const messages = [useLang('Field name existed in form')];
                           return {
                             async run() {
@@ -301,6 +316,7 @@ const CustomItemsComponent = (props) => {
                                 'x-toolbar': 'FormItemSchemaToolbar',
                                 'x-settings': 'fieldSettings:FormItem',
                               });
+                              reset();
                               setCallback(null);
                               setInterface(null);
                             },
@@ -322,7 +338,11 @@ const CustomItemsComponent = (props) => {
   );
 };
 
-export const addCustomFormField: SchemaInitializer = new SchemaInitializer({
+/**
+ * @deprecated
+ * use `addCustomFormField` instead
+ */
+export const addCustomFormField_deprecated = new CompatibleSchemaInitializer({
   name: 'AddCustomFormField',
   wrap: gridRowColWrap,
   insertPosition: 'beforeEnd',
@@ -330,6 +350,17 @@ export const addCustomFormField: SchemaInitializer = new SchemaInitializer({
   ItemsComponent: CustomItemsComponent,
 });
 
+export const addCustomFormField = new CompatibleSchemaInitializer(
+  {
+    name: 'workflowManual:customForm:configureFields',
+    wrap: gridRowColWrap,
+    insertPosition: 'beforeEnd',
+    title: "{{t('Configure fields')}}",
+    ItemsComponent: CustomItemsComponent,
+  },
+  addCustomFormField_deprecated,
+);
+
 function CustomFormFieldInitializer() {
   const itemConfig = useSchemaInitializerItem();
   const { insert, setVisible } = useSchemaInitializer();