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

I have learnt that you can save from a add/edit window, and reload the main page you are going back to by doing the following:

For Example: (adding an order to an order screen)

1. click on your button to add the order
2. enter the details required.
3. hit your custom save button with your validation included.
4. before your commitChanges(); write in the following line: screen.OrderLine.OrderTable.details.refresh(); "This needs applying to your scenario"
5. when you return to your screen your details should have been updated (for example the total value now displays the correct value in my case)

hope this helps...

Answer 2

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.