WIP - dislpay name field for look up fields in related lists

This commit is contained in:
Francisco Gaona
2026-01-09 08:00:05 +01:00
parent 852c4e28d2
commit f8a3cffb64

View File

@@ -113,20 +113,40 @@ const handleViewRecord = (recordId: string) => {
emit('navigate', props.config.objectApiName, recordId) emit('navigate', props.config.objectApiName, recordId)
} }
const formatValue = (value: any, field: FieldConfig): string => { const formatValue = (record: any, field: FieldConfig): string => {
const value = record?.[field.apiName]
if (value === null || value === undefined) return '-' if (value === null || value === undefined) return '-'
const type = (field.type || '').toString().toLowerCase()
// Lookup fields: use related object display value when available
if (type === 'lookup' || type === 'belongsto') {
const relationName = field.apiName.replace(/Id$/i, '').toLowerCase()
const related = record?.[relationName]
if (related && typeof related === 'object') {
const displayField = (field as any).relationDisplayField || 'name'
if (related[displayField]) return String(related[displayField])
// Fallback: first string-ish property or ID
const firstStringKey = Object.keys(related).find(
key => typeof related[key] === 'string'
)
if (firstStringKey) return String(related[firstStringKey])
if (related.id) return String(related.id)
}
// If no related object, show raw value
}
// Handle different field types // Handle different field types
if (field.type === 'date') { if (type === 'date') {
return new Date(value).toLocaleDateString() return new Date(value).toLocaleDateString()
} }
if (field.type === 'datetime') { if (type === 'datetime' || type === 'date_time' || type === 'date-time') {
return new Date(value).toLocaleString() return new Date(value).toLocaleString()
} }
if (field.type === 'boolean') { if (type === 'boolean') {
return value ? 'Yes' : 'No' return value ? 'Yes' : 'No'
} }
if (field.type === 'select' && field.options) { if (type === 'select' && field.options) {
const option = field.options.find(opt => opt.value === value) const option = field.options.find(opt => opt.value === value)
return option?.label || value return option?.label || value
} }
@@ -199,7 +219,7 @@ onMounted(() => {
<TableBody> <TableBody>
<TableRow v-for="record in displayRecords" :key="record.id"> <TableRow v-for="record in displayRecords" :key="record.id">
<TableCell v-for="field in config.fields" :key="field.id"> <TableCell v-for="field in config.fields" :key="field.id">
{{ formatValue(record[field.apiName], field) }} {{ formatValue(record, field) }}
</TableCell> </TableCell>
<TableCell> <TableCell>
<Button <Button