Documentation versions (currently viewingVaadin 24)

Loading & Saving Form Data

Loading data to Binder and submitting it for saving.

After your bindings are set up, you’ll need to fill the bound UI components with data from your business objects.

Loading Data to Binder

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

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


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


Saving Data

You can use submitTo() to submit a value to a callback. The submitTo() method is an asynchronous function, so you can use await to wait for the result.

The benefits of using submitTo() 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 use submitTo() to submit to an endpoint method, as follows:

await this.binder.submitTo(viewEndpoint.savePerson);

Alternatively, you can set up an onSubmit() callback in a configuration object when creating Binder. Then, when submitting, you can call the binder.submit() method.

private binder = new Binder(this, PersonModel, {
  onSubmit: viewEndpoint.savePerson