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.



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



Creating the new Table “Item”.



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



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



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



Follow the steps shown above to create an Add/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.



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



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.

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.



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.