Save the date! Join us on October 16 for our Product Ops launch event. Register here.
Mar 09, 2021 02:01 AM
Hopefully someone can help.
I’m using the airtable API to build a custom app. I want to have a record picker which displays a selection of records, upon selecting the record the resulting report (data based on selection) is rendered.
I’ve been playing around and I’m fairly certain “SelectSynced” is going to be my friend. However I’m struggling with a lack of worked code examples (they mostly show table or view selections).
Namely; I would like to
a) render a < select> populated with data from a record query
b) once user has made a selection use the select value to render data from the chosen record
Link to api ref for react component: Airtable Blocks SDK
//WIP - hard -coded values for testing
import {
useRecords,
useBase,
useGlobalConfig,
initializeBlock,
Select,
SelectSynced,
} from '@airtable/blocks/ui';
import React, {useState} from 'react';
const GlobalConfigKeys = {
selectedOption: "Joseph Lee"
};
//coachnames
const options = [
{ value: "Pear", label: "Pear" },
{ value: "Joseph Lee", label: "Joseph Lee" },
{ value: "Banana", label: "Banana" }
];
const selectSyncedExample = (
<SelectSynced options={options} globalConfigKey="selectedOption" width="320px" />
);
function GetRecords() {
const base = useBase();
const table = base.getTableByName('Coaches');
const view = table.getView('Competencies');
let records;
//sorting and filtering
const opts = {
filterByFormula: "NOT({Assessment - competencies} = '')",
sorts: [
// sort by someField in ascending order...
{field: 'Name'},
]
};
// Returns all records in a table, sorting the records by values in the specified fields
records = useRecords(table, opts);
return (
<div>
<SelectSynced options={options} globalConfigKey="selectedOption" width="320px" />
{console.log(SelectSynced.SelectOptionValue)}
<ul>
{records.map(record => {
const competencies = record.getCellValue('Assessment - competencies');
const coachNameOfRecord = record.getCellValue('Name');
//don't return records for coaches without competencies - filtering not working
if (competencies === null) {
return null;
}
if (coachNameOfRecord !== 'Joseph Lee'){
return null;
}
return (
<li key={record.id}>{record.name}</li>
);
})}
</ul>
</div>
);
}
initializeBlock(() => <GetRecords />);
Mar 11, 2021 03:34 PM
Replying in case someone is searching for a similar solution. I ended up using the following to create what I required:
Unfortunately I don’t seem to be able to limit the recordset itself aside from using an airtable view. I had no success with filterformula in the userecords() function. If someone has a more efficient way of returning one record base on user selection please add it here.