Making LightSwitch HTML client Popups modal and centered and more

Posted by Xander van der Merwe on 9 April 2015 | 0 Comments

Tags: , ,

Popups in the LightSwitch HTML client is really a nice way to create a popup inside a screen when that Popup will only ever be used inside that screen. In other words, there is no need to create a whole separate Screen and show it as a Dialog since that Popup is only used in one screen.

The LightSwitch HTML client utilizes jQuery Mobile Popup functionality to render Popups. jQuery Mobile Popups support a "dismissable" option and when that is set to False will make the Popup behave like a modal dialog and not allow you to click outside of the Popup or to press Escape to close it. You can then add your own [OK] and [Cancel] buttons onto the Popup to handle those events as you wish and explicitly call screen.closePopup() in those events.

jQuery Mobile also supports a positionTo option that allows you to position the Popup in the cnter of the window.

Note that at the time of writing LightSwitch in Visual Studio 2013 uses jQuery Mobile 1.3 and does not yet support version 1.4 and probably never will.

Out of the box LightSwitch only allows us to call screen.showPopup(popupName) with no additional paramaters or options to set to make it not dismissable or to center it. However, we can add a bit of jQuery magic to enable both of those in the _postRender() event of the Popup group control by adding a 'popupcreate' event handler (it will only work if you add it to the parent of the actual Popup element):

$(element).parent().on("popupcreate", function (e) {
$(e.target).popup({
positionTo: "window", // position the popup in the center of the browser window
dismissible: false // prevent the popup from being dismissable
});
});

Note that making the Popup not being dismissable will not prevent the browser back button from navigating to the previous screen (not the underlying screen).

If you require an event that occurs after a Popup has closed (either through dismissal or through your own command buttons) you can add the following code into the _postRender() event of the Popup group control (it will only work if you add it to the parent of the actual Popup element):

$(element).parent().on("popupafterclose", function() {
toastr.info("popupafterclose"); // this code executes after the Popup has closed
});

Hope this saves you some R&D :)