Skip to main content
Solved

Can I Filter Tables available to TablePicker?

  • June 10, 2020
  • 2 replies
  • 29 views
J
Forum|alt.badge.img+18

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.

Best answer by Emma_Yeap

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}
/>

    2 replies

    E
    Forum|alt.badge.img+11
    • Emma_Yeap
    • Inspiring
    • 55 replies
    • Answer
    • June 10, 2020

    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}
/>
    J
    Forum|alt.badge.img+18
    • Jeremy_Oglesby
    • Author
    • Inspiring
    • 1691 replies
    • June 10, 2020

    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.


    Terms & ConditionsAccessibility statement