Apr 23

Written by: Michael Washington
4/23/2013 1:02 PM 

You have multiple options when you programmatically delete data in the Visual Studio LightSwitch HTML Client. Unlike the insert and update tasks, there is no wizard to allow you to easily create a button to allow a user to delete data. You must write a bit of code.

The article An End-To-End Visual Studio LightSwitch HTML5 Application provides an example of the most common method.

The issue you may run into is what happens after the data is deleted. Do you want the user to stay on the page or automatically navigate away to the previous page? We can see our options in a Visual Studio LightSwitch Forum thread that was answered by Huy Nguyen.

The LightSwitch API methods that you will want to learn are:

• commitChanges
  • Runs validation on the current active screen tab
  • If there are no validation errors, calls the data service saveChanges()
  • Navigates back to previous screen
• applyChanges
  • Runs validation on the current active screen tab
  • If there are no validation errors, calls the data service saveChanges()
• cancelChanges
  • Invokes data service discardChanges()
  • Navigates back to previous screen
• discardChanges
  • Invokes data service discardChanges()

The Sample Application

The sample application has three delete buttons on the Browse Customers screen. We have restricted delete enabled so that you cannot delete a Customer if that Customer has associated orders.

It has a normal Delete button. When you press it, nothing happens visually.

However, when you press a button to navigate away from the page…

… you are presented with a box to save or discard your changes.

It there are validation errors, they will show only if you select Save Changes.

The following code is used to implement this version:

 

myapp.BrowseCustomers.Delete_execute = function (screen) {
    screen.getCustomers().then(function (customers) {
        // Delete selected
        customers.deleteSelected();
    });
};

The following methods will explore alternative application flow scenarios.

commitChanges / cancelChanges

When we press the Commit Changes button…

… if there are validation errors, they show at this point.

The user is then navigated to the previous page.

The following code is used to implement this version:

 

myapp.BrowseCustomers.CommitChanges_execute = function (screen) {
    screen.getCustomers().then(function (customers) {
        // Delete selected
        customers.deleteSelected();
        // Save changes
        myapp.commitChanges().then(null, function fail(e) {
            // If error occurs, show the error.
            msls.showMessageBox(e.message, { title: e.title }).then(function () {
                // Cancel Changes
                myapp.cancelChanges();
                throw e;
            });
        });
    });
};

 

applyChanges / discardChanges

When we press the Apply Changes button…

… if there are validation errors, they show at this point.

The user is not navigated away, and remains on the page.

The following code is used to implement this version:

 

myapp.BrowseCustomers.ApplyChanges_execute = function (screen) {
    screen.getCustomers().then(function (customers) {
        // Delete selected
        customers.deleteSelected();
        // Save changes
        myapp.applyChanges().then(null, function fail(e) {
            // If error occurs, show the error.
            msls.showMessageBox(e.message, { title: e.title }).then(function () {
                // Discard Changes
                screen.details.dataWorkspace.ApplicationData
                    .details.discardChanges();
            });
        });
    });
};

 

Special Thanks

A special thanks to Huy Nguyen for providing the the explanation of the API methods.

Download Code

The LightSwitch project is available at http://lightswitchhelpwebsite.com/Downloads.aspx

(you must have Visual Studio 2012 Update 2 installed to run the code)