The Semi-Rookie - Stopping a Tab Change

Classic Servoy
1

Hi all,

And good day from the sweaty mess that is Chicago in August.

I would like, under certain conditions, to prevent a user from leaving a form that is part of a tabpanel. For example, they start an edit or a new record, and attempt to move to a different tab without either saving or rolling back the edits or new record. Thusfar, what I’ve tried to do is use the “onchange” event in the tabpanel. I set a flag when a new record is started or an editing session is started. If they attempt to change tabs, the onchange event fires. I look to see if the flag is set, and if it is, I display an error message telling them to either save or cancel, and set the tabIndex back to the value in previousIndex.

Unfortunately, using that mechanism, what happens is that when I reset the tabIndex, it immediately fires off another onchange event, causing it to run the onchange code again, which resets the tabIndex, which… Not exactly what I had in mind :?

Not really knowing if this is the best practice for this, I’m wondering if this is the correct way or if there is a better way to accomplish this. I’ve yet to find a method for just “cancelling” a tabchange. I have learned that, instead of setting a flag, I could be using “hasNewRecords” or “hasRecordChanges”, but that doesn’t solve the challenge of stopping the tab change.

As a fallback solution, I could just rollback any unsaved work if they leave the form, but I’d rather be able to ask them if that’s what they want to do.

Alternatively, I could present a dialog asking them if they’d like to save their work, and do that for them rather than taking them back to the form.

Thoughts, anyone? As always, thanks for any guidance that you are able to provide.

Ron

2

Hi Ron,

I guess you need to keep track of the state your tabchange is in like so:

/**
 * @type {Boolean}
 */
var _bResetTab = false;

/**
 * @param {Object} previousIndex
 * @param {Object} event
 */
function onTabChange(previousIndex, event) {
    // check if we are reverting to a previous tab, if so ignore rest of code
    if (_bResetTab) {
        _bResetTab = false;
        return;
    }
    // check if the condition for changing the tab is okay or not
    if (myState == wrong) {
        // not okay, revert to previous tab
        _bResetTab = true;
        elements.myTabPanel.tabIndex = previousIndex;
    }
}

Hope this helps.

3

I believe, not sure, if you return false in the onHide of the tabform, the tabchange does not happen!

4

Good thoughts, fellas. Thanks a lot for that. Good things to think about.

I’ll get back to you and let you know what finally solved the problem.

Ron