Read-Write Datasets and the Unexpected Save

If you use a dataset in read-write mode, watch out for some behaviour that you may not be expecting. When you change data in your dataset and then move to another item, your dataset will automatically save your changes without you hitting submit.

To see what's happening, let’s take a common use case where we have a collection with existing data, a table to display that data, and a set of input elements below the table to allow the visitor to edit the selected row. We have buttons for Submit, and Delete, and New connected to the submit, remove, and new dataset actions. The table, the input elements and the buttons, are all connected to a read-write dataset.

As the visitor clicks on each row in the table, the values of the input elements under the table are updated with the values of the selected row. The visitor can now edit the contents of a row and click submit to save the data.

Our site visitor clicks on the Mercedes row and the dataset automatically populates our connected input elements with the selected row’s data. They change the Make field to “Mercedes Benz”. Now, if they select another row in the table, the change to “Mercedes Benz” will be saved to the collection, without hitting the submit button.

Why does this happen ? The input elements are connected to the dataset, so editing their contents directly updates the dataset. When the dataset’s index changes, the save() function is triggered, so any changes in the current item will be saved. Selecting another item, creating a new item, or calling setCurrentIemIndex() will cause a change to the currentItemIndex and trigger a save.

So what can you do if we don't want this to happen ?

The simplest option, avoiding any code, is to add an Undo button, connected to the dataset’s revert action. After the site visitor makes a change and clicks on another item, they can hit the Undo button and return the changed item to its original values. Note that one more click on the table, selecting another item, saves the change to the collection and the revert option is lost.

The second option, if you don't mind a bit of coding, is to handle the submit button and input elements manually and not connect them to the dataset.

There are two simple steps:

Step 1. Add an on_click function to populate the input elements with the current item from the table:

export function myTable_click(event) {
  // populate the input elements with the values from the current item.  
  let currentItem =  $w('#myDataset').getCurrentItem()
  $w('#inputMake').value = currentItem.make;
  $w('#inputModel').value = currentItem.model;
  $w('#inputYear').value = currentItem.year;
}

Step 2. Add an on_click function to your submit button to update the dataset and save it to the collection:

export function buttonSubmit_click(event) {
    let newCurrentItem={make: "", model:"", year: ""};
    //get the value from the input elements
    newCurrentItem.make=$w('#inputMake').value;
    newCurrentItem.model=$w('#inputModel').value;
    newCurrentItem.year=$w('#inputYear').value;
    // set the values in the dataset and save.
    $w('#myDataset').setFieldValues(newCurrentItem);
    $w('#myDataset').save();
}

Now the current item in the dataset is unchanged until the submit button is clicked. Selecting another item in the table simply….selects another item in the table.