locked
Prompting to save changes when navigating away from form RRS feed

  • Question

  • Hi,
    I just noticed that in the Lightswitch HTML client, if I start entering data in an add/edit form but click the back button (or navigate away in some other way) before saving the chances, the changes are discarded without any warning.

    Is there any way to set up a warning in case the user accidentally navigates away from the page? Most browsers have multiple keyboard and mouse shortcuts set up for the back button, so it's not that unusual to navigate back accidentally. I'm concerned this could be an issue with my app, especially since some of my forms have a lot of fields across multiple tabs.

    Thanks,
    Matt

    Friday, November 20, 2015 8:46 PM

Answers

  • Here are my reusable set dialog height/width functions to set the height and with of a dialog - called form the _postRender() of the Details tab (of the dialog):

    // C# string.Format() equivalent.
    // e.g. var greeting = stringFormat("Hi, {0}", name);
    function stringFormat () {
        var s = arguments[0];
        for (var i = 0; i < arguments.length - 1; i++) {
            var reg = new RegExp("\\{" + i + "\\}", "gm");
            s = s.replace(reg, arguments[i + 1]);
        }
        return s;
    };
    
    // set height of the current dialog (call in _postRender() of control on dialog)
    function setCurrentDialogHeight (element, height) {
        $(element).parent().closest(".msls-dialog").find('div[class~="msls-dialog-frame"]').css('maxHeight', stringFormat('{0}px', height));
    };
    
    // set width of the current dialog (call in _postRender() of control on dialog)
    function setCurrentDialogWidth(element, width) {
        $(element).parent().closest(".msls-dialog").find('div[class~="msls-dialog-frame"]').css('maxWidth', stringFormat('{0}px', width));
    };


    Regards, Xander. My Blog


    • Edited by novascape Sunday, November 22, 2015 11:28 PM
    • Proposed as answer by ADefwebserver Monday, November 23, 2015 1:40 AM
    • Marked as answer by Matt Browne Monday, November 23, 2015 1:41 AM
    Sunday, November 22, 2015 11:25 PM

All replies

  • LightSwitch will warn you if you are about to lose any unsaved changes. However, it wont if you hit the back button and basically 'undo' your changes.

    See the example on this page:

    http://lightswitchhelpwebsite.com/Blog/tabid/61/EntryId/3250/An-End-To-End-Visual-Studio-LightSwitch-2013-HTML5-Application.aspx


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

    http://LightSwitchHelpWebsite.com

    • Proposed as answer by ADefwebserver Monday, November 23, 2015 1:40 AM
    Sunday, November 22, 2015 6:50 PM
  • Thanks, but unfortunately that is only helpful for forms with "Show as dialog" checked. I unchecked that for several of my screens because the dialog is often too narrow. I imagine there's a way to listen for page navigation events...perhaps I could write some custom Javascript code for this.
    • Proposed as answer by ADefwebserver Monday, November 23, 2015 1:40 AM
    Sunday, November 22, 2015 7:04 PM
  • I agree that this is a "flaw" in the current LS implementation and the only way I was able to overcome this was to change the lightswitch mslsxxx.js file. I was able to put a simple JavaScript alert() in which was better than nothing. I don't have that code anymore as it was just an experiment, but can search again to see if I can find out how.

    Regards, Xander. My Blog

    Sunday, November 22, 2015 7:08 PM
  • Thanks...I can experiment with it myself since you don't have the code anymore - thanks for the suggestion. I was kind of hoping it wouldn't require hacking the msls file but perhaps that's the only way to do it.
    Sunday, November 22, 2015 11:18 PM
  • Interesting idea...that may ultimately work better. Do you put that code in for every screen? I suppose I could make it a reusable function and just call that function in the appropriate _postRender function for each screen... Thank you.
    Sunday, November 22, 2015 11:19 PM
  • Here are my reusable set dialog height/width functions to set the height and with of a dialog - called form the _postRender() of the Details tab (of the dialog):

    // C# string.Format() equivalent.
    // e.g. var greeting = stringFormat("Hi, {0}", name);
    function stringFormat () {
        var s = arguments[0];
        for (var i = 0; i < arguments.length - 1; i++) {
            var reg = new RegExp("\\{" + i + "\\}", "gm");
            s = s.replace(reg, arguments[i + 1]);
        }
        return s;
    };
    
    // set height of the current dialog (call in _postRender() of control on dialog)
    function setCurrentDialogHeight (element, height) {
        $(element).parent().closest(".msls-dialog").find('div[class~="msls-dialog-frame"]').css('maxHeight', stringFormat('{0}px', height));
    };
    
    // set width of the current dialog (call in _postRender() of control on dialog)
    function setCurrentDialogWidth(element, width) {
        $(element).parent().closest(".msls-dialog").find('div[class~="msls-dialog-frame"]').css('maxWidth', stringFormat('{0}px', width));
    };


    Regards, Xander. My Blog


    • Edited by novascape Sunday, November 22, 2015 11:28 PM
    • Proposed as answer by ADefwebserver Monday, November 23, 2015 1:40 AM
    • Marked as answer by Matt Browne Monday, November 23, 2015 1:41 AM
    Sunday, November 22, 2015 11:25 PM
  • Great, thank you. I'm guessing you also use the stringFormat() function for other things? Seems a bit much for just this particular use... but in any case this is very helpful.
    Sunday, November 22, 2015 11:45 PM
  • Also, just curious...the other use I have found for unchecked the "display as dialog" box is for testing during development. If I have a dialog open and then refresh the page, it never works right, so if I'm testing an add/edit form I generally uncheck that box even if I intend to ultimately display it as a dialog in the real app. Is this what others do as well? Is there a simple way to refresh Javascript changes and test dialogs that I'm missing?
    Sunday, November 22, 2015 11:49 PM
  • I'm guessing you also use the stringFormat() function for other things?
    Yes indeed, you can obviously remove it if overkill.

    Regards, Xander. My Blog

    Sunday, November 22, 2015 11:49 PM
  • Also, just curious...the other use I have found for unchecked the "display as dialog" box is for testing during development. If I have a dialog open and then refresh the page, it never works right, so if I'm testing an add/edit form I generally uncheck that box even if I intend to ultimately display it as a dialog in the real app. Is this what others do as well? Is there a simple way to refresh Javascript changes and test dialogs that I'm missing?
    There is nothing that you are missing from what I know. I usually go back to the browse page, then press Ctrl-F5 and reopen the add/edit or view page.

    Regards, Xander. My Blog

    Monday, November 23, 2015 12:22 AM