Binding form fields

Binding form controls directly to Appframe data objects keeps UI and data in sync without manual state handling. This guide walks through setting up DataObjectProvider, accessing the object with useDataObject, and binding inputs with BoundTextField.

Provide the data object

Wrap a component tree with DataObjectProvider to expose a data object through context.

import { DataObjectProvider } from "@olenbetong/appframe-react";
import { dsMyDataObject } from "~/appframe";

function MyForm() {
  return (
    <DataObjectProvider dataObject={dsMyDataObject}>
      {/* form fields */}
    </DataObjectProvider>
  );
}

Access the data object

Components deeper in the tree can use the useDataObject hook to interact with the bound object directly.

import { useDataObject } from "@olenbetong/appframe-react";

function SaveStatus() {
  let dataObject = useDataObject();
  return <div>{dataObject.isDirty() ? "Unsaved changes" : "All saved"}</div>;
}

Bind inputs

BoundTextField ties an MUI text field to a specific field on the current row of the data object.

import { BoundTextField } from "@olenbetong/appframe-mui";

<DataObjectProvider dataObject={dsMyDataObject}>
<BoundTextField field="Title" label="Title" />
</DataObjectProvider>

Appframe‑mui also includes bound versions of other common inputs:

• BoundCheckbox

• BoundSwitch

• BoundSelect

• BoundInput

• BoundDatePicker

• BoundDateTimePicker

• DataObjectSelect

• BoundLookup and BoundLookupEdit for lookup dialogs

Example from fleet-transport-driver

The fleet-transport-driver app binds the customer number like this:

<BoundTextField
  slotProps={{ htmlInput: { readOnly: !canUpdate } }}
  id="ticketCustomerNo"
  field="CustomerNo"
  label={getLocalizedString("Customer number")}
/>

Common pitfalls

• Unmounted provider – useDataObject and bound inputs require a parent DataObjectProvider. Rendering them outside the provider or unmounting it prematurely will throw errors.

• Uncontrolled inputs – Avoid passing value or onChange to bound components. They manage state internally; overriding these props leads to uncontrolled input warnings and lost changes.