How to Delete a Record From Collection in LightSwitch HTML Client

If you are new to LightSwitch HTML Clients and have created a couple of basic applications, as a next step, you might be searching for an option to delete a record. This is the right article to get the right solution for how to delete a record from a Collection in a LightSwitch HTML Client.

Setup the Project

Create a new project called DeleteRecord as shown in the following figure.

New Project

Let us start with the new table called "Item" as shown below.

New Table

Creating the new Table “Item”.

Creating new Table

Now the table is ready. Let us create a screen to display the records from the table created.

Table created

Name the screen as you want and select the appropriate data collection from the dropdown as shown below.

data collection

Now the screen is ready. To display records, we need to have a screen to add records to the table.

add records to the table

Follow the steps shown above to create an Add/Edit screen.

Add and Edit screen

Follow the steps shown above to create the Add/Edit screen. Do uncheck the Item Details check (#2) to avoid the item detail part. Now the user can add records to the Item table using the Add/Edit screen.

Let us add a command button to delete a record as shown in the following figure.

command button to delete a record

If you are done with creating the Delete Command button, just press F5 to run the application to add some records to the table.

creating Delete Command button

You may notice that there is no Delete button available. It is necessary to enable the button in the code, though we have added the Delete Command button to the screen.

Delete Command button

Select the delete command button and right-click and click on the Edit CanExecute Code option to add code to enable the button.

myapp.BrowseItems.deleteSelectedItem_canExecute = function (screen) {

    // Write code here.

    return screen.Items.selectedItem !== null;

};

Just add the single line of code to the event as shown above. In the event, we are checking whether any of the items are selected. If selected, we are returning true, to enable the button.

Now the Delete command button will be available. We need to add code to delete an item.

add code to delete

Follow the steps shown above to add the code to delete an item.

myapp.BrowseItems.deleteSelectedItem_execute = function (screen) {

    // Delete selected

    screen.Items.deleteSelected();

 

    // Save changes

    myapp.commitChanges().then(function success() {

        // If success.

        msls.showMessageBox("Delete is successfull.", { title: "Delete" });

    }, function fail(e) {

        // If error occurs,

        msls.showMessageBox(e.message, { title: e.title }).then(function () {

            // Cancel Changes

            myapp.cancelChanges();

        });

    });

};

Just copy and paste the code shown above. Press F5 to run the application.

run the application

Next Recommended Readings