Lookup control

A richer Lookup picker, paginated grid, multi-column display, search across multiple fields.

The Lookup control is a heavier-weight alternative to the standard

Lookup field. Instead of a typeahead autocomplete, it opens a paginated grid where the user can sort, filter across multiple columns, and see related-list context before picking.

Unlike the standard Lookup field, which inherits its target list and display column from the bound SP column, the Lookup control points at a source list you pick explicitly in the property pane. The selected item's ID is stored as the field value.

Common properties

PropertyDescription
label
string
default: Lookup
Visible label.
description
string
Helper text.
required
boolean
default: false
Marks the field required.
readOnly
boolean
default: false
Disables editing, the linked item is still shown.

Type-specific properties

PropertyDescription
sourceListId
GUID
Source SharePoint list the picker reads from. Set via the property pane list picker.
sourceListTitle
string
Cached title of the source list, shown in the designer UI.
displayColumnInternalName
string
Internal name of the column on the source list whose value is shown in the grid and after selection.
allowMultiple
boolean
default: false
Allow selecting multiple items.

Quick-add, let users create a new source-list item inline

When Allow users to add a new item is on, the picker grows an "Add" command row that opens a modal to create a new item in the source list; it's saved immediately and auto-selected. Off by default. Configure it under Quick-add in the property pane, basic mode generates a create form from source-list columns you pick; advanced mode opens a saved Forms 365 form bound to the source list (takes precedence when set).

PropertyDescription
allowAdd
boolean
default: false
Master toggle. When on (and the user has Add permission on the source list), the dropdown shows the "Add" command row.
addLabel
string
default: Add
Text of the in-dropdown command row; the runtime appends the typed query, e.g. Add "Acme".
addSchema
Component[]
BASIC mode, the source-list columns the create form shows. Authored via "Choose fields…"; the display column is always included. Ignored when addFormId is set.
addFormId
string
ADVANCED mode, id of a saved form (bound to the source list) opened as the create modal. Takes precedence over addSchema.

JavaScript recipes

Read the linked item

// Single-select: F365LookupValue | null
const client = f365.field('Client').value as
  | { LookupId: number | null; LookupValue: string }
  | null;
const clientId = client?.LookupId ?? null;
const clientName = client?.LookupValue ?? '';
//   ^ for allowMultiple, value is an array of the same shape.

Show/hide a follow-up field based on selection

f365.events.onChange((e) => {
  if (e.fieldKey !== 'Client') return;
  f365.field('AccountNotes').visible = e.newValue != null;
});

Fetch a related field from the picked item

f365.events.onChange(async (e) => {
  if (e.fieldKey !== 'Client') return;
  const picked = e.newValue as { LookupId: number | null } | null;
  if (!picked?.LookupId) return;
  const item = await f365.sp.web.lists
    .getById('{source-list-guid}')
    .items.getById(picked.LookupId)
    .select('AccountManager', 'Tier')();
  f365.field('AccountManager').value = item.AccountManager;
  f365.field('Tier').value = item.Tier;
});

Require a selection before save

f365.events.onBeforeSave(async () => {
  if (f365.field('Client').value == null) {
    await f365.ui.showAlert('Pick a client before saving.');
    return false; // cancels the save
  }
  return true;
});

Related articles

  • Lookup field

    Search and pick from another SharePoint list, typeahead autocomplete with a configurable display column.

  • LinkedList field

    Edit child-list rows inline on the parent form, repeatable mini-grids backed by a related SharePoint list.