From 01ad6ffa60f6d0a5ad101c80da1f866497877db4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96zt=C3=BCrk?= <sedat.ozturk@sozsoft.com>
Date: Sun, 8 Feb 2026 09:52:48 +0300
Subject: [PATCH] FormTabEdit

---
 .../Seeds/LanguagesData.json                  |   6 +
 .../views/admin/listForm/edit/FormTabEdit.tsx | 665 +++++++++---------
 ui/src/views/list/useListFormColumns.ts       |  28 +-
 ui/src/views/list/useToolbar.tsx              |  28 +-
 4 files changed, 376 insertions(+), 351 deletions(-)

diff --git a/api/src/Erp.Platform.DbMigrator/Seeds/LanguagesData.json b/api/src/Erp.Platform.DbMigrator/Seeds/LanguagesData.json
index 0108783e..4590e79d 100644
--- a/api/src/Erp.Platform.DbMigrator/Seeds/LanguagesData.json
+++ b/api/src/Erp.Platform.DbMigrator/Seeds/LanguagesData.json
@@ -3198,6 +3198,12 @@
             "en": "Save Grid State",
             "tr": "Tablo Yapısını Kaydet"
         },
+        {
+            "resourceName": "Platform",
+            "key": "ListForms.ListForm.GridStateSaved",
+            "en": "Grid State Saved",
+            "tr": "Tablo Yapısı Kaydedildi"
+        },
         {
             "resourceName": "Platform",
             "key": "ListForms.ListForm.ResetGridState",
diff --git a/ui/src/views/admin/listForm/edit/FormTabEdit.tsx b/ui/src/views/admin/listForm/edit/FormTabEdit.tsx
index 66e9f097..78715fea 100644
--- a/ui/src/views/admin/listForm/edit/FormTabEdit.tsx
+++ b/ui/src/views/admin/listForm/edit/FormTabEdit.tsx
@@ -41,362 +41,381 @@ function FormTabEdit(props: FormEditProps & { listFormCode: string }) {
         {({ touched, errors, values, isSubmitting }) => (
           <Form>
             <FormContainer size="sm">
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
-                invalid={
-                  errors.editingOptionDto?.allowAdding && touched.editingOptionDto?.allowAdding
-                }
-                errorMessage={errors.editingOptionDto?.allowAdding}
-              >
-                <Field
-                  name="editingOptionDto.allowAdding"
-                  placeholder={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.EditingAllowEditing')}
-                invalid={
-                  errors.editingOptionDto?.allowEditing && touched.editingOptionDto?.allowEditing
-                }
-                errorMessage={errors.editingOptionDto?.allowEditing}
-              >
-                <Field
-                  name="editingOptionDto.allowEditing"
-                  placeholder={translate('::ListForms.ListFormEdit.EditingAllowEditing')}
-                  component={Checkbox}
-                />
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.EditingAllowDetail')}
-                invalid={
-                  errors.editingOptionDto?.allowDetail && touched.editingOptionDto?.allowDetail
-                }
-                errorMessage={errors.editingOptionDto?.allowDetail}
-              >
-                <Field
-                  name="editingOptionDto.allowDetail"
-                  placeholder={translate('::ListForms.ListFormEdit.EditingAllowDetail')}
-                  component={Checkbox}
-                />
-              </FormItem>
-
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
-                invalid={
-                  errors.editingOptionDto?.allowDeleting && touched.editingOptionDto?.allowDeleting
-                }
-                errorMessage={errors.editingOptionDto?.allowDeleting}
-              >
-                <Field
-                  name="editingOptionDto.allowDeleting"
-                  placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
-                invalid={
-                  errors.editingOptionDto?.allowAllDeleting &&
-                  touched.editingOptionDto?.allowAllDeleting
-                }
-                errorMessage={errors.editingOptionDto?.allowAllDeleting}
-              >
-                <Field
-                  name="editingOptionDto.allowAllDeleting"
-                  placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
-                invalid={
-                  errors.editingOptionDto?.confirmDelete && touched.editingOptionDto?.confirmDelete
-                }
-                errorMessage={errors.editingOptionDto?.confirmDelete}
-              >
-                <Field
-                  name="editingOptionDto.confirmDelete"
-                  placeholder={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.EditingUseIcons')}
-                invalid={errors.editingOptionDto?.useIcons && touched.editingOptionDto?.useIcons}
-                errorMessage={errors.editingOptionDto?.useIcons}
-              >
-                <Field
-                  name="editingOptionDto.useIcons"
-                  placeholder={translate('::ListForms.ListFormEdit.EditingUseIcons')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
-                invalid={
-                  errors.editingOptionDto?.selectTextOnEditStart &&
-                  touched.editingOptionDto?.selectTextOnEditStart
-                }
-                errorMessage={errors.editingOptionDto?.selectTextOnEditStart}
-              >
-                <Field
-                  name="editingOptionDto.selectTextOnEditStart"
-                  placeholder={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
-                  component={Checkbox}
-                />
-              </FormItem>
-              <FormItem
-                label={translate('::SidePanel.Mode')}
-                invalid={errors.editingOptionDto?.mode && touched.editingOptionDto?.mode}
-                errorMessage={errors.editingOptionDto?.mode}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="editingOptionDto.mode"
-                  placeholder={translate('::SidePanel.Mode')}
-                >
-                  {({ field, form }: FieldProps<GridsEditMode>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={editingOptionModeOptions}
-                      value={editingOptionModeOptions?.filter(
-                        (option) => option.value === values.editingOptionDto.mode,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
-                invalid={
-                  errors.editingOptionDto?.refreshMode && touched.editingOptionDto?.refreshMode
-                }
-                errorMessage={errors.editingOptionDto?.refreshMode}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="editingOptionDto.refreshMode"
-                  placeholder={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
-                >
-                  {({ field, form }: FieldProps<GridsEditRefreshMode>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={editingOptionRefreshModeOptions}
-                      value={editingOptionRefreshModeOptions?.filter(
-                        (option) => option.value === values.editingOptionDto.refreshMode,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
-                invalid={
-                  errors.editingOptionDto?.newRowPosition &&
-                  touched.editingOptionDto?.newRowPosition
-                }
-                errorMessage={errors.editingOptionDto?.newRowPosition}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="editingOptionDto.newRowPosition"
-                  placeholder={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
-                >
-                  {({ field, form }: FieldProps<NewRowPosition>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={editingOptionNewRowPositionOptions}
-                      value={editingOptionNewRowPositionOptions?.filter(
-                        (option) => option.value === values.editingOptionDto.newRowPosition,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
-                invalid={
-                  errors.editingOptionDto?.startEditAction &&
-                  touched.editingOptionDto?.startEditAction
-                }
-                errorMessage={errors.editingOptionDto?.startEditAction}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="editingOptionDto.startEditAction"
-                  placeholder={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
-                >
-                  {({ field, form }: FieldProps<StartEditAction>) => (
-                    <Select
-                      field={field}
-                      form={form}
-                      isClearable={true}
-                      options={editingOptionStartEditActionOptions}
-                      value={editingOptionStartEditActionOptions?.filter(
-                        (option) => option.value === values.editingOptionDto.startEditAction,
-                      )}
-                      onChange={(option) => form.setFieldValue(field.name, option?.value)}
-                    />
-                  )}
-                </Field>
-              </FormItem>
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
-                invalid={
-                  errors.editingOptionDto?.editColumnName &&
-                  touched.editingOptionDto?.editColumnName
-                }
-                errorMessage={errors.editingOptionDto?.editColumnName}
-              >
-                <Field
-                  type="text"
-                  autoComplete="off"
-                  name="editingOptionDto.editColumnName"
-                  placeholder={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
-                  component={Input}
-                />
-              </FormItem>
-              {values.editingOptionDto.mode === 'popup' && (
-                <>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+                <Card className="my-2" header="General">
                   <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingShowTitle')}
+                    label={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
                     invalid={
-                      errors.editingOptionDto?.popup?.showTitle &&
-                      touched.editingOptionDto?.popup?.showTitle
+                      errors.editingOptionDto?.allowAdding && touched.editingOptionDto?.allowAdding
                     }
-                    errorMessage={errors.editingOptionDto?.popup?.showTitle}
+                    errorMessage={errors.editingOptionDto?.allowAdding}
                   >
                     <Field
-                      name="editingOptionDto.popup.showTitle"
-                      placeholder={translate('::ListForms.ListFormEdit.EditingShowTitle')}
+                      name="editingOptionDto.allowAdding"
+                      placeholder={translate('::ListForms.ListFormEdit.EditingAllowAdding')}
                       component={Checkbox}
                     />
                   </FormItem>
                   <FormItem
-                    label={translate('::ListForms.ListFormEdit.DetailsTitle')}
+                    label={translate('::ListForms.ListFormEdit.EditingAllowEditing')}
                     invalid={
-                      errors.editingOptionDto?.popup?.title &&
-                      touched.editingOptionDto?.popup?.title
+                      errors.editingOptionDto?.allowEditing &&
+                      touched.editingOptionDto?.allowEditing
                     }
-                    errorMessage={errors.editingOptionDto?.popup?.title}
+                    errorMessage={errors.editingOptionDto?.allowEditing}
+                  >
+                    <Field
+                      name="editingOptionDto.allowEditing"
+                      placeholder={translate('::ListForms.ListFormEdit.EditingAllowEditing')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate')}
+                    invalid={
+                      errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate &&
+                      touched.editingOptionDto?.sendOnlyChangedFormValuesUpdate
+                    }
+                    errorMessage={errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate}
+                  >
+                    <Field
+                      name="editingOptionDto.sendOnlyChangedFormValuesUpdate"
+                      placeholder={translate(
+                        '::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate',
+                      )}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.EditingAllowDetail')}
+                    invalid={
+                      errors.editingOptionDto?.allowDetail && touched.editingOptionDto?.allowDetail
+                    }
+                    errorMessage={errors.editingOptionDto?.allowDetail}
+                  >
+                    <Field
+                      name="editingOptionDto.allowDetail"
+                      placeholder={translate('::ListForms.ListFormEdit.EditingAllowDetail')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
+                    invalid={
+                      errors.editingOptionDto?.allowDeleting &&
+                      touched.editingOptionDto?.allowDeleting
+                    }
+                    errorMessage={errors.editingOptionDto?.allowDeleting}
+                  >
+                    <Field
+                      name="editingOptionDto.allowDeleting"
+                      placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleting')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
+                    invalid={
+                      errors.editingOptionDto?.allowAllDeleting &&
+                      touched.editingOptionDto?.allowAllDeleting
+                    }
+                    errorMessage={errors.editingOptionDto?.allowAllDeleting}
+                  >
+                    <Field
+                      name="editingOptionDto.allowAllDeleting"
+                      placeholder={translate('::ListForms.ListFormEdit.EditingAllowDeleteAll')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
+                    invalid={
+                      errors.editingOptionDto?.confirmDelete &&
+                      touched.editingOptionDto?.confirmDelete
+                    }
+                    errorMessage={errors.editingOptionDto?.confirmDelete}
+                  >
+                    <Field
+                      name="editingOptionDto.confirmDelete"
+                      placeholder={translate('::ListForms.ListFormEdit.EditingConfirmDelete')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.EditingUseIcons')}
+                    invalid={
+                      errors.editingOptionDto?.useIcons && touched.editingOptionDto?.useIcons
+                    }
+                    errorMessage={errors.editingOptionDto?.useIcons}
+                  >
+                    <Field
+                      name="editingOptionDto.useIcons"
+                      placeholder={translate('::ListForms.ListFormEdit.EditingUseIcons')}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.EditingSelectTextOnEditStart')}
+                    invalid={
+                      errors.editingOptionDto?.selectTextOnEditStart &&
+                      touched.editingOptionDto?.selectTextOnEditStart
+                    }
+                    errorMessage={errors.editingOptionDto?.selectTextOnEditStart}
+                  >
+                    <Field
+                      name="editingOptionDto.selectTextOnEditStart"
+                      placeholder={translate(
+                        '::ListForms.ListFormEdit.EditingSelectTextOnEditStart',
+                      )}
+                      component={Checkbox}
+                    />
+                  </FormItem>
+
+                  <FormItem
+                    label={translate('::SidePanel.Mode')}
+                    invalid={errors.editingOptionDto?.mode && touched.editingOptionDto?.mode}
+                    errorMessage={errors.editingOptionDto?.mode}
                   >
                     <Field
                       type="text"
                       autoComplete="off"
-                      name="editingOptionDto.popup.title"
-                      placeholder={translate('::ListForms.ListFormEdit.DetailsTitle')}
-                      component={Input}
-                    />
+                      name="editingOptionDto.mode"
+                      placeholder={translate('::SidePanel.Mode')}
+                    >
+                      {({ field, form }: FieldProps<GridsEditMode>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          isClearable={true}
+                          options={editingOptionModeOptions}
+                          value={editingOptionModeOptions?.filter(
+                            (option) => option.value === values.editingOptionDto.mode,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
                   </FormItem>
+
                   <FormItem
-                    label={translate('::ListForms.ListFormEdit.DetailsWidth')}
+                    label={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
                     invalid={
-                      errors.editingOptionDto?.popup?.width &&
-                      touched.editingOptionDto?.popup?.width
+                      errors.editingOptionDto?.refreshMode && touched.editingOptionDto?.refreshMode
                     }
-                    errorMessage={errors.editingOptionDto?.popup?.width}
+                    errorMessage={errors.editingOptionDto?.refreshMode}
                   >
                     <Field
-                      className="w-20"
-                      type="number"
+                      type="text"
                       autoComplete="off"
-                      name="editingOptionDto.popup.width"
-                      placeholder={translate('::ListForms.ListFormEdit.DetailsWidth')}
-                      component={Input}
-                    />
+                      name="editingOptionDto.refreshMode"
+                      placeholder={translate('::ListForms.ListFormEdit.EditingRefreshMode')}
+                    >
+                      {({ field, form }: FieldProps<GridsEditRefreshMode>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          isClearable={true}
+                          options={editingOptionRefreshModeOptions}
+                          value={editingOptionRefreshModeOptions?.filter(
+                            (option) => option.value === values.editingOptionDto.refreshMode,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
                   </FormItem>
                   <FormItem
-                    label={translate('::ListForms.ListFormEdit.DetailsHeight')}
+                    label={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
                     invalid={
-                      errors.editingOptionDto?.popup?.height &&
-                      touched.editingOptionDto?.popup?.height
+                      errors.editingOptionDto?.newRowPosition &&
+                      touched.editingOptionDto?.newRowPosition
                     }
-                    errorMessage={errors.editingOptionDto?.popup?.height}
+                    errorMessage={errors.editingOptionDto?.newRowPosition}
                   >
                     <Field
-                      className="w-20"
-                      type="number"
+                      type="text"
                       autoComplete="off"
-                      name="editingOptionDto.popup.height"
-                      placeholder={translate('::ListForms.ListFormEdit.DetailsHeight')}
+                      name="editingOptionDto.newRowPosition"
+                      placeholder={translate('::ListForms.ListFormEdit.EditingNewRowPosition')}
+                    >
+                      {({ field, form }: FieldProps<NewRowPosition>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          isClearable={true}
+                          options={editingOptionNewRowPositionOptions}
+                          value={editingOptionNewRowPositionOptions?.filter(
+                            (option) => option.value === values.editingOptionDto.newRowPosition,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
+                    invalid={
+                      errors.editingOptionDto?.startEditAction &&
+                      touched.editingOptionDto?.startEditAction
+                    }
+                    errorMessage={errors.editingOptionDto?.startEditAction}
+                  >
+                    <Field
+                      type="text"
+                      autoComplete="off"
+                      name="editingOptionDto.startEditAction"
+                      placeholder={translate('::ListForms.ListFormEdit.EditingStartEditAction')}
+                    >
+                      {({ field, form }: FieldProps<StartEditAction>) => (
+                        <Select
+                          field={field}
+                          form={form}
+                          isClearable={true}
+                          options={editingOptionStartEditActionOptions}
+                          value={editingOptionStartEditActionOptions?.filter(
+                            (option) => option.value === values.editingOptionDto.startEditAction,
+                          )}
+                          onChange={(option) => form.setFieldValue(field.name, option?.value)}
+                        />
+                      )}
+                    </Field>
+                  </FormItem>
+                  <FormItem
+                    label={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
+                    invalid={
+                      errors.editingOptionDto?.editColumnName &&
+                      touched.editingOptionDto?.editColumnName
+                    }
+                    errorMessage={errors.editingOptionDto?.editColumnName}
+                  >
+                    <Field
+                      type="text"
+                      autoComplete="off"
+                      name="editingOptionDto.editColumnName"
+                      placeholder={translate('::ListForms.ListFormEdit.EditingEditColumnName')}
                       component={Input}
                     />
                   </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingFullScreen')}
-                    invalid={
-                      errors.editingOptionDto?.popup?.fullScreen &&
-                      touched.editingOptionDto?.popup?.fullScreen
-                    }
-                    errorMessage={errors.editingOptionDto?.popup?.fullScreen}
-                  >
-                    <Field
-                      name="editingOptionDto.popup.fullScreen"
-                      placeholder={translate('::ListForms.ListFormEdit.EditingFullScreen')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.ResizeEnabled')}
-                    invalid={
-                      errors.editingOptionDto?.popup?.resizeEnabled &&
-                      touched.editingOptionDto?.popup?.resizeEnabled
-                    }
-                    errorMessage={errors.editingOptionDto?.popup?.resizeEnabled}
-                  >
-                    <Field
-                      name="editingOptionDto.popup.resizeEnabled"
-                      placeholder={translate('::ListForms.ListFormEdit.ResizeEnabled')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                  <FormItem
-                    label={translate('::ListForms.ListFormEdit.EditingHideOnOutsideClick')}
-                    invalid={
-                      errors.editingOptionDto?.popup?.hideOnOutsideClick &&
-                      touched.editingOptionDto?.popup?.hideOnOutsideClick
-                    }
-                    errorMessage={errors.editingOptionDto?.popup?.hideOnOutsideClick}
-                  >
-                    <Field
-                      name="editingOptionDto.popup.hideOnOutsideClick"
-                      placeholder={translate('::ListForms.ListFormEdit.EditingHideOnOutsideClick')}
-                      component={Checkbox}
-                    />
-                  </FormItem>
-                </>
-              )}
-              <FormItem
-                label={translate('::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate')}
-                invalid={
-                  errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate &&
-                  touched.editingOptionDto?.sendOnlyChangedFormValuesUpdate
-                }
-                errorMessage={errors.editingOptionDto?.sendOnlyChangedFormValuesUpdate}
-              >
-                <Field
-                  name="editingOptionDto.sendOnlyChangedFormValuesUpdate"
-                  placeholder={translate(
-                    '::ListForms.ListFormEdit.SendOnlyChangedFormValuesUpdate',
+                </Card>
+                <Card className="my-2" header="Popup">
+                  {values.editingOptionDto.mode === 'popup' && (
+                    <>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingShowTitle')}
+                        invalid={
+                          errors.editingOptionDto?.popup?.showTitle &&
+                          touched.editingOptionDto?.popup?.showTitle
+                        }
+                        errorMessage={errors.editingOptionDto?.popup?.showTitle}
+                      >
+                        <Field
+                          name="editingOptionDto.popup.showTitle"
+                          placeholder={translate('::ListForms.ListFormEdit.EditingShowTitle')}
+                          component={Checkbox}
+                        />
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.DetailsTitle')}
+                        invalid={
+                          errors.editingOptionDto?.popup?.title &&
+                          touched.editingOptionDto?.popup?.title
+                        }
+                        errorMessage={errors.editingOptionDto?.popup?.title}
+                      >
+                        <Field
+                          type="text"
+                          autoComplete="off"
+                          name="editingOptionDto.popup.title"
+                          placeholder={translate('::ListForms.ListFormEdit.DetailsTitle')}
+                          component={Input}
+                        />
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.DetailsWidth')}
+                        invalid={
+                          errors.editingOptionDto?.popup?.width &&
+                          touched.editingOptionDto?.popup?.width
+                        }
+                        errorMessage={errors.editingOptionDto?.popup?.width}
+                      >
+                        <Field
+                          className="w-20"
+                          type="number"
+                          autoComplete="off"
+                          name="editingOptionDto.popup.width"
+                          placeholder={translate('::ListForms.ListFormEdit.DetailsWidth')}
+                          component={Input}
+                        />
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.DetailsHeight')}
+                        invalid={
+                          errors.editingOptionDto?.popup?.height &&
+                          touched.editingOptionDto?.popup?.height
+                        }
+                        errorMessage={errors.editingOptionDto?.popup?.height}
+                      >
+                        <Field
+                          className="w-20"
+                          type="number"
+                          autoComplete="off"
+                          name="editingOptionDto.popup.height"
+                          placeholder={translate('::ListForms.ListFormEdit.DetailsHeight')}
+                          component={Input}
+                        />
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingFullScreen')}
+                        invalid={
+                          errors.editingOptionDto?.popup?.fullScreen &&
+                          touched.editingOptionDto?.popup?.fullScreen
+                        }
+                        errorMessage={errors.editingOptionDto?.popup?.fullScreen}
+                      >
+                        <Field
+                          name="editingOptionDto.popup.fullScreen"
+                          placeholder={translate('::ListForms.ListFormEdit.EditingFullScreen')}
+                          component={Checkbox}
+                        />
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.ResizeEnabled')}
+                        invalid={
+                          errors.editingOptionDto?.popup?.resizeEnabled &&
+                          touched.editingOptionDto?.popup?.resizeEnabled
+                        }
+                        errorMessage={errors.editingOptionDto?.popup?.resizeEnabled}
+                      >
+                        <Field
+                          name="editingOptionDto.popup.resizeEnabled"
+                          placeholder={translate('::ListForms.ListFormEdit.ResizeEnabled')}
+                          component={Checkbox}
+                        />
+                      </FormItem>
+                      <FormItem
+                        label={translate('::ListForms.ListFormEdit.EditingHideOnOutsideClick')}
+                        invalid={
+                          errors.editingOptionDto?.popup?.hideOnOutsideClick &&
+                          touched.editingOptionDto?.popup?.hideOnOutsideClick
+                        }
+                        errorMessage={errors.editingOptionDto?.popup?.hideOnOutsideClick}
+                      >
+                        <Field
+                          name="editingOptionDto.popup.hideOnOutsideClick"
+                          placeholder={translate(
+                            '::ListForms.ListFormEdit.EditingHideOnOutsideClick',
+                          )}
+                          component={Checkbox}
+                        />
+                      </FormItem>
+                    </>
                   )}
-                  component={Checkbox}
-                />
-              </FormItem>
+                </Card>
+              </div>
               <Button block variant="solid" loading={isSubmitting}>
                 {isSubmitting ? translate('::SavingWithThreeDot') : translate('::Save')}
               </Button>
diff --git a/ui/src/views/list/useListFormColumns.ts b/ui/src/views/list/useListFormColumns.ts
index d69aeef1..4fa05863 100644
--- a/ui/src/views/list/useListFormColumns.ts
+++ b/ui/src/views/list/useListFormColumns.ts
@@ -338,6 +338,20 @@ const useListFormColumns = ({
 
     const buttons: any[] = []
 
+    if (hasUpdate) {
+      buttons.push({
+        name: 'edit',
+        text: translate('::App.Platform.Edit'),
+      })
+    }
+
+    if (hasDelete) {
+      buttons.push({
+        name: 'delete',
+        text: translate('::App.Platform.Delete'),
+      })
+    }
+
     if (hasDetail) {
       const item = {
         name: 'detail',
@@ -360,20 +374,6 @@ const useListFormColumns = ({
       buttons.push(item)
     }
 
-    if (hasUpdate) {
-      buttons.push({
-        name: 'edit',
-        text: translate('::App.Platform.Edit'),
-      })
-    }
-
-    if (hasDelete) {
-      buttons.push({
-        name: 'delete',
-        text: translate('::App.Platform.Delete'),
-      })
-    }
-
     gridDto.gridOptions.commandColumnDto.forEach((action) => {
       if (action.buttonPosition !== UiCommandButtonPositionTypeEnum.CommandColumn) return
       if (!checkPermission(action.authName)) return
diff --git a/ui/src/views/list/useToolbar.tsx b/ui/src/views/list/useToolbar.tsx
index 4c6b3ac6..62eb0d50 100644
--- a/ui/src/views/list/useToolbar.tsx
+++ b/ui/src/views/list/useToolbar.tsx
@@ -71,6 +71,20 @@ const useToolbar = ({
       })
     }
 
+    // Add InsertNewRecord button
+    if (grdOpt.editingOptionDto?.allowAdding && checkPermission(grdOpt.permissionDto?.c)) {
+      items.push({
+        locateInMenu: 'auto',
+        showText: 'always',
+        name: 'addRowButton',
+        location: 'after',
+        options: {
+          text: translate('::ListForms.ListForm.AddNewRecord'),
+          hint: translate('::ListForms.ListForm.AddNewRecord'),
+        },
+      })
+    }
+
     items.push({
       widget: 'dxButton',
       name: 'refreshButton',
@@ -120,20 +134,6 @@ const useToolbar = ({
       })
     }
 
-    // Add InsertNewRecord button
-    if (grdOpt.editingOptionDto?.allowAdding && checkPermission(grdOpt.permissionDto?.c)) {
-      items.push({
-        locateInMenu: 'auto',
-        showText: 'always',
-        name: 'addRowButton',
-        location: 'after',
-        options: {
-          text: translate('::ListForms.ListForm.AddNewRecord'),
-          hint: translate('::ListForms.ListForm.AddNewRecord'),
-        },
-      })
-    }
-
     // Add group panel
     if (grdOpt.groupPanelDto?.visible) {
       items.push({