Common pattern: dependent dropdowns

Build a Country → State → City cascade. The pattern works for any parent-filtered Lookup chain.

A classic forms problem: pick a Country, then the State dropdown only shows states in that country, then the City dropdown only shows cities in that state. Here's the SharePoint Forms365 recipe.

The data

Three SharePoint lists in the same site:

  • Countries, Title only
  • States, Title, Country (Lookup → Countries)
  • Cities, Title, State (Lookup → States)

On your form, three Lookup fields:

  • Country → Countries (display column: Title)
  • State → States (display column: Title)
  • City → Cities (display column: Title)

The recipe

In the form's Code drawer, add the cascade logic:

Cascade Country → State → City

f365.events.onChange('Country', (countryId) => {
  // Re-target the State lookup to only show states with this country.
  const state = f365.field('State').asLookup();
  state.filter = countryId ? `CountryId eq ${countryId}` : '';
  state.value = null;

  // Clear City too, its filter depends on State.
  f365.field('City').value = null;
  f365.field('City').asLookup().filter = '';
});

f365.events.onChange('State', (stateId) => {
  const city = f365.field('City').asLookup();
  city.filter = stateId ? `StateId eq ${stateId}` : '';
  city.value = null;
});

That's it. The Lookup's filter setter triggers a refetch on the next autocomplete keystroke; setting value = null clears any stale selection.

Why this works

  • The Lookup field exposes a typed handle via asLookup()
  • The handle's filter property accepts an OData $filter clause applied to the target list
  • Setting value = null clears the field's current selection without unmounting it

Variants

  • Pre-select the parent. On onLoad, set Country first; the cascade fires synchronously.
  • More than three levels. The same pattern chains, onChange of City sets Suburb, etc.
  • Source data not in SP, replace the Lookups with Choice fields and use f365.http to fetch options from an external API in onChange.