Help

Replicating form view single select UI component in an app

Topic Labels: Custom Extensions
694 1
cancel
Showing results for 
Search instead for 
Did you mean: 
Trevor_Shannon
4 - Data Explorer
4 - Data Explorer

I am making a data entry app that is similar to an Airtable Form View. For a certain field, I am looking for my users to choose a single item from a drop-down menu of available options. I am wondering if there is a way to replicate the select style used in the Airtable form views:

Screen Shot 2022-05-08 at 10.43.42 PM

I see the ChoiceToken React component and the Select React component in the Apps API reference, but I’m not sure how to populate the Select component with ChoiceTokens. My attempt led me to a Select component populated with blank options.

  const base = useBase();
  const newEntryTable = base.getTableByName("Example Table");
  const field = newEntryTable.getFieldByName("Choose One");

  function SelectExample() {
	  const [value, setValue] = useState(options[0].value);
	  return (
	    <Select
	      options={field.options.choices.map(choice => (
	        <ChoiceToken key={choice.id} choice={choice} marginRight={1} />
	      ))}
	      value={value}
	      onChange={newValue => setValue(newValue)}
	      width="320px"
	    />
	  );
	}

Resulting Select component:

Screen Shot 2022-05-08 at 10.48.39 PM

1 Reply 1

The select component can’t handle react subcomponents as arguments.

Use an external library to have fancy dropdowns. My apps use PrimeReact’s Dropdown or Multiselect components.