Hilla Documentation

Loading and 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 in the binder to read values from a business object instance into the UI components.

this.binder.read(person);

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

this.binder.reset();

There is also a clear() method, which sets the form to empty.

this.binder.clear();

Saving Data

You can use submitTo() to submit a value to a callback. Notice that submitTo() 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 just call the binder.submit() method.

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

binder.submit();