MuiServerLookup#

@palmyralabs/rt-forms-mui · form/MuiServerLookup.tsx

Overview#

Single- or multi-value lookup backed by a Wire store — debounced query by queryAttribute, stores idAttribute, displays labelAttribute / displayAttribute. Built on MUI Autocomplete; the only form component in the MUI package that uses useServerLookupFieldManager instead of useFieldManager.

Props — IServerLookupInput#

Common field props plus:

Prop Type Purpose
queryOptions { endPoint, queryAttribute, labelAttribute, idAttribute, storeOptions?, delay? } Wire query descriptor
displayAttribute string | string[]? Attribute(s) shown in the dropdown row
multiple boolean? Store an array of ids
renderOption (item) => ReactNode? Custom row renderer
defaultValue any? Initial value(s)

Plus MUI AutocompleteProps passthrough (size, disableClearable, filterOptions, …).

Ref — IServerLookupField#

interface IServerLookupField {
  focus(): void;
  getValue(): any;
  setValue(v: any): void;
  clear(): void;
}

Example#

<MuiServerLookup
  attribute="manufacturerId"
  label="Manufacturer"
  queryOptions={{
    endPoint: '/mstManufacturer',
    queryAttribute: 'name',
    labelAttribute: 'name',
    idAttribute: 'id',
    delay: 250,
  }}
  displayAttribute={['name', 'contactEmail']}
/>