Nc feat/auto generate field name based on field type (#8644)

* feat(nc-gui): auto generate new field name based on field type

* feat(nc-gui): MFE - auto generate new field name

* fix(nc-gui): update MFE field name input placeholder style

* fix(nc-gui): auto generate field name in MFE title upadate issue

* fix(nc-gui): remove plural table name if it is oo link type

* fix(nc-gui): pr review changes

* fix(nc-gui): MFE field name input style

* chore(nc-gui): lint

* chore(nc-gui): lint

* fix(nc-gui): update lookup & rollup column tooltip

* fix(nc-gui): multi field editor test fail issue

* refactor(nc-gui): multifield editor auto generate column name code

* test: update survey form verify submit msg test

* chore(nc-gui): lint

packages/nc-gui/components/smartsheet/column/EditOrAdd.vue

@@ -325,8 +325,10 @@ const filterOption = (input: string, option: { value: UITypes }) => {
             ref="antInput"
             v-model="formState.title"
             :disabled="readOnly"
-            class="flex flex-grow nc-fields-input text-lg font-bold outline-none bg-inherit"
+            :placeholder="`${$t('objects.field')} ${$t('general.name').toLowerCase()} ${isEdit ? '' : $t('labels.optional')}`"
+            class="flex flex-grow nc-fields-input text-sm font-semibold outline-none bg-inherit min-h-6"
             :contenteditable="true"
+            @input="formState.userHasChangedTitle = true"
           />
         </div>
       </a-form-item>
@@ -335,6 +337,7 @@ const filterOption = (input: string, option: { value: UITypes }) => {
           ref="antInput"
           v-model:value="formState.title"
           class="nc-column-name-input !rounded-lg"
+          :placeholder="`${$t('objects.field')} ${$t('general.name').toLowerCase()} ${isEdit ? '' : $t('labels.optional')}`"
           :disabled="isKanban || readOnly"
           @input="onAlter(8)"
         />
@@ -549,6 +552,11 @@ const filterOption = (input: string, option: { value: UITypes }) => {
 </style>
 
 <style lang="scss" scoped>
+.nc-fields-input {
+  &::placeholder {
+    @apply font-normal;
+  }
+}
 .nc-column-name-input,
 :deep(.nc-formula-input),
 :deep(.ant-form-item-control-input-content > input.ant-input) {

packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue

@@ -8,6 +8,7 @@ interface Props {
   preload?: Partial<ColumnType>
   tableExplorerColumns?: ColumnType[]
   fromTableExplorer?: boolean
+  isColumnValid?: (value: Partial<ColumnType>) => boolean
 }
 
 const props = defineProps<Props>()
@@ -16,9 +17,9 @@ const emit = defineEmits(['submit', 'cancel', 'mounted'])
 
 const meta = inject(MetaInj, ref())
 
-const { column, preload, tableExplorerColumns, fromTableExplorer } = toRefs(props)
+const { column, preload, tableExplorerColumns, fromTableExplorer, isColumnValid } = toRefs(props)
 
-useProvideColumnCreateStore(meta, column, tableExplorerColumns, fromTableExplorer)
+useProvideColumnCreateStore(meta, column, tableExplorerColumns, fromTableExplorer, isColumnValid)
 </script>
 
 <template>

packages/nc-gui/components/smartsheet/column/LinkedToAnotherRecordOptions.vue

@@ -16,7 +16,7 @@ const meta = inject(MetaInj, ref())
 
 const filterRef = ref()
 
-const { setAdditionalValidations, setPostSaveOrUpdateCbk, validateInfos, onDataTypeChange, sqlUi, isXcdbBase } =
+const { setAdditionalValidations, setPostSaveOrUpdateCbk, validateInfos, onDataTypeChange, sqlUi, isXcdbBase, updateFieldName } =
   useColumnCreateStoreOrThrow()
 
 const baseStore = useBase()
@@ -134,6 +134,7 @@ const referenceTableChildId = computed({
   set: (value) => {
     if (!isEdit.value && value) {
       vModel.value.childId = value
+      vModel.value.childTableTitle = refTables.value.find((t) => t.id === value)?.title
     }
   },
 })
@@ -143,9 +144,19 @@ const linkType = computed({
   set: (value) => {
     if (!isEdit.value && value) {
       vModel.value.type = value
+
+      updateFieldName()
     }
   },
 })
+
+const handleUpdateRefTable = () => {
+  onDataTypeChange()
+
+  nextTick(() => {
+    updateFieldName()
+  })
+}
 </script>
 
 <template>
@@ -182,7 +193,7 @@ const linkType = computed({
           :filter-option="filterOption"
           placeholder="select table to link"
           dropdown-class-name="nc-dropdown-ltar-child-table"
-          @change="onDataTypeChange"
+          @change="handleUpdateRefTable"
         >
           <template #suffixIcon>
             <GeneralIcon icon="arrowDown" class="text-gray-700" />

packages/nc-gui/components/smartsheet/column/LookupOptions.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onMounted } from '@vue/runtime-core'
-import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, LookupType, TableType } from 'nocodb-sdk'
 import { UITypes, isLinksOrLTAR, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 
 const props = defineProps<{
@@ -15,7 +15,8 @@ const meta = inject(MetaInj, ref())
 
 const { t } = useI18n()
 
-const { setAdditionalValidations, validateInfos, onDataTypeChange, isEdit, disableSubmitBtn } = useColumnCreateStoreOrThrow()
+const { setAdditionalValidations, validateInfos, onDataTypeChange, isEdit, disableSubmitBtn, updateFieldName } =
+  useColumnCreateStoreOrThrow()
 
 const baseStore = useBase()
 
@@ -68,11 +69,19 @@ onMounted(() => {
   }
 })
 
+const getNextColumnId = () => {
+  const usedLookupColumnIds = (meta.value?.columns || [])
+    .filter((c) => c.uidt === UITypes.Lookup)
+    .map((c) => (c.colOptions as LookupType)?.fk_lookup_column_id)
+
+  return columns.value.find((c) => !usedLookupColumnIds.includes(c.id))?.id
+}
+
 const onRelationColChange = async () => {
   if (selectedTable.value) {
     await getMeta(selectedTable.value.id)
   }
-  vModel.value.fk_lookup_column_id = columns.value?.[0]?.id
+  vModel.value.fk_lookup_column_id = getNextColumnId() || columns.value?.[0]?.id
   onDataTypeChange()
 }
 
@@ -88,6 +97,32 @@ const cellIcon = (column: ColumnType) =>
   h(isVirtualCol(column) ? resolveComponent('SmartsheetHeaderVirtualCellIcon') : resolveComponent('SmartsheetHeaderCellIcon'), {
     columnMeta: column,
   })
+
+watch(
+  () => vModel.value.fk_relation_column_id,
+  (newValue) => {
+    if (!newValue) return
+
+    const selectedTable = refTables.value.find((t) => t.col.fk_column_id === newValue)
+    if (selectedTable) {
+      vModel.value.lookupTableTitle = selectedTable?.title || selectedTable.table_name
+    }
+  },
+)
+
+watch(
+  () => vModel.value.fk_lookup_column_id,
+  (newValue) => {
+    if (!newValue) return
+
+    const selectedColumn = columns.value.find((c) => c.id === newValue)
+    if (selectedColumn) {
+      vModel.value.lookupColumnTitle = selectedColumn?.title || selectedColumn.column_name
+
+      updateFieldName()
+    }
+  },
+)
 </script>
 
 <template>

packages/nc-gui/components/smartsheet/column/RollupOptions.vue

@@ -1,6 +1,13 @@
 <script setup lang="ts">
 import { onMounted } from '@vue/runtime-core'
-import { type ColumnType, type LinkToAnotherRecordType, RelationTypes, type TableType, type UITypes } from 'nocodb-sdk'
+import {
+  type ColumnType,
+  type LinkToAnotherRecordType,
+  RelationTypes,
+  type RollupType,
+  type TableType,
+  UITypes,
+} from 'nocodb-sdk'
 import { getAvailableRollupForUiType, isLinksOrLTAR, isSystemColumn, isVirtualCol } from 'nocodb-sdk'
 
 const props = defineProps<{
@@ -13,7 +20,8 @@ const vModel = useVModel(props, 'value', emit)
 
 const meta = inject(MetaInj, ref())
 
-const { setAdditionalValidations, validateInfos, onDataTypeChange, isEdit, disableSubmitBtn } = useColumnCreateStoreOrThrow()
+const { setAdditionalValidations, validateInfos, onDataTypeChange, isEdit, disableSubmitBtn, updateFieldName } =
+  useColumnCreateStoreOrThrow()
 
 const baseStore = useBase()
 
@@ -79,11 +87,19 @@ onMounted(() => {
   }
 })
 
+const getNextColumnId = () => {
+  const usedLookupColumnIds = (meta.value?.columns || [])
+    .filter((c) => c.uidt === UITypes.Rollup)
+    .map((c) => (c.colOptions as RollupType)?.fk_rollup_column_id)
+
+  return columns.value.find((c) => !usedLookupColumnIds.includes(c.id))?.id
+}
+
 const onRelationColChange = async () => {
   if (selectedTable.value) {
     await getMeta(selectedTable.value.id)
   }
-  vModel.value.fk_rollup_column_id = columns.value?.[0]?.id
+  vModel.value.fk_rollup_column_id = getNextColumnId() || columns.value?.[0]?.id
   onDataTypeChange()
 }
 
@@ -120,6 +136,15 @@ const filteredColumns = computed(() => {
   })
 })
 
+const onRollupFunctionChange = () => {
+  const rollupFun = aggFunctionsList.value.find((func) => func.value === vModel.value.rollup_function)
+  if (rollupFun && rollupFun?.text) {
+    vModel.value.rollup_function_name = rollupFun.text
+  }
+  onDataTypeChange()
+  updateFieldName()
+}
+
 watch(
   () => vModel.value.fk_rollup_column_id,
   () => {
@@ -131,7 +156,12 @@ watch(
       // when the previous roll up function was numeric type and the current child field is non-numeric
       // reset rollup function with a non-numeric type
       vModel.value.rollup_function = aggFunctionsList.value[0].value
+      vModel.value.rollup_function_name = aggFunctionsList.value[0].text
     }
+
+    vModel.value.rollupColumnTitle = childFieldColumn?.title || childFieldColumn?.column_name
+
+    updateFieldName()
   },
 )
 
@@ -142,6 +172,18 @@ watchEffect(() => {
     disableSubmitBtn.value = false
   }
 })
+
+watch(
+  () => vModel.value.fk_relation_column_id,
+  (newValue) => {
+    if (!newValue) return
+
+    const selectedTable = refTables.value.find((t) => t.col.fk_column_id === newValue)
+    if (selectedTable) {
+      vModel.value.rollupTableTitle = selectedTable?.title || selectedTable.table_name
+    }
+  },
+)
 </script>
 
 <template>
@@ -235,7 +277,7 @@ watchEffect(() => {
         placeholder="-select-"
         dropdown-class-name="nc-dropdown-rollup-function"
         class="!mt-0.5"
-        @change="onDataTypeChange"
+        @change="onRollupFunctionChange"
       >
         <template #suffixIcon>
           <GeneralIcon icon="arrowDown" class="text-gray-700" />

packages/nc-gui/components/smartsheet/column/SelectOptions.vue

@@ -22,7 +22,7 @@ const emit = defineEmits(['update:value'])
 
 const vModel = useVModel(props, 'value', emit)
 
-const { setAdditionalValidations, validateInfos, isEdit } = useColumnCreateStoreOrThrow()
+const { setAdditionalValidations, validateInfos } = useColumnCreateStoreOrThrow()
 
 // const { base } = storeToRefs(useBase())
 

packages/nc-gui/components/smartsheet/column/UserOptions.vue

@@ -14,7 +14,7 @@ const initialIsMulti = ref()
 
 const validators = {}
 
-const { setAdditionalValidations } = useColumnCreateStoreOrThrow()
+const { setAdditionalValidations, updateFieldName } = useColumnCreateStoreOrThrow()
 
 setAdditionalValidations({
   ...validators,
@@ -36,6 +36,7 @@ const updateIsMulti = (isChecked: boolean) => {
   if (!vModel.value.meta.is_multi) {
     vModel.value.cdf = vModel.value.cdf?.split(',')[0] || null
   }
+  updateFieldName()
 }
 </script>
 
@@ -50,7 +51,7 @@ const updateIsMulti = (isChecked: boolean) => {
     </a-form-item>
     <a-form-item v-if="future">
       <div v-if="vModel.meta" class="flex items-center gap-1">
-        <NcSwitch v-model:checked="vModel.meta.notify" data-testid="user-column-notify-user" @change="updateIsMulti">
+        <NcSwitch v-model:checked="vModel.meta.notify" data-testid="user-column-notify-user">
           <div class="text-sm text-gray-800 select-none">Notify users with base access when they're added</div>
         </NcSwitch>
       </div>

packages/nc-gui/components/smartsheet/details/Fields.vue

@@ -5,6 +5,7 @@ import { UITypes, isLinksOrLTAR, isSystemColumn, isVirtualCol } from 'nocodb-sdk
 import type { ColumnType, FilterType, SelectOptionsType } from 'nocodb-sdk'
 import Draggable from 'vuedraggable'
 import { onKeyDown, useMagicKeys } from '@vueuse/core'
+import { generateUniqueColumnName } from '~/helpers/parsers/parserHelpers'
 
 interface TableExplorerColumn extends ColumnType {
   id?: string
@@ -14,6 +15,7 @@ interface TableExplorerColumn extends ColumnType {
     view_id: string
   }
   view_id?: string
+  userHasChangedTitle?: boolean
 }
 
 interface op {
@@ -347,6 +349,15 @@ const onFieldUpdate = (state: TableExplorerColumn, skipLinkChecks = false) => {
         column: state,
       })
     }
+
+    if (
+      activeField.value &&
+      Object.keys(activeField.value).length &&
+      ((state?.id && activeField.value?.id && state?.id === activeField.value?.id) ||
+        (state?.temp_id && activeField.value?.temp_id && state?.temp_id === activeField.value?.temp_id))
+    ) {
+      activeField.value = state
+    }
   }
 }
 
@@ -467,7 +478,7 @@ const isColumnValid = (column: TableExplorerColumn) => {
   const isDeleteOp = ops.value.find((op) => compareCols(column, op.column) && op.op === 'delete')
   const isNew = ops.value.find((op) => compareCols(column, op.column) && op.op === 'add')
   if (isDeleteOp) return true
-  if (!column.title) {
+  if (!column.title && !isNew) {
     return false
   }
   if ((column.uidt === UITypes.Links || column.uidt === UITypes.LinkToAnotherRecord) && isNew) {
@@ -604,10 +615,23 @@ const saveChanges = async () => {
     if (!meta.value?.id) return
 
     loading.value = true
-
+    const newFieldTitles: string[] = []
     for (const mop of moveOps.value) {
       const op = ops.value.find((op) => compareCols(op.column, mop.column))
       if (op && op.op === 'add') {
+        if (!op.column?.userHasChangedTitle && !op.column.title) {
+          const defaultColumnName = generateUniqueColumnName({
+            formState: op.column,
+            tableExplorerColumns: fields.value || [],
+            metaColumns: meta.value?.columns || [],
+            newFieldTitles,
+          })
+          newFieldTitles.push(defaultColumnName)
+
+          op.column.title = defaultColumnName
+          op.column.column_name = defaultColumnName
+        }
+
         op.column.column_order = {
           order: mop.order,
           view_id: view.value?.id as string,
@@ -826,13 +850,37 @@ const onFieldOptionUpdate = () => {
 }
 
 watch(
-  fields,
+  () => activeField.value?.temp_id,
-  () => {
+  (_newValue, oldValue) => {
-    if (activeField.value) {
+    if (!oldValue) return
-      activeField.value = fields.value.find((field) => field.id === activeField.value.id) || activeField.value
+
+    const oldField = fields.value.find((field) => field.temp_id === oldValue)
+    if (
+      !oldField ||
+      (oldField &&
+        (oldField.title ||
+          !ops.value.find((op) => op.op === 'add' && op.column.temp_id === oldField.temp_id) ||
+          oldField?.userHasChangedTitle ||
+          !isColumnValid(oldField)))
+    ) {
+      return
     }
+
+    const newFieldTitles = ops.value
+      .filter((op) => op.op === 'add' && op.column.title)
+      .map((op) => op.column.title)
+      .filter((t) => t) as string[]
+
+    const defaultColumnName = generateUniqueColumnName({
+      formState: oldField,
+      tableExplorerColumns: fields.value || [],
+      metaColumns: meta.value?.columns || [],
+      newFieldTitles,
+    })
+
+    oldField.title = defaultColumnName
+    oldField.column_name = defaultColumnName
   },
-  { deep: true },
 )
 </script>
 
@@ -1279,6 +1327,7 @@ watch(
                 :column="activeField"
                 :preload="fieldState(activeField)"
                 :table-explorer-columns="fields"
+                :is-column-valid="isColumnValid"
                 embed-mode
                 :readonly="isLocked"
                 from-table-explorer

packages/nc-gui/components/smartsheet/header/VirtualCell.vue

@@ -48,8 +48,6 @@ const isExpandedForm = inject(IsExpandedFormOpenInj, ref(false))
 
 const isExpandedBulkUpdateForm = inject(IsExpandedBulkUpdateFormOpenInj, ref(false))
 
-const colOptions = computed(() => column.value?.colOptions)
-
 const tableTile = computed(() => meta?.value?.title)
 
 const relationColumnOptions = computed<LinkToAnotherRecordType | null>(() => {
@@ -70,22 +68,6 @@ const relatedTableMeta = computed(
 
 const relatedTableTitle = computed(() => relatedTableMeta.value?.title)
 
-const childColumn = computed(() => {
-  if (relatedTableMeta.value?.columns) {
-    if (isRollup(column.value)) {
-      return relatedTableMeta.value?.columns.find(
-        (c: ColumnType) => c.id === (colOptions.value as RollupType).fk_rollup_column_id,
-      )
-    }
-    if (isLookup(column.value)) {
-      return relatedTableMeta.value?.columns.find(
-        (c: ColumnType) => c.id === (colOptions.value as LookupType).fk_lookup_column_id,
-      )
-    }
-  }
-  return ''
-})
-
 const tooltipMsg = computed(() => {
   if (!column.value) {
     return ''
@@ -99,8 +81,6 @@ const tooltipMsg = computed(() => {
     return `'${column?.value?.title}' ${t('labels.belongsTo')} '${relatedTableTitle.value}'`
   } else if (isOo(column.value)) {
     return `'${tableTile.value}' & '${relatedTableTitle.value}' ${t('labels.oneToOne')}`
-  } else if (isLookup(column.value)) {
-    return `'${childColumn.value.title}' from '${relatedTableTitle.value}' (${childColumn.value.uidt})`
   } else if (isFormula(column.value)) {
     const formula = substituteColumnIdWithAliasInFormula(
       (column.value?.colOptions as FormulaType)?.formula,
@@ -108,14 +88,12 @@ const tooltipMsg = computed(() => {
       (column.value?.colOptions as any)?.formula_raw,
     )
     return `Formula - ${formula}`
-  } else if (isRollup(column.value)) {
-    return `'${childColumn.value.title}' of '${relatedTableTitle.value}' (${childColumn.value.uidt})`
   }
   return column?.value?.title || ''
 })
 
 const showTooltipAlways = computed(() => {
-  return isLinksOrLTAR(column.value) || isFormula(column.value) || isRollup(column.value) || isLookup(column.value)
+  return isLinksOrLTAR(column.value) || isFormula(column.value)
 })
 
 const columnOrder = ref<Pick<ColumnReqType, 'column_order'> | null>(null)

packages/nc-gui/composables/useColumnCreateStore.ts

@@ -3,6 +3,7 @@ import type { ColumnReqType, ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isLinksOrLTAR } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import type { RuleObject } from 'ant-design-vue/es/form'
+import { generateUniqueColumnName } from '~/helpers/parsers/parserHelpers'
 
 const clone = rfdc()
 
@@ -20,6 +21,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     column: Ref<ColumnType | undefined>,
     tableExplorerColumns?: Ref<ColumnType[] | undefined>,
     fromTableExplorer?: Ref<boolean | undefined>,
+    isColumnValid?: Ref<((value: Partial<ColumnType>) => boolean) | undefined>,
   ) => {
     const baseStore = useBase()
 
@@ -69,33 +71,21 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     }
 
     const formState = ref<Record<string, any>>({
-      title: 'title',
+      title: '',
       uidt: fromTableExplorer?.value ? UITypes.SingleLineText : null,
       ...clone(column.value || {}),
     })
 
-    const generateUniqueColumnSuffix = () => {
-      let suffix = (meta.value?.columns?.length || 0) + 1
-      let columnName = `title${suffix}`
-      while (
-        (tableExplorerColumns?.value || meta.value?.columns)?.some(
-          (c) => (c.column_name || '').toLowerCase() === columnName.toLowerCase(),
-        )
-      ) {
-        suffix++
-        columnName = `title${suffix}`
-      }
-      return suffix
-    }
-
     // actions
     const generateNewColumnMeta = (ignoreUidt = false) => {
       setAdditionalValidations({})
       formState.value = {
         meta: {},
-        ...sqlUi.value.getNewColumn(generateUniqueColumnSuffix()),
+        ...sqlUi.value.getNewColumn(1),
       }
-      formState.value.title = formState.value.column_name
+      formState.value.title = ''
+      formState.value.column_name = ''
+
       if (ignoreUidt && !fromTableExplorer?.value) {
         formState.value.uidt = null
       }
@@ -104,10 +94,14 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     const validators = computed(() => {
       return {
         title: [
+          ...(isEdit.value
+            ? [
                 {
                   required: true,
                   message: t('msg.error.columnNameRequired'),
                 },
+              ]
+            : []),
           // validation for unique column name
           {
             validator: (rule: any, value: any) => {
@@ -158,16 +152,19 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     const onUidtOrIdTypeChange = () => {
       disableSubmitBtn.value = false
 
+      const newTitle = updateFieldName(false)
+
       const colProp = sqlUi.value.getDataTypeForUiType(formState.value as { uidt: UITypes }, idType ?? undefined)
       formState.value = {
         ...(!isEdit.value && {
           // only take title, column_name and uidt when creating a column
           // to avoid the extra props from being taken (e.g. SingleLineText -> LTAR -> SingleLineText)
           // to mess up the column creation
-          title: formState.value.title,
+          title: newTitle || formState.value.title,
-          column_name: formState.value.column_name,
+          column_name: newTitle || formState.value.column_name,
           uidt: formState.value.uidt,
           temp_id: formState.value.temp_id,
+          userHasChangedTitle: !!formState.value?.userHasChangedTitle,
         }),
         ...(isEdit.value && {
           // take the existing formState.value when editing a column
@@ -285,6 +282,16 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
           // Column updated
           // message.success(t('msg.success.columnUpdated'))
         } else {
+          // set default field title
+          if (!formState.value.title.trim()) {
+            const columnName = generateUniqueColumnName({
+              formState: formState.value,
+              tableExplorerColumns: tableExplorerColumns?.value,
+              metaColumns: meta.value?.columns || [],
+            })
+            formState.value.title = columnName
+            formState.value.column_name = columnName
+          }
           // todo : set additional meta for auto generated string id
           if (formState.value.uidt === UITypes.ID) {
             // based on id column type set autogenerated meta prop
@@ -323,6 +330,30 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       }
     }
 
+    function updateFieldName(updateFormState: boolean = true) {
+      if (
+        isEdit.value ||
+        !fromTableExplorer?.value ||
+        formState.value?.userHasChangedTitle ||
+        !isColumnValid?.value?.(formState.value)
+      ) {
+        return
+      }
+
+      const defaultColumnName = generateUniqueColumnName({
+        formState: formState.value,
+        tableExplorerColumns: tableExplorerColumns?.value || [],
+        metaColumns: meta.value?.columns || [],
+      })
+
+      if (updateFormState) {
+        formState.value.title = defaultColumnName
+        formState.value.column_name = defaultColumnName
+      } else {
+        return defaultColumnName
+      }
+    }
+
     /** set column name same as title which is actual name in db */
     watch(
       () => formState.value?.title,
@@ -349,6 +380,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
       isXcdbBase,
       disableSubmitBtn,
       setPostSaveOrUpdateCbk,
+      updateFieldName,
     }
   },
 )

packages/nc-gui/helpers/parsers/parserHelpers.ts

@@ -1,5 +1,6 @@
-import { UITypes } from 'nocodb-sdk'
+import { type ColumnType, FieldNameFromUITypes, UITypes } from 'nocodb-sdk'
 import isURL from 'validator/lib/isURL'
+import { pluralize } from 'inflection'
 
 // This regex pattern matches email addresses by looking for sequences that start with characters before the "@" symbol, followed by the domain.
 // It's designed to capture most email formats, including those with periods and "+" symbols in the local part.
@@ -279,3 +280,208 @@ export const getFormattedViewTabTitle = ({
 
   return title
 }
+
+export const generateUniqueColumnSuffix = ({
+  tableExplorerColumns,
+  metaColumns,
+}: {
+  tableExplorerColumns?: ColumnType[]
+  metaColumns: ColumnType[]
+}) => {
+  let suffix = (metaColumns?.length || 0) + 1
+  let columnName = `title${suffix}`
+  while (
+    (tableExplorerColumns || metaColumns)?.some(
+      (c) =>
+        (c.column_name || '').toLowerCase() === columnName.toLowerCase() ||
+        (c.title || '').toLowerCase() === columnName.toLowerCase(),
+    )
+  ) {
+    suffix++
+    columnName = `title${suffix}`
+  }
+  return suffix
+}
+
+const extractNextDefaultColumnName = ({
+  tableExplorerColumns,
+  metaColumns,
+  defaultColumnName,
+  newFieldTitles,
+  formState,
+}: {
+  tableExplorerColumns?: ColumnType[]
+  metaColumns: ColumnType[]
+  defaultColumnName: string
+  newFieldTitles: string[]
+  formState: Record<string, any>
+}): string => {
+  // Extract and sort numbers associated with the provided defaultName
+  const namesData = ((tableExplorerColumns || metaColumns)
+    ?.flatMap((c) => {
+      if (formState?.temp_id && c?.temp_id && formState?.temp_id === c?.temp_id) {
+        return []
+      }
+
+      if (c.title !== c.column_name) {
+        return [c.title?.toLowerCase(), c.column_name?.toLowerCase()]
+      }
+      return [c.title?.toLowerCase()]
+    })
+    .filter((t) => t && t.startsWith(defaultColumnName.toLowerCase())) || []) as string[]
+
+  if (![...namesData, ...newFieldTitles].includes(defaultColumnName.toLowerCase())) {
+    return defaultColumnName
+  }
+
+  const extractedSortedNumbers =
+    (namesData
+      .map((name) => {
+        const [_defaultName, number] = name.split(/ (?!.* )/)
+        if (_defaultName === defaultColumnName.toLowerCase() && !isNaN(Number(number?.trim()))) {
+          return Number(number?.trim())
+        }
+        return undefined
+      })
+      .filter((e) => e)
+      .sort((a, b) => {
+        if (a !== undefined && b !== undefined) {
+          return a - b
+        }
+        return 0
+      }) as number[]) || []
+
+  return extractedSortedNumbers.length
+    ? `${defaultColumnName} ${extractedSortedNumbers[extractedSortedNumbers.length - 1] + 1}`
+    : `${defaultColumnName} 1`
+}
+
+export const generateUniqueColumnName = ({
+  tableExplorerColumns,
+  metaColumns,
+  formState,
+  newFieldTitles,
+}: {
+  tableExplorerColumns?: ColumnType[]
+  metaColumns: ColumnType[]
+  formState: Record<string, any>
+  newFieldTitles?: string[]
+}) => {
+  let defaultColumnName = FieldNameFromUITypes[formState.uidt as UITypes]
+
+  if (!defaultColumnName) {
+    return `title${generateUniqueColumnSuffix({ tableExplorerColumns, metaColumns })}`
+  }
+
+  switch (formState.uidt) {
+    case UITypes.User: {
+      if (formState.meta.is_multi) {
+        defaultColumnName = `${defaultColumnName}s`
+      }
+      break
+    }
+
+    case UITypes.Links:
+    case UITypes.LinkToAnotherRecord: {
+      if (!formState.childTableTitle) {
+        return `title${generateUniqueColumnSuffix({ tableExplorerColumns, metaColumns })}`
+      }
+
+      let childTableTitle = formState.childTableTitle
+
+      // Use plural for links except oo relation type
+      if (formState.uidt === UITypes.Links && formState?.type !== 'oo') {
+        childTableTitle = pluralize(childTableTitle)
+      }
+
+      // Calculate the remaining length available for childTableTitle
+      const maxLength = 255 - (defaultColumnName.length - 11 + '{TableName}'.length)
+
+      // Truncate childTableTitle if it exceeds the maxLength
+      if (childTableTitle.length > maxLength) {
+        childTableTitle = `${childTableTitle.slice(0, maxLength - 3)}...`
+      }
+
+      // Replace {TableName} with the potentially truncated childTableTitle
+      defaultColumnName = defaultColumnName.replace('{TableName}', childTableTitle)
+
+      // Ensure the final defaultColumnName is less than 255 characters
+      if (defaultColumnName.length >= 255) {
+        defaultColumnName = `${defaultColumnName.slice(0, 252)}...`
+      }
+
+      break
+    }
+
+    case UITypes.Lookup: {
+      if (!formState.lookupTableTitle || !formState.lookupColumnTitle) {
+        return `title${generateUniqueColumnSuffix({ tableExplorerColumns, metaColumns })}`
+      }
+
+      let lookupTableTitle = formState.lookupTableTitle
+      let lookupColumnTitle = formState.lookupColumnTitle
+
+      // Calculate the lengths of the placeholders
+      const placeholderLength = '{TableName}'.length + '{FieldName}'.length
+      const baseLength = defaultColumnName.length - placeholderLength
+
+      // Calculate the maximum length allowed for both titles combined
+      const maxTotalLength = 255 - baseLength
+      const maxLengthPerTitle = Math.floor(maxTotalLength / 2)
+
+      // Truncate the titles if necessary
+      if (lookupTableTitle.length > maxLengthPerTitle) {
+        lookupTableTitle = `${lookupTableTitle.slice(0, maxLengthPerTitle - 3)}...`
+      }
+
+      if (lookupColumnTitle.length > maxLengthPerTitle) {
+        lookupColumnTitle = `${lookupColumnTitle.slice(0, maxLengthPerTitle - 3)}...`
+      }
+
+      // Replace placeholders
+      defaultColumnName = defaultColumnName.replace('{TableName}', lookupTableTitle).replace('{FieldName}', lookupColumnTitle)
+
+      break
+    }
+
+    case UITypes.Rollup: {
+      if (!formState.rollupTableTitle || !formState.rollupColumnTitle || !formState?.rollup_function_name) {
+        return `title${generateUniqueColumnSuffix({ tableExplorerColumns, metaColumns })}`
+      }
+      let rollupTableTitle = formState.rollupTableTitle
+      let rollupColumnTitle = formState.rollupColumnTitle
+
+      // Update rollup function name
+      defaultColumnName = defaultColumnName.replace('{RollupFunction}', formState.rollup_function_name)
+
+      // Calculate the lengths of the placeholders
+      const placeholderLength = '{TableName}'.length + '{FieldName}'.length
+      const baseLength = defaultColumnName.length - placeholderLength
+
+      // Calculate the maximum length allowed for both titles combined
+      const maxTotalLength = 255 - baseLength
+      const maxLengthPerTitle = Math.floor(maxTotalLength / 2)
+
+      // Truncate the titles if necessary
+      if (rollupTableTitle.length > maxLengthPerTitle) {
+        rollupTableTitle = `${rollupTableTitle.slice(0, maxLengthPerTitle - 3)}...`
+      }
+
+      if (rollupColumnTitle.length > maxLengthPerTitle) {
+        rollupColumnTitle = `${rollupColumnTitle.slice(0, maxLengthPerTitle - 3)}...`
+      }
+
+      // Replace placeholders
+      defaultColumnName = defaultColumnName.replace('{TableName}', rollupTableTitle).replace('{FieldName}', rollupColumnTitle)
+      break
+    }
+  }
+
+  return extractNextDefaultColumnName({
+    tableExplorerColumns,
+    metaColumns,
+    defaultColumnName,
+    newFieldTitles: newFieldTitles || [],
+    formState,
+  })
+}

packages/nocodb-sdk/src/lib/UITypes.ts

@@ -90,6 +90,50 @@ export const UITypesName = {
   [UITypes.LastModifiedBy]: 'Last modified by',
 };
 
+export const FieldNameFromUITypes = {
+  [UITypes.ID]: 'ID',
+  [UITypes.LinkToAnotherRecord]: '{TableName}',
+  [UITypes.ForeignKey]: 'Foreign key',
+  [UITypes.Lookup]: '{FieldName} (from {TableName})',
+  [UITypes.SingleLineText]: 'Text',
+  [UITypes.LongText]: 'Notes',
+  [UITypes.Attachment]: 'Attachment',
+  [UITypes.Checkbox]: 'Done',
+  [UITypes.MultiSelect]: 'Tags',
+  [UITypes.SingleSelect]: 'Status',
+  [UITypes.Collaborator]: 'User',
+  [UITypes.Date]: 'Date',
+  [UITypes.Year]: 'Year',
+  [UITypes.Time]: 'Time',
+  [UITypes.PhoneNumber]: 'Phone',
+  [UITypes.GeoData]: 'Geo data',
+  [UITypes.Email]: 'Email',
+  [UITypes.URL]: 'URL',
+  [UITypes.Number]: 'Number',
+  [UITypes.Decimal]: 'Decimal',
+  [UITypes.Currency]: 'Currency',
+  [UITypes.Percent]: 'Percent',
+  [UITypes.Duration]: 'Duration',
+  [UITypes.Rating]: 'Rating',
+  [UITypes.Formula]: 'Formula',
+  [UITypes.Rollup]: '{RollupFunction}({FieldName}) from {TableName}',
+  [UITypes.Count]: 'Count',
+  [UITypes.DateTime]: 'Date time',
+  [UITypes.CreatedTime]: 'Created time',
+  [UITypes.LastModifiedTime]: 'Last modified time',
+  [UITypes.AutoNumber]: 'Auto number',
+  [UITypes.Geometry]: 'Geometry',
+  [UITypes.JSON]: 'JSON',
+  [UITypes.SpecificDBType]: 'Specific DB type',
+  [UITypes.Barcode]: 'Barcode',
+  [UITypes.QrCode]: 'Qr code',
+  [UITypes.Button]: 'Button',
+  [UITypes.Links]: '{TableName}',
+  [UITypes.User]: 'User',
+  [UITypes.CreatedBy]: 'Created by',
+  [UITypes.LastModifiedBy]: 'Last modified by',
+};
+
 export const numericUITypes = [
   UITypes.Duration,
   UITypes.Currency,

packages/nocodb-sdk/src/lib/index.ts

@@ -10,6 +10,7 @@ export * from '~/lib/formulaHelpers';
 export {
   default as UITypes,
   UITypesName,
+  FieldNameFromUITypes,
   numericUITypes,
   isNumericCol,
   isVirtualCol,

tests/playwright/pages/Dashboard/SurveyForm/index.ts

@@ -116,9 +116,17 @@ export class SurveyFormPage extends BasePage {
     await this.rootPage.waitForTimeout(100);
   }
 
-  async validateSuccessMessage(param: { message: string; showAnotherForm?: boolean }) {
+  async validateSuccessMessage(param: { message: string; showAnotherForm?: boolean; isCustomMsg?: boolean }) {
     await this.get().locator('[data-testid="nc-survey-form__success-msg"]').waitFor({ state: 'visible' });
 
+    if (param.isCustomMsg) {
+      await this.get()
+        .locator('[data-testid="nc-survey-form__success-msg"]')
+        .locator('.tiptap.ProseMirror')
+        .waitFor({ state: 'visible' });
+    }
+
+    await this.rootPage.waitForTimeout(200);
     await expect(
       this.get().locator(`[data-testid="nc-survey-form__success-msg"]:has-text("${param.message}")`)
     ).toBeVisible();

tests/playwright/tests/db/views/viewForm.spec.ts

@@ -968,6 +968,7 @@ test.describe('Form view: field validation', () => {
     // validate post submit data
     await surveyForm.validateSuccessMessage({
       message: 'Thank you for submitting the form',
+      isCustomMsg: true,
     });
   });
 
@@ -1306,6 +1307,7 @@ test.describe('Form view: field validation', () => {
     // validate post submit data
     await surveyForm.validateSuccessMessage({
       message: 'Thank you for submitting the form',
+      isCustomMsg: true,
     });
   });
 
@@ -1418,6 +1420,7 @@ test.describe('Form view: field validation', () => {
     // validate post submit data
     await surveyForm.validateSuccessMessage({
       message: 'Thank you for submitting the form',
+      isCustomMsg: true,
     });
   });
 });

tests/playwright/tests/db/views/viewFormShareSurvey.spec.ts

@@ -85,6 +85,7 @@ test.describe('Share form', () => {
     await surveyForm.validateSuccessMessage({
       message: 'Thank you for submitting the form',
       showAnotherForm: true,
+      isCustomMsg: true,
     });
   });
 });