Lightswitch 2013: Save then Refresh in JS

Question

I have the 2 sets of code:

1. Saves the data

myapp.activeDataWorkspace.ProjectHandlerData.saveChanges();

2.Refreshes the page

window.location.reload();

is there a way to make both of these work together on one button, as currently when i click save, the browser recognizes the changes and the (are you sure you want to leave the page) message or something along those lines pops up..

cheers

Answer 1

This is for the HTML client, right? Assuming that is the case:

saveChanges() is an asynchronous operation, so you'd want to do:

myapp.activeDataWorkspace.ProjectHandlerData.saveChanges().then(function () {
    window.location.reload();
});

That way it will wait until it is finished saving the changes before it reloads the screen.

However, there is a smoother way to do it, at least from the user perspective it's smoother. On the edit screen, leave the Save method out, let LightSwitch handle that. When the user clicks save, it will close the edit screen, and go back to where they were before. Using the options parameter of the showScreen method, we can change that behavior.

Change the method that calls the edit screen like this:

myapp.showEditProject(screen.Project, {
    afterClosed: function (editScreen) {
        myapp.showViewProject(editScreen.Project);
    }
});

This way, after the edit screen is closed, and it has handled the save changes operation for you, the application will automatically navigate to the details view screen of the recently edited item.

If you are instead wanting to refresh the browse screen after adding a new entity:

myapp.showAddEditProject(null, {
    beforeShown: function (addEditScreen) {
        addEditScreen.Project = new myapp.Project();
    },
    afterClosed: function () {
        screen.Projects.load();
    }
});

Those two options, beforeShown and afterClosed, give you a lot of really cool abilities to influence the navigation in your application.