How to handle failure of server side updates of DataStore components?

Webix JS
#1

Many of the DataStore components (such as Kanban and others) have the ability to save data back to a server using either a URL or a custom function.
But, I can’t find any way for that to fail and have it display properly in the UI.
So, if a user performs an operation, lets say moves something in the Kanban and the update to the server fails, then the user doesn’t see any change. The board just looks the same.

For example:

 {
	view: 'kanban', id: 'board',
	cols: [
		{
			header: 'Planning',
			body: { view: 'kanbanlist', status: 'S_0', type: 'cards' }
		},
		{
			header: 'Booking',
			body: { view: 'kanbanlist', status: 'S_10', type: 'cards' }
		},
	],
	save: {
		trackMove: true,
		update: function (id, operation, update) {

			//Send to server using custom API
			
			//What if this fails? there is no way to trigger UI to undo
			

		}
	},
}

If the customer API fails, even for normal reasons like Permissions or Missing data, or other business rule. then there appears to be no way to revert the UI.

Am I missing something?

#2

Hi @nathan_mps ,
You can try to use webix.ajax operations.
Please, check this thread: customizing kanban with ajax

#3

So why doesn’t this work?
Ajax example that always rejects.
In this case, by “work”, I mean it should always fail.

#4

The component provides a hook for the data saving logic, and allows to define a custom reaction on data saving errors. There is no a default reaction as it need to be different based on your style guidelines and UX.

Please check

https://snippet.webix.com/9muhrrhd

  const dp = webix.dp("demo");
  dp.attachEvent("onBeforeSaveError", function(id, status, obj, details){
    dp.ignore(() => {
    	$$("demo").updateItem(id, { $css:"broken" });
    })
  })
#5

For any others that might run into this, let me expand on Maksim’s answer.

For the best results you should consider a couple things.
Make sure that your API returns proper messages back so this event will get triggered properly:
{'status':'error', 'id':5 }

We’ve been using webix for several years and we have found it best to just make your api calls match what Webix is expecting (in this case the DataProcessor ). That meant less front-end code.

I suggest not dealing with this in the Ajax event handler unless your app is very small and is using a limited set of api.

For those new to Webix, remember that you can add additional data to the Kanban (or any other) data objects as long as the names don’t overlap with the existing fields. So it is easy to handle the server failure if by manually adding a “originalStatus” property in your server api or even during load:
{status: 'closed', originalStatus: 'open', text: 'Task I want to close, but server says no' }

Then it becomes trivial to move the item back:
Here is an example