Skip to main content

New and Delete

Next, we add the JavaScript event-handlers for the New and Delete buttons.

Add the following function to HomePage.cls:


/// Create new object via dataModel
ClientMethod newContact() [ Language = javascript ]
{
  var controller = zenPage.getComponentById('contactData');
  var contactFormGroup=zenPage.getComponentById("contactFormGroup");
  contactFormGroup.setProperty('hidden',false);
  controller.createNewObject();
}

This function is the event-handler for the New button. It uses the dataController to create a new Contact object. The dataController in turn invokes the server-side %OnNewSource method in ContactModel to instantiate the new Contact. Note that the Contact is not stored in the database until the user presses Save.

Add the following function to HomePage.cls:


 /// Delete current item from database
ClientMethod deleteContact() [ Language = javascript ]
{
  var controller = zenPage.getComponentById('contactData');
  controller.deleteId(controller.getModelId());
  var table = zenPage.getComponentById('contactTable');
   //refresh data in contact table
  table.executeQuery(true);
  controller.update();
 }

This function is the event-handler for the Delete button. It uses the dataController to delete the current Contact from the database. The dataController in turn invokes the server-side %OnDeleteSource in ContactModel to delete the Contact. After deleting the Contact, the function uses the tablePane executeQuery method to refresh the data in the table.

FeedbackOpens in a new tab