Overwriting default event handlers for add/update/delete

Hello Webix Support,

Could you please provide assistance regarding event handlers for add/update/delete operations in the Mobile Scheduler?

Our use-case is the following: when users add/update/delete appointments in the Mobile Scheduler our code sends asynchronous Ajax calls to our PHP/HTTP server to handle those operations.
Currently our Ajax calls are sent from within onAfterAdd/onStoreUpdated/onAfterDelete event handlers that we’ve added to our scheduler.
However, at times our PHP/HTTP server fails to perform the requested Ajax action and returns a 5XX HTTP error.

Unfortunately the default event handlers coded into the Mobile Scheduler process the add/update/delete operations before our server responds.
As a result in the scheduler UI an event is being created/updated/deleted despite the data model not being modified on the server side.

Please note that our data model is somewhat complex, so I don’t think we can use the PHP Data Connector directly (assuming that this would potentially solve our problems). We’re also using custom event templates, with additional fields compared to the default Mobile Scheduler set-up.

I’ve tried attaching “onItemClick” event handlers to the “save” and “delete” buttons on top of the default event handlers instead of attaching onAfterAdd/onStoreUpdated/onAfterDelete handlers. This doesn’t solve our problem though – it seems impossible to force our “onItemClick” event handlers to be executed before the default ones.
I’ve also tried detaching the default event handlers from “save” and “delete” buttons using the “detachEvent” handler method, but was unable to – looking at the mobile scheduler source code the default handlers do not seem to have an ID defined which we could use to detach them.

Could you please advise how best to address our use-case?

Best regards,
Jakub Kornas

Hello Jakub,

For add and delete operations you can use the cancellable events prefixed with “onBefore-”.

When the handler of such event returns false, the further action is not performed. So you can send the Ajax call and, in case of the successfull response, you can add and delete the event items manually (you will need to provide some flag to avoid recursion).

$$("scheduler").data.attachEvent("onBeforeAdd", function(text, data){ 
        webix.ajax().then(functon(){
               $$("scheduler").add(data.json());
         });
         return false;
});

$$("scheduler").data.attachEvent("onBeforeDelete", function(){
        //ajax call, delete item on success
        return false;
});

Unfortunately, for updates there’s no such blockable event. So the only thing you can do is to revert the update in case of a serverside error.

Hello @Helga,

Thank you very much for your response - very helpful!

I’ve applied your recommended approach for the delete operation by adding the onBeforeDelete event handler.
For add and update operations I ended up hiding the default “save” button, creating my own and attaching an “onItemClick” event handler to it. This solved my problem.

For future I’d have two recommendations:

1. To document the existence of onBeforeAdd and onBeforeDelete events - I haven’t found those events mentioned in the Mobile Scheduler documentation.
2. To add IDs to the default “onItemClick” event handlers, especially for “save” and “delete” buttons and to document those IDs in Mobile Scheduler documentation. I don’t think that this would require a major code change and I think it would be very useful - it would allow users of the Mobile Scheduler to detach those default event handlers and replace them with their own handlers.

Best regards,
Jakub