none
HTML Client - How do I cancel navigation away from the page RRS feed

  • Question

  • I have a Browse Screen that shows all my Customers. I have a Delete button next to each one:

    When I click a Delete button and there is an error (because the Customer has Orders), I show it using this code:

    myapp.BrowseCustomers.Delete_execute = function (screen) {
        screen.getCustomers().then(function (customers) {
            // Delete selected
            customers.deleteSelected();
            // Save changes
            myapp.commitChanges().then(null, function fail(e) {
                alert(e.message);
                myapp.cancelChanges();
                throw e;
            });
        });
    };

    However, when I click OK on the popup it goes back to the main page:

    I would like it to stay on the edit screen.

    Thanks!


    The Visual Studio LightSwitch Marketplace

    http://LightSwitchHelpWebsite.com

    Wednesday, April 10, 2013 2:04 PM

Answers

  • Hi,

    myapp.commitChanges() will do the following:

    1. Run validation on the current active screen tab.
    2. If no validation errors, call data service saveChanges()
    3. Go back to previous screen.

    myapp.applyChanges() will do step 1 and 2 and not navigating back.

    myapp.cancelChanges() will invoke data service discardChanges but will navigate back.

    An additional benefit of myapp.commit/apply/cancelChanges is they also deal with the case when you have nested changeset on the Screen.

    For this delete button implementation, I'm wondering if it's better for you to use myapp.activeDataWorkspace.YourDataService saveChanges() and discardChanges(). It will allow you better control of the navigation, and you don't have nested changes to worry about in this case.

    Or, you can use your second block of code, but calling data service discardChanges instead.

    myapp.BrowseCustomers.Delete_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();
               
    });
           
    });
       
    });
    };

    Best regards,
    Huy Nguyen


    Wednesday, April 10, 2013 3:54 PM

All replies

  • If I use this code:

    myapp.BrowseCustomers.Delete_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 () {
    
                });
    
            });
        });
    };

    it wont navigate away from the page when I click the OK button, but I then get this when I try to navigate away manually:


    The Visual Studio LightSwitch Marketplace

    http://LightSwitchHelpWebsite.com

    Wednesday, April 10, 2013 2:26 PM
  • Hi,

    myapp.commitChanges() will do the following:

    1. Run validation on the current active screen tab.
    2. If no validation errors, call data service saveChanges()
    3. Go back to previous screen.

    myapp.applyChanges() will do step 1 and 2 and not navigating back.

    myapp.cancelChanges() will invoke data service discardChanges but will navigate back.

    An additional benefit of myapp.commit/apply/cancelChanges is they also deal with the case when you have nested changeset on the Screen.

    For this delete button implementation, I'm wondering if it's better for you to use myapp.activeDataWorkspace.YourDataService saveChanges() and discardChanges(). It will allow you better control of the navigation, and you don't have nested changes to worry about in this case.

    Or, you can use your second block of code, but calling data service discardChanges instead.

    myapp.BrowseCustomers.Delete_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();
               
    });
           
    });
       
    });
    };

    Best regards,
    Huy Nguyen


    Wednesday, April 10, 2013 3:54 PM
  • HUY

    Can you update your answer to add ".details"

    This is the working code:

    myapp.BrowseCustomers.Delete_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();
                });
    
            });
        });
    };


    The Visual Studio LightSwitch Marketplace

    http://LightSwitchHelpWebsite.com

    Thursday, April 11, 2013 12:18 AM
  • Tuesday, April 23, 2013 9:24 PM
  • Hi

    I have a slightly different version of this: I don't physically delete when the delete button is hit, instead I update a field. Currently my code looks like this:

    myapp.activeDataWorkspace.MeerkatData.ActiveTypes_SingleOrDefault(-1).execute().then(

    myapp.activeDataWorkspace.MeerkatData.
      ActiveTypes_SingleOrDefault(-1).execute().then(function (ActiveTypesQuery) {
            Activity.ActiveType = 
    ActiveTypesQuery.results[0];
        }, function (error) {
            msls.showMessageBox(error, {
                title: "Delete failed"
            });
        });
    

    Which I follow by

    return myapp.commitChanges().then(null, function fail(e) {
            myapp.cancelChanges();
            throw e;
        });
    

    But while it does close the screen, it doesn't actually update the record in the database, just navigates away. How do I get it to commit?

    Sunday, May 19, 2013 9:03 AM
  • I would suspect that there is nothing to save. Does this line actually do anything?

    ActiveTypes_SingleOrDefault(-1).execute().then(function (ActiveTypesQuery) {
            Activity.ActiveType = 
    ActiveTypesQuery.results[0];
    


    The Visual Studio LightSwitch Marketplace

    http://LightSwitchHelpWebsite.com

    Sunday, May 19, 2013 1:44 PM
  • Hi

    Yes, it absolutely does.

    When the screen is opened, the Active field, related to the ActiveType table, has a value of 1. The code above does update the GUI correctly, and it closes the dialog, but the change is not persisted to the DB. If I then try to edit another record, I get the "Save/Discard/Stay on same page " message

    Sunday, May 19, 2013 4:00 PM
  • brilliant answer!! helped me a lot... although i was just wondering is it possible to implement the save and then refresh the page because at the moment im getting the "Are you sure you want to leave message" in all browsers... so something like this:

        myapp.ViewOrderRequest.Save_execute = function (screen) {

        myapp.activeDataWorkspace.ProjectHandlerData.saveChanges();
        window.location.reload();

        };

    i want to remain on the same page so CommitChanges() would not work in this scenario :)

            
    • Edited by Crezzer7 Thursday, August 28, 2014 3:51 PM
    Thursday, August 28, 2014 3:50 PM
  • brilliant answer!! helped me a lot... although i was just wondering is it possible to implement the save and then refresh the page because at the moment im getting the "Are you sure you want to leave message" in all browsers... so something like this:

        myapp.ViewOrderRequest.Save_execute = function (screen) {

        myapp.activeDataWorkspace.ProjectHandlerData.saveChanges();
        window.location.reload();

        };

    i want to remain on the same page so CommitChanges() would not work in this scenario :)

            

    Usually I change the page type from Browse to Edit to get it to behave the way I want. Doesn't always work in all situations, but it is the first thing I try.

    Unleash the Power - Get the LightSwitch 2013 HTML Client / SharePoint 2013 book

    http://LightSwitchHelpWebsite.com

    Thursday, August 28, 2014 4:24 PM
  •   myapp.ViewOrderRequest.Save_execute = function (screen) {
    
         myapp.applyChanges();
         screen.yourscreenquery.refresh();
    
         };


    Sven Elm

    Friday, August 29, 2014 6:37 PM