Custom Edit Form WebParts, How to Prevent Overlapping Saves

Question

I'm working on building a custom form webpart that will be basis for all of our custom forms going forward. A single webpart to handle New, Display, and Edit. This will facilitate our migration from JSLink/JSOM overrides that we currently have in place. I've been searching for a few days and I can't see any conversations about preventing overlapping saves. This was an OTB feature that just worked. I'm using PnP ListItem update to post item updates.

list.items.getById().update (https://pnp.github.io/pnpjs/sp/items.html)

As far as I can tell, there is no detection or error returned that allows me to address overlapping saves.

How would I implement a feature that prevents overlapping saves in my edit form using SPFx/PnP?

-> Update

As per the answer below, I was able to include the etag value from the current item in the single item update. Overlapping saves returned a 412 error. Still working on handling this error because of the format of the error returned isn't as I expected.

I am using this code to call the update and include the etag. In the current item, the etag is stored in 'odata.etag'.

ItemList.items.getById(listItemId)
.update(itemProperties, this.props.CurrentItemJSON['odata.etag'])
.then(...MORE CODE HERE)

In the console, I'm getting this message.

Error: Error making HttpClient request in queryable: [412] ::> {"responseBody":{"odata.error":{"code":"-1, Microsoft.SharePoint.Client.ClientServiceException","message":{"lang":"en-US","value":"The request ETag value '\"23\"' does not match the object's ETag value '\"24\"'."}}},"responseHeaders":{}} at parsers.ts:59

Answer 1

If I understand you correctly you want to prevent a concurrency issue where two people would save the same item and would overwrite date.

With the SharePoint Rest api this is managed with the etag property. If you do a get request, you'll receive an etag value. When you do a patch request you need to provide this value, and if it's not the same as the current value, it will error because it's not the same. There's a very thorough blog post on this concept: https://sympmarc.com/2015/10/23/using-etags-in-sharepoint-rest-calls-to-manage-concurrency-control/

I looked at the docs for PnPjs and in the update multiple items you see that the etag will be set to a "*" saying to ignore concurrency issues:

list.items.getById(1).inBatch(batch).update({ Title: "Batch 6" }, "*", entityTypeFullName).then(b => {
    console.log(b);
});

I would assume you are able to do the same with a single update and set it to the correct etag value to prevent concurrency issues.