Block SDK: Invalid Airtable API key specified

[Sumit_Kapoor]

Is there a way to create a Dropdown Menu inside a custom Block to filter by own configured Airtable Views?

Airtable

Airtable | Everyone's app platform

Airtable is a low-code platform for building collaborative apps. Customize your workflow, collaborate, and achieve ambitious outcomes. Get started for free.

I’am not quite sure if this is what would work for my case.
Is there any Example Demo/Code for that?

Thanks!

[Rick_Waldron · Accepted solution]

Can I assume that you’re programming this custom Block? If so, then I believe what you’re looking for is ViewPicker:

import React, { useState } from "react";
import { ViewPicker, useBase } from "@airtable/blocks/ui";
const ViewPickerExample = () => {
  const [view, setView] = useState(null);
  const base = useBase();
  const table = base.getTableByNameIfExists("Tasks");
  // If table is null or undefined, the ViewPicker will not render.
  return (
    <ViewPicker
      table={table}
      view={view}
      onChange={newView => setView(newView)}
      width="320px"
    />
  );
};

You can sync that up to globalConfig, with ViewPickerSynced:

import React from "react";
import { useBase, ViewPickerSynced } from "@airtable/blocks/ui";
const ViewPickerSyncedExample = () => {
  const base = useBase();
  const table = base.getTableByNameIfExists("Tasks");
  // If table is null or undefined, the ViewPickerSynced will not render.
  return (
    <ViewPickerSynced table={table} globalConfigKey="viewId" width="320px" />
  );
};