Skip to main content

I have a TablePickerSynced that I’d like to filter the options for. I’ve got the element conditionally disabled based on the presence of a selection in another TablePickerSynced:


<FormField label="Which table holds the Events/Bookings?">

    <TablePickerSynced

        globalConfigKey={GlobalConfigKeys.APPOINTMENTS_TABLE_ID}

        onChange={() => apptCheckTablesAreNotSame()}

        size="large"

        maxWidth="350px"

        disabled={!props.globalConfig.get(GlobalConfigKeys.PEOPLE_TABLE_ID)}

    />

</FormField>

…but I’d also like the Tables available to be picked in this second TablePickerSynced to be filtered to only include those Tables to which the table selected in the first TablePickerSynced (props.globalConfig.get(GlobalConfigKeys.PEOPLE_TABLE_ID)) has a Linked Record relationship.


Is this possible? I don’t see anything in the documentation that would indicate that it is, but I know the FieldPicker can at least disable certain options within the picker dropdown, so it seems like this kind of thing should be feasible.

Hi Jeremy,


This isn’t currently possible with a TablePicker - I’ve filed a task on our end to look at adding this!


You could implement this by manually filtering the tables and using a SelectSynced:


const base = useBase();

const linkedTables = base.tables.filter(table => {

    return yourCondition; // replace with your logic

});

const linkedTableOptions = linkedTables.map(table => {

    return {value: table.id, label: table.name};

});



...



return <SelectSynced

    options={linkedTableOptions}        

    globalConfigKey={GlobalConfigKeys.APPOINTMENTS_TABLE_ID}

/>

Hi Jeremy,


This isn’t currently possible with a TablePicker - I’ve filed a task on our end to look at adding this!


You could implement this by manually filtering the tables and using a SelectSynced:


const base = useBase();

const linkedTables = base.tables.filter(table => {

    return yourCondition; // replace with your logic

});

const linkedTableOptions = linkedTables.map(table => {

    return {value: table.id, label: table.name};

});



...



return <SelectSynced

    options={linkedTableOptions}        

    globalConfigKey={GlobalConfigKeys.APPOINTMENTS_TABLE_ID}

/>

Thanks, @Emma_Yeap - I was working on this very thing last night and couldn’t quite get it. This will help.

Reply


Terms & Conditions