How to Prevent Panel Navigation when Controls are Dirty
Description
In an application with multiple panel cards, navigation to other panel cards can be prevented if the controls on a panel have not been saved.
Discussion
A common design pattern in a mobile application is to have multiple Panel Cards inside a Panel Navigator. If one Panel Card contains a form, you might want to prevent the user from navigating to another Panel Card if the form has been edited, but not yet been saved.
The Panel Navigator's onBeforePanelActivate client-side event can be used to add validation to the application to prevent navigation if the UX Component is dirty. You can check the value of {dialog.object}._isDirty to determine whether or not UX component has unsaved chaanges. If any edits have been made to controls in the UX Component, {dialog.object}._isDirty will be true. Otherwise, it will have a value of false.
For example, in the following code, if the UX component is dirty, a message box is shown informing the user that they must save their changes before they can navigate away from the current panel card:
if ({dialog.object}._isDirty) {
var title = "Notice";
var html = '<div style="padding:15pt;">Please save your changes before leaving this panel.</div>';
var buttons = [{html: 'OK', value: 'ok'}];
var onClose = function (btn) {
if (button === 'ok') {
setTimeout(function () {
//ok button handler
alert('user pressed ok');
}, 10);
};
A5.msgBox.show(title,html,buttons,onClose);
return false;
}The same technique can also be used in a PanelLayout. For a full explanation and step-by-step instructions on how to use the onBeforePanelActivate client-side event to prevent a user from navigating away from a Panel with unsaved changes, watch the video below:
Click here to download the Component shown in the video.