Editing Data

In A First Program we retrieved data from the server and displayed it in an HTML table. That example was read-only. On this page we build on it and show how to insert, update and delete rows, and how to send those changes back to the server.

Data Abstract for JavaScript tracks every change you make to a DataTable in memory. Nothing is sent to the server until you call the RemoteDataAdapter's applyUpdates method, at which point all pending inserts, updates and deletes for that table are transmitted in a single batch.

This page assumes you already have an Adapter and a filled Table object, as created in A First Program.

Inserting a row

To add a new record, call appendRow to create an empty row, fill in the fields with setFieldValue, and then call applyUpdates:

Table.appendRow();
Table.setFieldValue("Name", "Marketing");
Table.setFieldValue("Phone", "(873)456-78-77");

Adapter.applyUpdates(Table, function(deltas) {
  // changes were sent to the server
}, RemObjects.UTIL.showError);

setFieldValue always operates on the current row, which is the row appendRow just created and made current.

Updating a row

To modify an existing record, first make it the current row with locate (which finds the first row where a field matches a value), change the fields, and apply the changes:

if (Table.locate("Id", 1)) {
  Table.setFieldValue("Phone", "(873)456-78-00");

  Adapter.applyUpdates(Table, function(deltas) {
    // update was sent to the server
  }, RemObjects.UTIL.showError);
}

Deleting a row

To remove a record, make it current with locate and call deleteRow. The row is moved to the table's deletedRows collection and the deletion is sent to the server on the next applyUpdates:

if (Table.locate("Id", 2)) {
  Table.deleteRow();

  Adapter.applyUpdates(Table, function(deltas) {
    // delete was sent to the server
  }, RemObjects.UTIL.showError);
}

Inspecting the result

The success callback of applyUpdates receives a Deltas object that describes what happened to every change on the server. This is where you find out whether a change was accepted or rejected (for example by a business rule or a database constraint).

Deltas.deltas is an array holding one Delta per updated table; you can also look one up by table name with findByName. Each Delta exposes a data array of Change records, and every Change has:

  • changetype — "insert", "update" or "delete".
  • status — "resolved" if the server accepted the change, "failed" if it was rejected, or "pending" if it was not processed.
  • message — the error text when status is "failed".
  • old / new — the field values before and after the change.
Adapter.applyUpdates(Table, function(deltas) {
  var delta = deltas.findByName("deps");
  for (var i = 0; i < delta.data.length; i++) {
    var change = delta.data[i];
    if (change.status === "failed")
      console.log("Change " + change.changetype + " failed: " + change.message);
  }
}, RemObjects.UTIL.showError);

You can also handle failures centrally by overriding the adapter's onChangeFail method, which is called once for each Change that could not be applied.

Batching changes across multiple tables

applyUpdates accepts an array of tables as well as a single table. When you pass several tables, all of their pending changes are sent together, and the returned Deltas object contains one Delta for each table:

Adapter.applyUpdates([Orders, OrderDetails], function(deltas) {
  // both tables were updated in one round trip
}, RemObjects.UTIL.showError);

Full example

The snippet below extends A First Program: after loading the deps table it adds a new department, sends it to the server, and refreshes the on-screen table.

 

<script>
  var Adapter = new RemObjects.DataAbstract.RemoteDataAdapter("http://localhost:7099/bin/");
  var Table = new RemObjects.DataAbstract.DataTable("deps");

  Adapter.login("User=simple;Password=simple;Domain=DASamples;Schema=Simple", function() {
    Adapter.getData(Table, RemObjects.DataAbstract.Util.createRequestInfo(true, -1, '', []),
      function() {
        Table.appendRow();
        Table.setFieldValue("Name", "Marketing");
        Table.setFieldValue("Phone", "(873)456-78-77");

        Adapter.applyUpdates(Table, function() {
          new RemObjects.DataAbstract.Views.HtmlTableView(Table, 'depsTable');
        }, RemObjects.UTIL.showError);
      }, RemObjects.UTIL.showError)
  }, RemObjects.UTIL.showError);
</script>

When you load the page in a browser, the deps table is displayed with the newly added Marketing department already sent to the server and shown in the last row:

Editing data result