Help

How to get cell values of all fields of a record?

Topic Labels: Custom Extensions
Solved
Jump to Solution
3437 1
cancel
Showing results for 
Search instead for 
Did you mean: 
harshal
5 - Automation Enthusiast
5 - Automation Enthusiast

I am trying to get cell values of all fields of selected record Id. for now my current code only gets of a single field, any idea how its possible ?

import {initializeBlock, useBase, useRecords, useLoadable, useWatchable} from '@airtable/blocks/ui';
import React, {useState} from 'react';
import {cursor} from '@airtable/blocks'

function HelloWorldBlock() {

    const [cellValue, setCellValue] = useState('')

    useLoadable(cursor)

    const base = useBase()
    const table = base.getTableByName('Forex Cards')
    const records = useRecords(table)

    useWatchable(cursor, ['selectedRecordIds', 'selectedFieldIds'], () => {
        if (cursor.selectedRecordIds.length > 0) {
            const selectedId = records.find((value) => {
                if (cursor.selectedRecordIds[0] === value._id) {
                    return value
                }
            })
            setCellValue(selectedId.getCellValueAsString(cursor.selectedFieldIds))
        }
    })

    return (
        <div>
            <div>{cellValue}</div>
        </div>
    )
}

initializeBlock(() => <HelloWorldBlock />);
1 Solution

Accepted Solutions
Billy_Littlefie
7 - App Architect
7 - App Architect

Hi @harshal,

To do this, you could iterate over the fields in the table, and use extract each cell value using Record.getCellValueAsString for each field (like you’ve already got setup!). You could also pair this with useRecordById to help with extracting the selected record:

useLoadable(cursor);

const base = useBase();
const table = base.getTableByName('Forex Cards');
const selectedRecord = useRecordById(table, cursor.selectedRecordIds[0] ?? '');
useWatchable(cursor, 'selectedRecordIds');
const [cellValuesByFieldName, setCellValuesByFieldName] = useState({});

useEffect(() => {
    const newCellValuesByFieldName = {};
    if (selectedRecord) {
        for (const field of table.fields) {
            newCellValuesByFieldName[field.name] = selectedRecord.getCellValue(field);
        }
    }
    setCellValuesByFieldName(newCellValuesByFieldName);
}, [selectedRecord, table.fields]);

See Solution in Thread

1 Reply 1
Billy_Littlefie
7 - App Architect
7 - App Architect

Hi @harshal,

To do this, you could iterate over the fields in the table, and use extract each cell value using Record.getCellValueAsString for each field (like you’ve already got setup!). You could also pair this with useRecordById to help with extracting the selected record:

useLoadable(cursor);

const base = useBase();
const table = base.getTableByName('Forex Cards');
const selectedRecord = useRecordById(table, cursor.selectedRecordIds[0] ?? '');
useWatchable(cursor, 'selectedRecordIds');
const [cellValuesByFieldName, setCellValuesByFieldName] = useState({});

useEffect(() => {
    const newCellValuesByFieldName = {};
    if (selectedRecord) {
        for (const field of table.fields) {
            newCellValuesByFieldName[field.name] = selectedRecord.getCellValue(field);
        }
    }
    setCellValuesByFieldName(newCellValuesByFieldName);
}, [selectedRecord, table.fields]);