Reusable lookup components

Lookup components let users select records from a DataObject. When a lookup is used inside a form bound to a DataObject, the component can access the surrounding DataObject context and update fields based on the selected record.

Accessing DataObject context

useDataObject and useCurrentRow from @olenbetong/appframe-react retrieve the bound DataObject and its current row. The BoundLookup component in @olenbetong/appframe-mui uses these hooks internally, exposing the active record so selections can update its fields.

Applying field changes on selection

Provide a getChanges callback that maps values from the selected item to the bound DataObject. Each field returned from getChanges is written with currentRow when the user picks an option.

Example: Fleet transport work order location

The WorkOrderLocationLookup component from the fleet-transport-dashboard app uses BoundLookup to update the work order's location when a workshop is selected:

import type { WorkOrdersRecord, WorkshopsRecord } from "@olenbetong/appframe-data";
import { useCurrentRow, useDataObject } from "@olenbetong/appframe-react";
import { BoundLookup } from "@olenbetong/appframe-mui";

export function WorkOrderLocationLookup() {
	let workOrders = useDataObject<WorkOrdersRecord>();
	let row = useCurrentRow(workOrders);
	// row.WorkLocation contains the current value

	return (
		<BoundLookup<WorkOrdersRecord, WorkshopsRecord>
			dataObject={dsWorkshops}
			displayField="WorkLocation"
			getChanges={(workshop) => ({
				WorkLocation: workshop?.LocationID ?? null,
			})}
		/>
	);
}

BoundLookup reads and writes the WorkLocation field on the active work order record.