Docs

Docs

Loading & Saving Form Data

Loading data to Binder and submitting it for saving.

Once your bindings are set up, you are ready to fill the bound UI components with data from your business objects.

Loading Data to Binder

You can use the read() method from the UseFormResult instance to read values from a business object instance into the UI components.

import { useEffect } from 'react';
import { useForm } from '@hilla/react-form';

import { PersonEndpoint } from 'Frontend/generated/endpoints';
import PersonModel from 'Frontend/generated/com/example/application/PersonModel';

export default function PersonView() {
  const { read } = useForm(PersonModel);

  useEffect(() => {
    PersonEndpoint.loadPerson().then(read);
  }, [])

  // ...
}

Using reset() resets to the previous value, which is initially empty.

import { useForm } from '@hilla/react-form';

import PersonModel from 'Frontend/generated/com/example/application/PersonModel';

export default function PersonView() {
  const { reset } = useForm(PersonModel);

  return (
    <section>
      // other form fields ...
      <Button onClick={reset}>Reset</Button>
    </section>
  );

}

You can use the clear() method to set the form to empty.

import { useForm } from '@hilla/react-form';

import PersonModel from 'Frontend/generated/com/example/application/PersonModel';

export default function PersonView() {
  const { clear } = useForm(PersonModel);

  return (
    <section>
      // other form fields ...
      <Button onClick={clear}>Clear</Button>
    </section>
  );

}

Saving Data

You can define a submit callback when calling useForm to configure the onSubmit behavior of the binder.

The benefits of configuring such a submit behavior for the binder are:

  • The binder can track the submission progress, such as to disable a save button when a submission is ongoing.

  • Submission failures are handled automatically, so there is no need to do an explicit try-catch.

For example, you can define a submit behavior to submit to an endpoint method, as follows:

import { useForm } from '@hilla/react-form';

import { PersonEndpoint } from 'Frontend/generated/endpoints';
import PersonModel from 'Frontend/generated/com/example/application/PersonModel';

export default function PersonView() {
  const { model, submit, field } = useForm(PersonModel, {
      onSubmit: async (person) => {
          await PersonEndpoint.savePerson(person);
        }
      });

  return (
    <section>
      <TextField label="Full name" {...field(model.fullName)}></TextField>
      <Button onClick={submit}>Save</Button>
    </section>
  );

}