Docs

Docs

Loading & Saving Form Data

Loading data to Binder and submitting it for saving.
Video tutorial
Learn Vaadin fundamentals through short video tutorials.
Learn by watching

After your bindings are set, 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.

Source code
TypeScript
this.binder.read(person);

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

Source code
TypeScript
this.binder.reset();

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

Source code
TypeScript
this.binder.clear();

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.

Using submitTo() can be beneficial:

  • Binder can track the submission progress, which is useful for disabling a save button, for instance, when a submission is ongoing.

  • Submission failures are applied to the form fields, automatically. Therefore. there is no need to do an explicit try-catch.

  • Submission overall error can be handled globally using a promise’s .catch block.

Below is an example in which submitTo() is set to submit to an endpoint method:

Source code
TypeScript
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.

Source code
TypeScript
private binder = new Binder(this, PersonModel, {
  onSubmit: viewEndpoint.savePerson
});

binder.submit();