Hey @Billy_Littlefield, thx for your response. Here is some reduced version that causes the error on my side. It’s basically the to-do example I referred to but with an added “start” and “end” field. The problem is in the function Task() where I try to display the start value using
{record.getCellValueAsString(startField)}
import React, {useState} from 'react';
import {
initializeBlock,
useBase,
useRecords,
useGlobalConfig,
expandRecord,
TablePickerSynced,
ViewPickerSynced,
FieldPickerSynced,
FormField,
Input,
Button,
Box,
Icon,
} from '@airtable/blocks/ui';
import {FieldType} from '@airtable/blocks/models';
function TodoApp() {
const base = useBase();
// Read the user's choice for which table and view to use from globalConfig.
const globalConfig = useGlobalConfig();
const tableId = globalConfig.get('selectedTableId');
const viewId = globalConfig.get('selectedViewId');
const doneFieldId = globalConfig.get('selectedDoneFieldId');
const startFieldId = globalConfig.get('selectedStartFieldId');
const endFieldId = globalConfig.get('selectedEndFieldId');
const table = base.getTableByIdIfExists(tableId);
const view = table ? table.getViewByIdIfExists(viewId) : null;
const doneField = table ? table.getFieldByIdIfExists(doneFieldId) : null;
const startField = table ? table.getFieldByIdIfExists(startFieldId) : null;
const endField = table ? table.getFieldByIdIfExists(endFieldId) : null;
// Don't need to fetch records if doneField doesn't exist (the field or it's parent table may
// have been deleted, or may not have been selected yet.)
const records = useRecords(doneField ? view : null, {
fields: doneField ? [table.primaryField, doneField] : [],
});
const tasks = records
? records.map(record => {
return <Task key={record.id} record={record} table={table} doneField={doneField} startField={startField} endField={endField} />;
})
: null;
return (
<div>
<Box padding={3} borderBottom="thick">
<FormField label="Table">
<TablePickerSynced globalConfigKey="selectedTableId" />
</FormField>
<FormField label="View">
<ViewPickerSynced table={table} globalConfigKey="selectedViewId" />
</FormField>
<FormField label="Field" marginBottom={0}>
<FieldPickerSynced
table={table}
globalConfigKey="selectedDoneFieldId"
placeholder="Pick a 'done' field..."
allowedTypes={[FieldType.CHECKBOX]}
/>
</FormField>
<FormField label="Start Field" marginBottom={0}>
<FieldPickerSynced
table={table}
globalConfigKey="selectedStartFieldId"
placeholder="Pick a 'start' field..."
allowedTypes={[FieldType.SINGLE_LINE_TEXT]}
/>
</FormField>
<FormField label="End Field" marginBottom={0}>
<FieldPickerSynced
table={table}
globalConfigKey="selectedEndFieldId"
placeholder="Pick a 'end' field..."
allowedTypes={[FieldType.DATE_TIME]}
/>
</FormField>
</Box>
{tasks}
{table && doneField && <AddTaskForm table={table} />}
</div>
);
}
function Task({record, table, doneField, startField}) {
return (
<Box
fontSize={4}
paddingX={3}
paddingY={2}
marginRight={-2}
borderBottom="default"
display="flex"
alignItems="center"
>
<TaskDoneCheckbox table={table} record={record} doneField={doneField} />
<a
style={{cursor: 'pointer', flex: 'auto', padding: 8}}
onClick={() => {
expandRecord(record);
}}
>
{record.name || 'Unnamed record'}
</a>
<p>{record.getCellValueAsString(startField)}</p> // THIS IS CAUSING THE ERROR
<TaskDeleteButton table={table} record={record} />
</Box>
);
}
Thx for your help :slightly_smiling_face:
