How to Prevent Panel Navigation when Controls are Dirty


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.


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);

    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.