Scheduler - Appointment Form - Fix resource items' names (#32848)

Tucchhaa · web-flow · commit a42a44e25fb9 · 2026-03-11T22:00:00.000+08:00
diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/Angular/app/app.component.html
@@ -54,8 +54,8 @@
             [colCountByScreen]="{ xs: 3 }"
           >
             <dxi-scheduler-item name="priorityIdIcon"></dxi-scheduler-item>
-            <dxi-scheduler-item name="priorityId"></dxi-scheduler-item>
-            <dxi-scheduler-item name="typeId"></dxi-scheduler-item>
+            <dxi-scheduler-item name="priorityIdEditor"></dxi-scheduler-item>
+            <dxi-scheduler-item name="typeIdEditor"></dxi-scheduler-item>
           </dxi-scheduler-item>
         </dxi-scheduler-item>
         <dxi-scheduler-item name="descriptionGroup"></dxi-scheduler-item>
diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/App.tsx b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/React/App.tsx
@@ -69,8 +69,8 @@ const App = () => (
           <Item name="resourcesGroup">
             <Item name="priorityIdGroup" colCount={3} colCountByScreen={{ xs: 3 }}>
               <Item name="priorityIdIcon" />
-              <Item name="priorityId" />
-              <Item name="typeId" />
+              <Item name="priorityIdEditor" />
+              <Item name="typeIdEditor" />
             </Item>
           </Item>
           <Item name="descriptionGroup" />
diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/ReactJs/App.js
@@ -70,8 +70,8 @@ const App = () => (
               colCountByScreen={{ xs: 3 }}
             >
               <Item name="priorityIdIcon" />
-              <Item name="priorityId" />
-              <Item name="typeId" />
+              <Item name="priorityIdEditor" />
+              <Item name="typeIdEditor" />
             </Item>
           </Item>
           <Item name="descriptionGroup" />
diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/Vue/App.vue b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/Vue/App.vue
@@ -54,8 +54,8 @@
               name="priorityIdGroup"
             >
               <DxItem name="priorityIdIcon"/>
-              <DxItem name="priorityId"/>
-              <DxItem name="typeId"/>
+              <DxItem name="priorityIdEditor"/>
+              <DxItem name="typeIdEditor"/>
             </DxItem>
           </DxItem>
           <DxItem name="descriptionGroup"/>
diff --git a/apps/demos/Demos/Scheduler/IndividualViewsCustomization/jQuery/index.js b/apps/demos/Demos/Scheduler/IndividualViewsCustomization/jQuery/index.js
@@ -64,7 +64,7 @@ $(() => {
                     colCountByScreen: {
                       xs: 3,
                     },
-                    items: ['priorityIdIcon', 'priorityId', 'typeId'],
+                    items: ['priorityIdIcon', 'priorityIdEditor', 'typeIdEditor'],
                   },
                 ],
               },
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Angular/app/app.component.html
@@ -38,7 +38,7 @@
         <dxi-scheduler-item name="assigneeIdGroup">
           <dxi-scheduler-item name="assigneeIdIcon"></dxi-scheduler-item>
           <dxi-scheduler-item
-            name="assigneeId"
+            name="assigneeIdEditor"
             [isRequired]="true"
             [editorOptions]="assigneeIdEditorOptions"
           ></dxi-scheduler-item>
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/React/App.tsx
@@ -240,7 +240,7 @@ const App = () => {
               <Item name="assigneeIdGroup">
                 <Item name="assigneeIdIcon" />
                 <Item
-                  name="assigneeId"
+                  name="assigneeIdEditor"
                   isRequired={true}
                   editorOptions={assigneeIdEditorOptions}
                 />
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/ReactJs/App.js
@@ -218,7 +218,7 @@ const App = () => {
               <Item name="assigneeIdGroup">
                 <Item name="assigneeIdIcon" />
                 <Item
-                  name="assigneeId"
+                  name="assigneeIdEditor"
                   isRequired={true}
                   editorOptions={assigneeIdEditorOptions}
                 />
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/Vue/App.vue
@@ -42,7 +42,7 @@
           <DxItem name="assigneeIdGroup">
             <DxItem name="assigneeIdIcon"/>
             <DxItem
-              name="assigneeId"
+              name="assigneeIdEditor"
               :is-required="true"
               :editor-options="assigneeIdEditorOptions"
             />
diff --git a/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/index.js b/apps/demos/Demos/Scheduler/ResolveTimeConflicts/jQuery/index.js
@@ -63,7 +63,7 @@ $(() => {
                 items: [
                   'assigneeIdIcon',
                   {
-                    name: 'assigneeId',
+                    name: 'assigneeIdEditor',
                     isRequired: true,
                     editorOptions: {
                       onValueChanged: (e) => {
diff --git a/apps/demos/Demos/Scheduler/Resources/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/Resources/Angular/app/app.component.html
@@ -47,8 +47,8 @@
             [colCountByScreen]="{ xs: 3 }"
           >
             <dxi-scheduler-item name="roomIdIcon"></dxi-scheduler-item>
-            <dxi-scheduler-item name="roomId"></dxi-scheduler-item>
-            <dxi-scheduler-item name="priorityId"></dxi-scheduler-item>
+            <dxi-scheduler-item name="roomIdEditor"></dxi-scheduler-item>
+            <dxi-scheduler-item name="priorityIdEditor"></dxi-scheduler-item>
           </dxi-scheduler-item>
           <dxi-scheduler-item name="assigneeIdGroup"></dxi-scheduler-item>
         </dxi-scheduler-item>
diff --git a/apps/demos/Demos/Scheduler/Resources/React/App.tsx b/apps/demos/Demos/Scheduler/Resources/React/App.tsx
@@ -69,8 +69,8 @@ const App = () => {
               <Item name="resourcesGroup">
                 <Item name="roomIdGroup" colCount={3} colCountByScreen={{ xs: 3 }}>
                   <Item name="roomIdIcon" />
-                  <Item name="roomId" />
-                  <Item name="priorityId" />
+                  <Item name="roomIdEditor" />
+                  <Item name="priorityIdEditor" />
                 </Item>
                 <Item name="assigneeIdGroup" />
               </Item>
diff --git a/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js b/apps/demos/Demos/Scheduler/Resources/ReactJs/App.js
@@ -65,8 +65,8 @@ const App = () => {
                   colCountByScreen={{ xs: 3 }}
                 >
                   <Item name="roomIdIcon" />
-                  <Item name="roomId" />
-                  <Item name="priorityId" />
+                  <Item name="roomIdEditor" />
+                  <Item name="priorityIdEditor" />
                 </Item>
                 <Item name="assigneeIdGroup" />
               </Item>
diff --git a/apps/demos/Demos/Scheduler/Resources/Vue/App.vue b/apps/demos/Demos/Scheduler/Resources/Vue/App.vue
@@ -46,8 +46,8 @@
                 name="roomIdGroup"
               >
                 <DxItem name="roomIdIcon"/>
-                <DxItem name="roomId"/>
-                <DxItem name="priorityId"/>
+                <DxItem name="roomIdEditor"/>
+                <DxItem name="priorityIdEditor"/>
               </DxItem>
               <DxItem name="assigneeIdGroup"/>
             </DxItem>
diff --git a/apps/demos/Demos/Scheduler/Resources/jQuery/index.js b/apps/demos/Demos/Scheduler/Resources/jQuery/index.js
@@ -45,8 +45,8 @@ $(() => {
                     },
                     items: [
                       'roomIdIcon',
-                      'roomId',
-                      'priorityId',
+                      'roomIdEditor',
+                      'priorityIdEditor',
                     ],
                   },
                   'assigneeIdGroup',
diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/appointment_popup.test.ts
@@ -1076,44 +1076,33 @@ describe('Appointment Form', () => {
     it('should create resourceEditorsGroup when resources have no custom icons', async () => {
       const { scheduler, POM } = await createScheduler({
         ...getDefaultConfig(),
-        dataSource: [{
-          text: 'Resource test app',
-          startDate: new Date(2017, 4, 9, 9, 30),
-          endDate: new Date(2017, 4, 9, 11),
-          roomId: 1,
-          ownerId: 2,
-        }],
-        resources: [{
-          fieldExpr: 'roomId',
-          dataSource: [{ text: 'Room 1', id: 1 }, { text: 'Room 2', id: 2 }],
-        }, {
-          fieldExpr: 'ownerId',
-          dataSource: [{ text: 'Owner 1', id: 1 }, { text: 'Owner 2', id: 2 }],
-        }],
+        resources: [
+          { fieldExpr: 'roomId' },
+          { fieldExpr: 'ownerId' },
+        ],
       });
-      const dataSource = (scheduler as any).getDataSource();
-      const appointment = dataSource.items()[0];
 
-      scheduler.showAppointmentPopup(appointment);
+      scheduler.showAppointmentPopup();
 
-      const formItems = POM.popup.dxForm.option('items') as FormItem[];
-      const mainGroup = formItems.find((item) => item.name === 'mainGroup') as GroupItem;
-      const resourcesGroup = mainGroup?.items?.find((item) => item.name === 'resourcesGroup') as GroupItem;
+      const resourcesGroup = POM.popup.dxForm.itemOption('mainGroup.resourcesGroup') as GroupItem;
 
       expect(resourcesGroup).toBeDefined();
       expect(resourcesGroup?.items?.length).toBe(2);
 
       expect(resourcesGroup?.items).toEqual(
         expect.arrayContaining([
           expect.objectContaining({
-            name: 'resourcesGroupContent',
+            name: 'resourcesGroupIcon',
+          }),
+          expect.objectContaining({
+            name: 'resourceEditorsGroup',
             itemType: 'group',
             items: expect.arrayContaining([
               expect.objectContaining({
-                name: 'roomId',
+                name: 'roomIdEditor',
               }),
               expect.objectContaining({
-                name: 'ownerId',
+                name: 'ownerIdEditor',
               }),
             ]),
           }),
@@ -1124,34 +1113,15 @@ describe('Appointment Form', () => {
     it('should create individual resource groups when resources have custom icons', async () => {
       const { scheduler, POM } = await createScheduler({
         ...getDefaultConfig(),
-        dataSource: [{
-          text: 'Resource test app',
-          startDate: new Date(2017, 4, 9, 9, 30),
-          endDate: new Date(2017, 4, 9, 11),
-          roomId: 1,
-          ownerId: 2,
-        }],
         resources: [
-          {
-            fieldExpr: 'roomId',
-            icon: 'home',
-            dataSource: [{ text: 'Room 1', id: 1 }, { text: 'Room 2', id: 2 }],
-          },
-          {
-            fieldExpr: 'ownerId',
-            icon: 'user',
-            dataSource: [{ text: 'Owner 1', id: 1 }, { text: 'Owner 2', id: 2 }],
-          },
+          { fieldExpr: 'roomId', icon: 'home' },
+          { fieldExpr: 'ownerId', icon: 'user' },
         ],
       });
-      const dataSource = (scheduler as any).getDataSource();
-      const appointment = dataSource.items()[0];
 
-      scheduler.showAppointmentPopup(appointment);
+      scheduler.showAppointmentPopup();
 
-      const formItems = POM.popup.dxForm.option('items') as FormItem[];
-      const mainGroup = formItems.find((item) => item.name === 'mainGroup') as GroupItem;
-      const resourcesGroup = mainGroup?.items?.find((item) => item.name === 'resourcesGroup') as GroupItem;
+      const resourcesGroup = POM.popup.dxForm.itemOption('mainGroup.resourcesGroup') as GroupItem;
 
       expect(resourcesGroup).toBeDefined();
       expect(resourcesGroup?.items?.length).toBe(2);
@@ -1163,10 +1133,10 @@ describe('Appointment Form', () => {
             itemType: 'group',
             items: expect.arrayContaining([
               expect.objectContaining({
-                name: 'roomId',
+                name: 'roomIdIcon',
               }),
               expect.objectContaining({
-                name: 'roomIdIcon',
+                name: 'roomIdEditor',
               }),
             ]),
           }),
@@ -1175,10 +1145,10 @@ describe('Appointment Form', () => {
             itemType: 'group',
             items: expect.arrayContaining([
               expect.objectContaining({
-                name: 'ownerId',
+                name: 'ownerIdIcon',
               }),
               expect.objectContaining({
-                name: 'ownerIdIcon',
+                name: 'ownerIdEditor',
               }),
             ]),
           }),
diff --git a/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts b/packages/devextreme/js/__internal/scheduler/appointment_popup/m_form.ts
@@ -114,6 +114,7 @@ const DATE_OPTIONS_GROUP_NAME = 'dateOptionsGroup';
 const START_DATE_GROUP_NAME = 'startDateGroup';
 const END_DATE_GROUP_NAME = 'endDateGroup';
 const RESOURCES_GROUP_NAME = 'resourcesGroup';
+const RESOURCE_EDITORS_GROUP_NAME = 'resourceEditorsGroup';
 const SUBJECT_GROUP_NAME = 'subjectGroup';
 const REPEAT_GROUP_NAME = 'repeatGroup';
 const DESCRIPTION_GROUP_NAME = 'descriptionGroup';
@@ -134,6 +135,7 @@ const END_DATE_TIMEZONE_EDITOR_NAME = 'endDateTimeZoneEditor';
 const SUBJECT_ICON_NAME = 'subjectIcon';
 const DATE_ICON_NAME = 'dateIcon';
 const REPEAT_ICON_NAME = 'repeatIcon';
+const RESOURCES_GROUP_ICON_NAME = 'resourcesGroupIcon';
 const DESCRIPTION_ICON_NAME = 'descriptionIcon';
 
 export class AppointmentForm {
@@ -749,12 +751,13 @@ export class AppointmentForm {
     let resourcesItems: FormItem[] = resourcesLoaders.map((resourceLoader) => {
       const { dataSource, dataAccessor } = resourceLoader;
       const dataField = resourceLoader.resourceIndex;
+      const name = `${dataField}Editor`;
       const label = resourceLoader.resourceName ?? dataField;
       const editorType = resourceLoader.allowMultiple ? 'dxTagBox' : 'dxSelectBox';
 
       return {
         itemType: 'simple',
-        name: dataField,
+        name,
         dataField,
         label: { text: label },
         colSpan: 1,
@@ -781,13 +784,13 @@ export class AppointmentForm {
         cssClass: `${CLASSES.resourcesGroup} ${CLASSES.groupWithIcon}`,
         items: [
           {
-            name: `${RESOURCES_GROUP_NAME}Icon`,
+            name: RESOURCES_GROUP_ICON_NAME,
             colSpan: 1,
             cssClass: `${CLASSES.formIcon} ${CLASSES.defaultResourceIcon}`,
             template: createFormIconTemplate('addcircleoutline'),
           },
           {
-            name: `${RESOURCES_GROUP_NAME}Content`,
+            name: RESOURCE_EDITORS_GROUP_NAME,
             itemType: 'group',
             colSpan: 1,
             items: resourcesItems,

Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ $(() => {`
`63`	`63`	`items: [`
`64`	`64`	`'assigneeIdIcon',`
`65`	`65`	`{`
`66`		`- name: 'assigneeId',`
	`66`	`+ name: 'assigneeIdEditor',`
`67`	`67`	`isRequired: true,`
`68`	`68`	`editorOptions: {`
`69`	`69`	`onValueChanged: (e) => {`