Row access and updates

SynergiWeb data objects track a selected row. The hooks useDataObject and useCurrentRow, together with the currentRow() method, make it easy to read and update this row inside React components.

useDataObject

useDataObject returns the nearest data object from context. Components use it to call data object methods such as currentRow() or endEdit().

useCurrentRow

useCurrentRow(dataObject) subscribes to changes in the data object's current row and returns a reactive row object. Reading a field from this object causes the component to re-render whenever that field changes.

currentRow()

currentRow() is a method on the data object that can read or update the current row:

  • dataObject.currentRow() – returns the entire current row.

  • dataObject.currentRow("Field") – returns the value of a field.

  • dataObject.currentRow("Field", value) – updates the field value.

Example: Timepicker in timekeeping-timereg

The Timepicker component from the timekeeping-timereg app binds directly to the current row:

const dataObject = useDataObject<any>();
const currentRow = useCurrentRow(dataObject);
const currentValue = currentRow[field];

function setTime(value: Date | string | null) {
	if (typeof value === "string") {
		return;
	}
	dataObject.currentRow(field, value);
}

In the real component the setTime function normalizes the value and then calls dataObject.currentRow(field, current) to store the time.

State propagation to bound components

Calling dataObject.currentRow(column, value) mutates the data object. Any component that used useCurrentRow to read the same column automatically re-renders with the new value. In Timepicker, selecting a time updates the bound field, and other components bound to that field immediately reflect the change without manual prop drilling.

Last updated

Was this helpful?