Scheduler addEvent(obj) set action to fire only upon new event created

Webix JS
#1

Good morning, I am attempting to set a condition within the addEvent(obj) using the MyBackend class. I am attempting to save the event information to my database table only after a new event is entered. Here is the code snippet:

addEvent(obj) {			
// This query should only fire when a new event is entered, but fires when the page loads causing an error due to the 'obj' being empty when page loads
		<cfquery datasource="#MyDataSource#">
			INSERT INTO gup_calendar_events(start_date, end_date, text, details, color, section, calendar)
			VALUES(obj.start_date, obj.end_date, obj.text, obj.details, obj.color, obj.section, obj.calendar)
		</cfquery>
// Used to test objects data, this alert only fires when a new event is entered	
		alert('Start Date: ' + obj.start_date + ', End Date: ' + obj.end_date + ', Text: ' + obj.text + ', Parameters: ' + obj.params);
		return webix.promise.resolve(obj);
						
			}
#2

Hello @DanTheProgrammer

Unfortunately, we aren’t quite experienced with ColdFusion, but from what I’ve learned, this code will not work as desired.
The Backend service is a client-side class that contains a set of methods to send data to the backend and manage responses.
JS code runs on the client-side, while the CF will be always processed on the server before the page is even fully loaded, and there is no way to run cfquery directly inside the JS function when it’s called.

If this information is relevant, I would suggest separating server-side CF operations from the client-side code and sticking with the regular requests to the server-side to send data/get the response (ColdFusion provides REST support)

#3

Thank you for the reply, I will look into setting up a REST service and getting the data sent from each event created. Another question related to this, when creating a new event, is there a way to check when the ‘Done’ button is clicked after filling out information for a new event? Is there a name on the DOM element of the ‘Done’ button that can be checked if it is clicked, in jQuery something like:

$(#nameOfDoneButton).click(function(){
      // Do some stuff
});

Thanks,

Daniel

#4

As the Scheduler is implemented as a modular single-page application (based on Webix Jet), this button has no global ID for direct access after init (and does not exist in DOM until the form is opened)

However, you can modify a module (ES6 class) and work with any UI config or method, including the one that is called when the Done button is clicked (similar to the customization you did to the Backend service):

  1. here’s an example of modifications in UI config: Code Snippet
  2. and here are the changes in a method that is called for the Done button: Code Snippet

The 2nd is more suitable if you plan to manipulate the data items/the sequence of data-saving methods.

Such changes may require observing the source code in order to build the most feasible solution that will correctly alter/extend the original logic.
The original code of the form is in the \sources\views\event\form.js of your package from the Client Area. The docs contain the View Class Map for easier navigation.

#5

Excellent, Thank you so much for your expertise. One last question for now, do I add the override for the ‘scheduler.views’ after the ‘scheduler.services.Backend’ separated by a comma:

           webix.ui({
					container:"box",	
					rows: [
						{
							view: "scheduler",
							compact: true,
							width: 450,
							date: new Date(),
							override: new Map([ [scheduler.services.Backend, MyBackend],
                            [scheduler.views["event/form"], CustomEventForm]     ])			
						}],			
					
				});
#6

Yes, this is the correct way - basically, override allows customization for all class-based modules in the app, regardless of their purpose (view/data service)

#7

Thank you for the reply, I added the new map just as I have with the above code, but the page errors out and blanks out the calendar. Do I need to setup the map a different way, perhaps add a new map after the Backend map? What would be the correct syntax to add multiple override functions?

Thanks,

Daniel

#8

but the page errors out and blanks out the calendar

Could you please specify the error?

Here’s a similar example: Code Snippet
override accepts only one Map instance with the list of all customized modules.
It is still possible that there are some errors in the custom code. During customization, please make sure that methods return values/objects/promises in the same format as default ones.

#9

Thank you, I did not initialize the class when adding the second map for the event/form. After adding the class, all works as intended.

Best!