You are here:   Blog
Register   |  Login

Apr 23

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

image

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

image

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.

clip_image002

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

clip_image003

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

clip_image004

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

clip_image005

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

clip_image006

When we press the Commit Changes button…

clip_image007

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

clip_image008

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

clip_image009

When we press the Apply Changes button…

clip_image010

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

clip_image011

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)

8 comment(s) so far...


Gravatar

Re: Deleting Data In The Visual Studio LightSwitch HTML Client

Sorry,
but, what is the getCustomers() ?
how did you calculate it?

Thanks

By Arenut on   6/3/2013 4:19 AM
Gravatar

Re: Deleting Data In The Visual Studio LightSwitch HTML Client

@Arenut - That is a screen collection. It may help to download the code so you can see everything.

By Michael Washington on   6/3/2013 4:21 AM
Gravatar

Re: Deleting Data In The Visual Studio LightSwitch HTML Client

Hello everyone,
does anyone know how to show which table(s) holds the referencing record(s) that prevent the delete Action?

i dont want the users to puzzle out which records are responsible for the failed delete Action...

Thanks in advance for any ideas...

Thomas

By Thomas on   6/25/2013 4:14 AM
Gravatar

Re: Deleting Data In The Visual Studio LightSwitch HTML Client

Thanks Michael (and Huy) for this solution, it worked for my application !!

Ruud

By Ruud Jeursen on   9/29/2013 5:33 AM
Gravatar

Re: Deleting Data In The Visual Studio LightSwitch HTML Client

hi
how I can delete raw from table
i tray your cod but i dosent work

and i need to know how to connect my table to the html page
to the text ddl etc

By safaa on   3/2/2014 5:16 AM
Gravatar

Re: Deleting Data In The Visual Studio LightSwitch HTML Client

@safaa - For technical questions please use the official LightSwitch forums at: http://social.msdn.microsoft.com/Forums/vstudio/en-US/home?forum=lightswitch

By Michael Washington on   3/2/2014 5:17 AM
Gravatar

Re: Deleting Data In The Visual Studio LightSwitch HTML Client

Hi Michael, your website and book have helped me immensely in making the leap from silverlight to html/javscript, keep up the good work!

Could you help me understand why you need to asynchronously call getCustomers() before executing the deleteSelected statement inside a promise object?

What problems does that approach avoid instead of simply calling screen.Customers.deleteSelected() directly within the execute statement?

By Philip Rose on   6/25/2014 7:18 AM
Gravatar

Re: Deleting Data In The Visual Studio LightSwitch HTML Client

@Philip Rose - you can never assume data is loaded when the JavaScript is executed by the web browser. The code basically says "get the data, make sure you have the data, and only after you have the data, delete the record".

By Michael Washington on   6/25/2014 7:20 AM

Your name:
Gravatar Preview
Your email:
(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code
CAPTCHA image
Enter the code shown above in the box below
Add Comment   Cancel 

Microsoft Visual Studio is a registered trademark of Microsoft Corporation / LightSwitch is a registered trademark of Microsoft Corporation